https://github.com/normandy72/nested-views
Routing State with Nested Views in AngularJS. Coursera course "Single Page Web Applications with AngularJS" by Yaakov Chaikin.
https://github.com/normandy72/nested-views
angular angularjs css css3 html html5 javascript js
Last synced: about 1 month ago
JSON representation
Routing State with Nested Views in AngularJS. Coursera course "Single Page Web Applications with AngularJS" by Yaakov Chaikin.
- Host: GitHub
- URL: https://github.com/normandy72/nested-views
- Owner: Normandy72
- Created: 2023-01-23T12:20:23.000Z (over 3 years ago)
- Default Branch: master
- Last Pushed: 2023-01-23T12:50:25.000Z (over 3 years ago)
- Last Synced: 2025-03-04T08:44:54.937Z (over 1 year ago)
- Topics: angular, angularjs, css, css3, html, html5, javascript, js
- Language: JavaScript
- Homepage:
- Size: 93.8 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Routing State with Nested Views
### Setting up Child (nested) State
```
.state('view1.child', {
url: '/detail/{param1}',
templateUrl: 'view1Detail.html',
...
});
```
__view1.html__ (parent state template)
```
content...
```
### Inherited resolve Properties
```
.state('view1', {
resolve: {
myData: 'someVal'
}
...
});
```
```
.state('view1.child', {
controller: "ChildCtrl as child"
...
});
```
```
ChildCtrl.$inject = ['myData'];
function ChildCtrl(myData){
...
};
```
***
#### _Summary_
* Nested states allow us to logically represent nested views.
* Parent state template has a ui-view in its template for the child state's template to insert its HTML.
* Child state name is usually declared with syntax `parent.child`.
* The optionally declared url of the child gets concatenated to the declared url of the parent.
* The parent's resolve property is inherited by the child and is injectable directly into the child's controller.
***