angularJS中router的使用指南

前端技术 2023/09/06 JavaScript

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

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>

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

本文地址：https://www.stayed.cn/item/15099

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案