https://github.com/normandy72/routing
Routing in AngularJS. Coursera course "Single Page Web Applications with AngularJS" by Yaakov Chaikin.
https://github.com/normandy72/routing
angular angularjs css css3 html html5 javascript js
Last synced: about 1 month ago
JSON representation
Routing in AngularJS. Coursera course "Single Page Web Applications with AngularJS" by Yaakov Chaikin.
- Host: GitHub
- URL: https://github.com/normandy72/routing
- Owner: Normandy72
- Created: 2023-01-20T09:17:25.000Z (over 3 years ago)
- Default Branch: master
- Last Pushed: 2023-01-20T10:37:01.000Z (over 3 years ago)
- Last Synced: 2025-07-24T21:46:03.863Z (11 months ago)
- Topics: angular, angularjs, css, css3, html, html5, javascript, js
- Language: HTML
- Homepage:
- Size: 160 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Routing
### For routing we can use:
#### ngRoute
* Separate JS file.
* Developed by Google & community.
* No concept of UI state.
* Every route must be represented by a URL.
* No concept of nested views.
* OK for prototype projects.
#### ui-router
* Separate JS file.
* Developed by community.
* UI state in center. Can have a route with no unique URL for that route.
* URL routing is also supported. UI state is updated based on the URL.
* Neated views suppurted.
* Better choice for more serious projects.
### Steps to using routing
#### Step 1: Reference in HTML
```
```
`` - reference _after_ angular
#### Step 2: Place ui-view Initial View Placeholder
```
...
// content of a view will be loaded here
...
```
#### Step 3: Declare ui-router As a Dependency
`angular.module('App', ['ui.router']);`
`'ui.router'` - module name uses '.', not '-'
#### Step 4: Configure Routes in .config Method
```
angular.module('App')
.config(RoutesConfig);
RoutesConfig.$inject = ['$stateProvider', '$urlRouterProvider'];
function RoutesConfig($stateProvider, $urlRouterProvider){
...
};
...
$stateProvider
.state('view1', {
url: '/view1',
template: '
... '
// or
// templateURL: 'view1.html'
})
.state('view2', {...});
```
`'view1'` - unique state name
` url: '/view1'` - _optional_ URL associated with the state
`template: '
... '` - contents of template will be inserted into `...`
`.state('view2', {...});` - state method is chainable
```
$urlRouterProvider
.otherwise(''/view1');
...
$stateProvider
.state('view1', {
url: '/view1',
...
});
```
***
#### _Summary_
* `ui-router` uses independent concepts for URL mapping and UI state representation.
* Configure ui-router in angular.config:
* provide alternate URL mapping with `$urlRouterProvider.otherwise('alternateURL');`;
* configure states with optional URLs using `$stateProvider.state('name', {url: '...', templateUrl: '...'})`.
* Use `` tag as placeholder for state-based UI.
* Use `ui-sref` attribute for constructing links and actions to configured states.
***