AngularJS中路由怎么用
这篇文章主要介绍了AngularJS中路由怎么用,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。
我们提供的服务有:成都网站建设、网站建设、微信公众号开发、网站优化、网站认证、招远ssl等。为成百上千家企事业单位解决了网站和推广的问题。提供周到的售前咨询和贴心的售后服务,是有科学管理、有技术的招远网站制作公司
具体如下:
目前的理解中,这个NG的路由模块可以用于带有多视图的单页面开发。
先把所有代码贴出:
HTML:
AngularJS 路由应用
list.html:
HI,这里是list.html
{{name}}
JS:
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:
要使用NG里的路由,必须先在特定的模块中定义它:
.config(['$routeProvider', function($routeProvider){ //内容 }
通过when和otherwise两个方法来进行路由的匹配。(其实就是匹配上面URL后面/的字符)。最后把匹配到的字符所对应的字段或者文件放入带有ng-view 指令的DOM里面。
when里面有许多属性。里面可以设置控制器,控制器会匹配给对应的字段或文件。就像上面代码中listController控制器一样。
ng-view指令有许多规则:
在匹配路由时:
1、创建一个新的当前作用域。
2、删除前一个作用域。
3、将当前的模板(控制器等)与当前新建的作用域关联起来。
4、如果有内置关联的控制器,将其与当期作用域关联起来。
感谢你能够认真阅读完这篇文章,希望小编分享的“AngularJS中路由怎么用”这篇文章对大家有帮助,同时也希望大家多多支持创新互联,关注创新互联行业资讯频道,更多相关知识等着你来学习!
分享文章:AngularJS中路由怎么用
文章来源:http://scyanting.com/article/gecocd.html