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