当前位置：首页 > 资讯 > 技术文档

AngularJS入门教程一：路由用法初探

时间：2021-06-20 23:44 编辑：来源：阅读：
扫一扫，手机访问

摘要：AngularJS入门教程一：路由用法初探

本文实例讲述了AngularJS路由用法。分享给大家供大家参考，具体如下：目前的理解中，这个NG的路由模块可以用于带有多视图的单页面开发。先把所有代码贴出： [b]HTML:[/b]

<!doctype html>
<meta charset="UTF-8">
<html>
<head>
  <link href="self.css" rel="external nofollow" rel="stylesheet">
</head>
<body ng-app='routingDemoApp'>
<h2>AngularJS 路由应用</h2>
<ul>
  <li><a href="#/" rel="external nofollow" >首页</a></li>
  <li><a href="#/computers" rel="external nofollow" >电脑</a></li>
  <li><a href="#/user" rel="external nofollow" >用户</a></li>
  <li><a href="#/blabla" rel="external nofollow" >其他</a></li>
</ul>
<div ng-view></div>
<script src="angular.min.js"></script>
<script src="angular-route.min.js"></script>
<script src="test.js"></script>
</body>
</html>

[b]list.html：[/b]

<div>
  <h1>HI,这里是list.html</h1>
  <h2>{{name}}</h2>
</div>

[b]JS:[/b]

var app = angular.module('routingDemoApp',['ngRoute']);
app.config(['$routeProvider', function($routeProvider){
    $routeProvider
      .when('/',{template:'这是首页页面'})
      .when('/computers',{
        template:'这是电脑分类页面'
      })
      .when('/user',{templateUrl:'list.html',controller:'listController'})
      .otherwise({redirectTo:'/'});
}]);
app.controller('listController',function($scope){
  $scope.name="ROSE";
});

首先由于我用的是Angular1.5,所以需要额外引入angular-route.js:

<script src="angular.min.js"></script>
<script src="angular-route.min.js"></script>

要使用NG里的路由，必须先在特定的模块中定义它：

.config(['$routeProvider', function($routeProvider){
//内容
}

通过when和otherwise两个方法来进行路由的匹配。（其实就是匹配上面URL后面/的字符）。最后把匹配到的字符所对应的字段或者文件放入带有ng-view 指令的DOM里面。 when里面有许多属性。里面可以设置控制器，控制器会匹配给对应的字段或文件。就像上面代码中listController控制器一样。 ng-view指令有许多规则： [b]在匹配路由时：[/b] 1、创建一个新的当前作用域。 2、删除前一个作用域。 3、将当前的模板（控制器等）与当前新建的作用域关联起来。 4、如果有内置关联的控制器，将其与当期作用域关联起来。更多关于AngularJS相关内容感兴趣的读者可查看本站专题：《[url=http://www.1sucai.cn/Special/919.htm]AngularJS指令操作技巧总结[/url]》、《[url=http://www.1sucai.cn/Special/893.htm]AngularJS入门与进阶教程[/url]》及《[url=http://www.1sucai.cn/Special/898.htm]AngularJS MVC架构总结[/url]》希望本文所述对大家AngularJS程序设计有所帮助。

全部评论(0)

上一篇：AngularJS中$http使用的简单介绍
下一篇：使用Angular.js实现简单的购物车功能

资讯排行榜
更多>>