AngularJS 入门6-路由

AngularJS 入门6-路由

AngularJS 路由允许我们通过不同的 URL 访问不同的内容。

通过 AngularJS 这个NG的路由模块可以实现带有多视图的单页面开发

实例：

//HTML部分

<body ng-app='routingDemoApp'><h2>AngularJS 路由应用</h2><ul><li><a href="#/">首页</a></li><li><a href="#/computers">电脑</a></li><li><a href="#/printers">打印机</a></li><li><a href="#/blabla">其他</a></li></ul><div ng-view></div><script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script><script src="http://apps.bdimg.com/libs/angular-route/1.3.13/angular-route.js"></script>
</body>

解析：

1当点击链接href="#/computers"，会调用对应的 $routeProvider.when 函数

2使用 ngView 指令：<div ng-view></div>，会将不同的内容显示在div内，实现单页面的多视图开发

3需要载入实现路由的 js 文件：angular-route.js

//JS部分

<script>angular.module('routingDemoApp',['ngRoute']).config([ '$routeProvider' ,  function($routeProvider){$routeProvider.when('/',{template:'这是首页页面'}).when('/computers',{template:'这是电脑分类页面'}).when('/printers',{template:'这是打印机页面'}).otherwise({redirectTo:'/'});} ]);
</script>

解析：

通过使用 configAPI，我们请求把$routeProvider注入到我们的配置函数并且使用$routeProvider.whenAPI来定义我们的路由规则。

1使用AngularJS 模块的 config 函数用于配置路由规则

angular.module('routingDemoApp',['ngRoute'])

.config([ '$routeProvider' , function($routeProvider){...} ]);

2配置 $routeProvider用来定义路由规则

第一个参数是 URL 或者 URL 正则规则，第二个参数为路由配置对象。

路由配置对象语法规则如下：

$routeProvider.when(url, {

template: string,

templateUrl: string,

controller: string, function 或 array,

controllerAs: string,

redirectTo: string, function,

resolve: object<key, function>

});

参数说明：

template:

如果我们只需要在 ng-view 中插入简单的 HTML 内容，则使用该参数：

.when('/computers',{template:'这是电脑分类页面'})

templateUrl:

如果我们只需要在 ng-view 中插入 HTML 模板文件，则使用该参数：

$routeProvider.when('/computers', {

templateUrl: 'views/computers.html',});

以上代码会从服务端获取 views/computers.html 文件内容插入到 ng-view 中。

views/computers.html代码：

<div>

</div>

controller:

function、string或数组类型，在当前模板上执行的controller函数，生成新的scope。

controllerAs:

string类型，为controller指定别名。

redirectTo:

重定向的地址。

resolve:

指定当前controller所依赖的其他模块。

AngularJS 入门6-路由相关推荐

跟我学AngularJs:AngularJs入门及第一个实例
林炳文Evankaka原创作品.转载请注明出处http://blog.csdn.net/evankaka 摘要:主要给大家介绍了AngularJs及其特性,并以3个实例来做说明. 本教程使用Angul ...
《AngularJS入门与进阶》图书简介
一.图书封面二.图书CIP信息图书在版编目(CIP)数据 AngularJS入门与进阶 / 江荣波著. – 北京 : 清华大学出版社, 2017 ISBN 978-7-302-46074-9 Ⅰ. ...
AngularJS ui-router (嵌套路由)
http://www.oschina.net/translate/angularjs-ui-router-nested-routes AngularJS ui-router (嵌套路由) 英文原文:A ...
[Angularjs]视图和路由（三）
写在前面上篇文章主要介绍了路由中when方法的第二个参数,常见的几个属性,以及作用.本篇文章,将介绍和路由相关的几个常见的服务. 系列文章 [Angularjs]ng-select和ng-optio ...
NodeJS入门04-Express路由和中间件 - 小之 - 博客园
nodeJS入门04-Express路由和中间件 Express框架是后台的Node框架,在后台的受欢迎的程度,和jQuery一样,就是企业的事实上的标准. 路由路由是指如何定义应用的端点(URIs ...
AngularJS入门心得2——何为双向数据绑定
前言:谁说Test工作比较轻松,最近在熟悉几个case,差点没疯.最近又是断断续续的看我的AngularJS,总觉得自己还是没有入门,可能是自己欠前端的东西太多了,看不了几行代码就有几个常用函数不熟悉 ...
[Angularjs]视图和路由（四）
写在前面关于angularjs的路由的概念基本上这篇就要结束了,通过学习,以及在实际项目中的实践,还是比较容易上手的.自己也通过angularjs做了一个在app上的一个模块,效果还是可以的. 系列 ...
AngularJS入门心得1——directive和controller如何通信
粗略地翻了一遍<JavaScript DOM编程艺术>,就以为可以接过AngularJS的一招半式,一个星期过去了,我发现自己还是Too Young,Too Simple!(刚打照面的时候 ...
AngularJS入门之数据绑定
本篇我们看一下AngularJS中的数据绑定.虽然我们直到这篇才提到数据绑定,但事实上在前面几篇中我们已经非常熟练的运用AngularJS的数据绑定功能了! ngBind(ng-bind)/ {{ e ...

AngularJS 入门6-路由

AngularJS 入门6-路由相关推荐

最新文章

热门文章