angularJS中router的使用指南

  这几天看了angularjs和backbone,大看了解了knockout和emberjs,刚刚上网看到了一个angular的router的demo,现在顺便记下来

  

复制代码 代码如下:

  <!---

  DEMO_INDEX.html

  -->

  <!doctype html>

  <head>

  <meta charset="utf-8">

  <title>route</title>

  </head><br>//这个重要是做IE的兼容,发现不管用,IE坑爹,你懂的

  <body ng-app="routeApp" class="ng-app:routeApp"  id="routeApp">

  <h1>Route Demo index</h1>

  <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

  运行下面代码

  

复制代码 代码如下:

  <hr/>

  <h3>Route : List.html</h3>

  <ul>

  <li ng-repeat="id in [1, 2, 3 ]">

  <a href="#/list/{{ id }}"> ID{{ id }}</a>

  </li>

  </ul>

  //detail.html

  运行下面代码

  

复制代码 代码如下:

  <hr/>

  <h3>Route <span style="color: red;">{{id}}</span>: detail.html </h3>

  代码就这些了,希望小伙伴们能够喜欢。