AngularJS入门教程之路由机制ngRoute实例分析

<script src="/UploadFiles/2021-04-02/angular.min.js">

因为路由机制上一个单独的模块，所以我们需要单独的引入路由文件，仅仅引入AngularJS.min.js是不包含路由的，引入文件以后我们还需要在模块声明中注入对ng-route的依赖：


var app = angular.module("myApp", ['ngRoute']);




完成了这些，我们就可以在模板或是controller中使用上面的服务和指令了。下面我们需要定义一个路由表。
第二步：完成路由表的配置


app.config(['$routeProvider', function ($routeProvider) {
    $routeProvider
      .when('/div1', {
        template: '<p>这是div1{{text}}</p>',
        controller: 'div1Controller'
      })
      .when('/div2', {
        template: '<p>这是div2{{text}}</p>',
          controller: 'div2Controller'
      })
      .when('/div3', {
        template: '<p>这是div3{{text}}</p>',
        controller: 'div3Controller'
      })
      .when('/content/:id', {
        template: '<p>这是content{{id}}</p>',
        controller: 'div4Controller'
      })
      .otherwise({
        redirectTo: '/div1'
      });
}]);




$routeProvider提供了定义路由表的服务，它有两个核心方法，when(path,route)和otherwise(params)，先看一下核心中的核心when(path,route)方法。
when(path,route)方法接收两个参数，path是一个string类型，表示该条路由规则所匹配的路径，它将与地址栏的内容($location.path)值进行匹配。如果需要匹配参数，可以在path中使用冒号加名称的方式，如：path为/show/:name，如果地址栏是/show/tom，那么参数name和所对应的值tom便会被保存在$routeParams中，像这样：
{name : tom}。我们也可以用*进行模糊匹配，如：/show*/:name将匹配/showInfo/tom。
参数说明如下：


controller //function或string类型。在当前模板上执行的controller函数，生成新的scope
controllerAs //string类型，为controller指定别名
template //string或function类型，视图所用的模板，这部分内容将被ngView引用
templateUrl //string或function类型，当视图模板为单独的html文件或是使用了<script type="text/ng-template">定义模板时使用
resolve //指定当前controller所依赖的其他模块
redirectTo //重定向的地址




第三步：在主视图模板中指定加载子视图的位置
我们的单页面程序都是局部刷新的，那这个“局部”是哪里呢，这就轮到ngView出马了，只需在模板中简单的使用此指令，在哪里用，哪里就是“局部”。
通过以上我们就完成了了一个路由的全部配置过程，在没有接触路由的时候感觉路由这一块是比价难的，但是当我们真正的了解到这一块的原理的时候并不是非常的难，路由在AngularJS中是核心部分所以我们需要牢牢的掌握这一部分。
友情推荐：
看到这可能会有人说如果有个完整的Ddeo就好了，所以说小编给大家推荐一个编写前台代码的工具RunJS并且可以实现代码的共享，小编的这个Demo就在这上面，可在此处查看效果；http://sandbox.runjs.cn/show/gj894e3t#/content/13
此处查看源码：

http://runjs.cn/code/gj894e3t
这样以后我们就可以随意的分享代码，尤其是我们在讲课的时候非常的方便！
更多关于AngularJS相关内容感兴趣的读者可查看本站专题：《AngularJS入门与进阶教程》及《AngularJS MVC架构总结》
希望本文所述对大家AngularJS程序设计有所帮助。