首页 > web前端 > js教程 > 正文

AngularJS入门教程(1)-路由用法简单介绍

黄舟
发布: 2017-05-27 10:33:39
原创
871 人浏览过

这篇文章主要介绍了AngularJS路由用法,简单分析了AngularJS路由的概念、功能及基本使用方法,需要的朋友可以参考下

本文实例讲述了AngularJS路由用法。分享给大家供大家参考,具体如下:

目前的理解中,这个NG的路由模块可以用于带有多视图的单页面开发。

先把所有代码贴出:

HTML:

<!doctype html>
<meta charset="UTF-8">
<html>
<head>
  <link href="self.css" rel="external nofollow" rel="stylesheet">
</head>
<body ng-app=&#39;routingDemoApp&#39;>
<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>
<p ng-view></p>
<script src="angular.min.js"></script>
<script src="angular-route.min.js"></script>
<script src="test.js"></script>
</body>
</html>
登录后复制

list.html:

<p>
  <h1>HI,这里是list.html</h1>
  <h2>{{name}}</h2>
</p>
登录后复制

JS:

var app = angular.module(&#39;routingDemoApp&#39;,[&#39;ngRoute&#39;]);
app.config([&#39;$routeProvider&#39;, function($routeProvider){
    $routeProvider
      .when(&#39;/&#39;,{template:&#39;这是首页页面&#39;})
      .when(&#39;/computers&#39;,{
        template:&#39;这是电脑分类页面&#39;
      })
      .when(&#39;/user&#39;,{templateUrl:&#39;list.html&#39;,controller:&#39;listController&#39;})
      .otherwise({redirectTo:&#39;/&#39;});
}]);
app.controller(&#39;listController&#39;,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([&#39;$routeProvider&#39;, function($routeProvider){
//内容
}
登录后复制

通过when和otherwise两个方法来进行路由的匹配。(其实就是匹配上面URL后面/的字符)。最后把匹配到的字符所对应的字段或者文件放入带有ng-view 指令的DOM里面。

when里面有许多属性。里面可以设置控制器,控制器会匹配给对应的字段或文件。就像上面代码中listController控制器一样。

ng-view指令有许多规则:

在匹配路由时:

1、创建一个新的当前作用域。
2、删除前一个作用域。
3、将当前的模板(控制器等)与当前新建的作用域关联起来。
4、如果有内置关联的控制器,将其与当期作用域关联起来。

以上是AngularJS入门教程(1)-路由用法简单介绍的详细内容。更多信息请关注PHP中文网其他相关文章!

相关标签:
来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责声明 Sitemap
PHP中文网:公益在线PHP培训,帮助PHP学习者快速成长!