angularJS中router的使用指南
这几天看了angularjs和backbone,大看了解了knockout和emberjs,刚刚上网看到了一个angular的router的demo,现在顺便记下来
<!--- DEMO_INDEX.html --> <!doctypehtml> <head> <metacharset="utf-8"> <title>route</title> </head><br>//这个重要是做IE的兼容,发现不管用,IE坑爹,你懂的 <bodyng-app="routeApp"class="ng-app:routeApp" id="routeApp"> <h1>RouteDemoindex</h1> <scriptsrc="http://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.6.2pre/html5shiv.js"></script> <scriptsrc="http://cdnjs.cloudflare.com/ajax/libs/json2/20121008/json2.js"></script> <divng-view></div> <scriptsrc="http://localhost:81/js/angular.min.js"></script> <script> varrouteApp=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
运行下面代码
<hr/> <h3>Route:List.html</h3> <ul> <ling-repeat="idin[1,2,3]"> <ahref="#/list/{{id}}">ID{{id}}</a> </li> </ul>
//detail.html
运行下面代码
<hr/> <h3>Route<spanstyle="color:red;">{{id}}</span>:detail.html</h3>
代码就这些了,希望小伙伴们能够喜欢。