https://github.com/normandy72/routing-state-with-url
Routing State with URL Parameters. Coursera course "Single Page Web Applications with AngularJS" by Yaakov Chaikin.
https://github.com/normandy72/routing-state-with-url
angular angularjs css css3 html html5 javascript js
Last synced: 2 months ago
JSON representation
Routing State with URL Parameters. Coursera course "Single Page Web Applications with AngularJS" by Yaakov Chaikin.
- Host: GitHub
- URL: https://github.com/normandy72/routing-state-with-url
- Owner: Normandy72
- Created: 2023-01-22T17:52:55.000Z (over 3 years ago)
- Default Branch: master
- Last Pushed: 2023-01-22T18:21:02.000Z (over 3 years ago)
- Last Synced: 2025-08-17T11:38:25.239Z (10 months 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 URL Parameters
### Step 1: Set up URL Property With Param(s)
```
.state('view1', {
url: '/view1/{param1}',
templateUrl: 'view1.html',
controller: 'View1Ctrl as view1',
resolve: {
myData: ['$stateParams', function($stateParams){
return getDataBasedOn($stateParams.param1);
}]
}
});
```
### Step 2: Inject Resolve Property Into Controller
```
View1Ctrl.$inject = ['myData'];
function View1Ctrl(myData){
var view1 = this;
view1.myData = myData;
}
```
```
Link to view with data
```
`view1` - state name
`{itemId:someVal}` - param name/value pairs
***
#### _Summary_
* State's URL property can be declared with parameters.
* Parameters:
* wrapped in curly braces (`{paramName}`);
* can have more complex matching rules other than just a string;
* support regular expression matching.
* Use `$stateParams` service to retrieve parameters (`$stateParams.paramName`).
* Construct a URL with ui-sref directive: `ui-sref="stateName({paramName:value})"`
***