Angularjs routing
(1) Introduce angular-route.min.js
(2) The realization of roTER function depends on the instruction of NG-view
(3) The realization of ruter function depends on the he r F attribute of a tag
Href-‘# page generation to load ‘
(4) The specific syntax of router routing is created through app page data model
Build a route through the config method
In routing,.when() is used to determine which page is loaded
In routing, pass. Otherwish () determines which page the route loads by default
Config ([“” routeProvider”,function(routeProvider”,function(routeProvider){
$routeprovider
.when(‘ page id ‘, {
TemplateUrl :’ The url of the page to load (starting from where the route is),
Controller: Indicates the controller name of the corresponding page.
.
otherwise({
tedirectTo;” / default page loading code “})
})
}])
Note :(1) if the routing function is needed, a message named [n g R ou te] must be injected when creating the app of the page data model. This injection information is equivalent to declaring to the current page that I want to use the routing function. Var app =angular.module(‘app ‘,[‘ngroute’])
(2) Do not forget to add ng-view to containers carrying different pages, otherwise the selected pages cannot be loaded
The single page implementation works like this. When the value of hā sh changes after passing the A tag, he looks for the corresponding equal route and then finds the corresponding HTML and controller through the route
ui-router
Replace the former stateProvider with the former stateProvider with the former routeProvider, and replace the former ng-view with the uI-view.
.state(‘index’) where the parameter index is a state that the user browses, and index.detail is when the user accesses index/detail in that state, which is also the key to achieving deep links. So the url below is the path in that state, which is essentially a child. Urls are powerful and can take parameters. left@index is the left module in the template in index state
Four parameter writing methods:
/user/: ID match /user/1 does not match /user
/user/{id} is the same as above except for curly braces
/ user / {id: [0-9] {1, 8}}
/user? Id&name this is the common query parameter /user? If id=1&name=lihao =1&name=lihao
Views is the view, here we solve the multi-view nesting. In one state, you can set up multiple views with different names, and for each view, you can configure different controllers and templates.
What does a state object mean? There are some methods in there, but what does the most common state object mean? There are some methods in there, but what does the most common state object mean? There are also some methods, the most common of which is state.go(), which is a jump to a route. state(url,params,reload:true); Jumps to the specified URL state, and finally passes the parameter, reload being true. Ui-sref =”user(id:1,name: ‘lihao’)”; state(URL, params, {reload: true}); Jumps to the specified URL state, and finally passes the parameter, reload being true. Ui-sref =”user({id:1,name:’lihao’})”; state(URL,params,reload:true); Jumps to the specified URL state, and finally passes the parameter, reload being true. Ui-sref =”user(id:1,name: ‘lihao’)” $state. Go (‘user’, {id:1, name:’lihao’}); Same effect.
Then use the $stateParams object below on the target page to accept the parameters here.
Of course, there are href() includes() and other methods. See the UI-Router link below
Inject stateParams Inject stateParams inject stateParams into the stateParams module, and $stateParams is an object that gets the parameters passed.
If the route is configured
/ / url: / user? Id&name // The url for browsing is: /user? Id =1&name=lihao // The stateParams object for the controller in the current page is: id:1,name:lihao {id:1,name:lihao} Use stateParams object value: id:1,name:lihao use stateParams object value: id:1,name:lihao use stateParams object value: id:1,name:lihao
StateParams can only be used when the state is active and all dependencies are injected. Otherwise, you can use stateParams instead. Otherwise, you can use stateParams instead. Otherwise, you can use state.current. Params instead
2 The values that exist in the stateParams object can only be those that are defined in the current URL. Only parameters defined in defining the current URL, which is the URL at which stateParams is located.
Clear a blog, indeed will need some time, I hope to myself to other people, a little help is good, the first ramp, welcome correction.
UI – the router API UI – router. Making. IO/ng1 / docs / 0….