宜宾网站建设公司

AngularJS中路由怎么用-创新互联

这篇文章主要介绍了AngularJS中路由怎么用，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。

成都创新互联公司-成都网站建设公司，专注做网站、网站制作、网站营销推广，国际域名空间，网站空间，网站托管、服务器租用有关企业网站制作方案、改版、费用等问题，请联系成都创新互联公司。

具体如下：

目前的理解中，这个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中路由怎么用”这篇文章对大家有帮助，同时也希望大家多多支持创新互联建站，关注创新互联网站建设公司行业资讯频道，更多相关知识等着你来学习!

另外有需要云服务器可以了解下创新互联建站www.cdcxhl.com，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。


分享文章：AngularJS中路由怎么用-创新互联
本文路径：http://ybzwz.com/article/ehios.html

其他资讯