Home > Developer > JavaScript
AngularJS router User Guide, angularjsrouter
I have read angularjs and backbone over the past few days. I have learned about knockout and emberjs. I just saw an angular router demo on the Internet. Now I can write it down by the way.
Copy codeThe Code is as follows:
<! ---
DEMO_INDEX.html
-->
<! Doctype html>
<Head>
<Meta charset = "UTF-8">
<Title> route </title>
</Head> <br> // This is important for IE compatibility. I find it is useless. You know, IE.
<Body ng-app = "routeApp" class = "ng-app: routeApp" id = "routeApp">
<H1> Route Demo index <Script src = "http://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.6.2pre/html5shiv.js"> </script>
<Script src = "http://cdnjs.cloudflare.com/ajax/libs/json2/20121008/json2.js"> </script>
<Div ng-view> </div>
<Script src = "http: // localhost: 81/js/angular. min. js"> </script>
<Script>
Var routeApp = angular. module ('routeapp', []);
RouteApp. config (['$ routeProvider', function ($ routeProvider ){
$ RouteProvider
. When ('/list ',{
TemplateUrl: 'list.html ',
Controller: 'routelistctl'
})
. When ('/list/: id ',{
TemplateUrl: 'detail.html ',
Controller: 'routedetailctl'
})
. Otherwise ({
RedirectTo: '/list'
});
}]);
// Controller
RouteApp. controller ('routelistctl ', function ($ scope ){
});
RouteApp. controller ('routedetailctl ', function ($ scope, $ routeParams ){
$ Scope. id = $ routeParams. id;
});
</Script>
</Body>
</Html>
// List.html
Run the following code:
Copy codeThe Code is as follows:
<Hr/>
<H3> Route: List.html <Ul>
<Li ng-repeat = "id in [1, 2, 3]">
<A href = "#/list/{id}"> ID {id} </a>
</Li>
</Ul>
// Detail.html
Run the following code:
Copy codeThe Code is as follows:
<Hr/>
<H3> Route <span style = "color: red;" >{{ id }}</span>: detail.html
This is the code. I hope my friends will like it.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
