AngularJs之八

Posted 2020-08-26 @新时代的码砖工

***今天讲一下angularJs的路由功能：

一：angularJs路由。

1.AngularJS 路由允许我们通过不同的 URL 访问不同的内容。
2.通过 AngularJS 可以实现多视图的单页Web应用 。
3.通常我们的URL形式为 http://网址/first/page，但在单页Web应用中 AngularJS 通过 # + 标记 实现 。
例如：

http://hengboit.com/#/first
http://hengboit.com/#/second
http://hengboit.com/#/third

当我们点击以上的任意一个链接时，向服务端请的地址都是一样的 。 因为 # 号之后的内容在向服务端请求时会被浏览器忽略掉。 所以我们就需要在客户端实现 # 号后面内容的功能实现。 AngularJS 路由 就通过 # + 标记 帮助我们区分不同的逻辑页面并将不同的页面绑定到对应的控制器上。

二：路由实例及讲解。

<script src="js/angular.min.js"></script>
<script src="js/angular-route.min.js"></script>
       <div ng-app="myapp">
            <ul>
                <li><a href="#/">首页</a></li>
                <li><a href="#/about">关于我们</a></li>
                <li><a href="#/news">新闻动态</a></li>
                <li><a href="#/lianxi">联系方式</a></li>
            </ul>
             
            <div ng-view></div>
        </div>
        <script>
            angular.module(‘myapp‘,[‘ngRoute‘])
            .config([‘$routeProvider‘, function($routeProvider){
                $routeProvider
                .when(‘/‘,{template:‘这是首页页面‘})
                .when(‘/about‘,{template:‘这是关于我们页面‘})
                .when(‘/lianxi‘,{template:‘这是联系方式页面‘})
                .otherwise({redirectTo:‘/‘});
            }]);
        </script>

注意：使用路由要记得引入路由route的js文件。

以下是这个实例的讲解：

1.载入了实现路由的 js 文件：angular-route.js。
2.包含了 ngRoute 模块作为主应用模块的依赖模块。 angular.module(‘myapp‘,[‘ngRoute‘])
3.使用 ngView 指令。<div ng-view></div>  ，该 div 内的 html 内容会根据路由的变化而变化。
4.配置 $routeProvider，用来定义路由规则。
 （1）config 函数用于配置路由规则
（2）$routeProvider.whenAPI来定义我们的路由规则
a.第一个参数是 URL 或者 URL 正则规则
b.第二个参数是路由配置对象。

三：路由设置对象。

路由配置对象的语法规则：

1 $routeProvider.when(url, { 
2     template: string, 
3     templateUrl: string, 
4     controller: string,
5      function 或 array, 
6     controllerAs: string, 
7     redirectTo: string, function, resolve:     object<key, function> 
8 }); 

参数说明：

template:在 ng-view 中插入简单内容，使用该参数
templateUrl:在 ng-view 中插入 HTML 模板文件时，使用该参数
controller: function、string或数组类型，在当前模板上执行的controller函数，生成新的scope
controllerAs:为controller指定别名
redirectTo:重定向的地址。
resolve:指定当前controller所依赖的其他模块。

四:最后写一个使用模板的实例。

 1 <div ng-app="mapp">
 2    <script  type="text/ng-template" id="view/list.html">
 3         <h3>这是列表页</h3>
 4         <ul>
 5         <li ng-repeat="id in mm"><a href="#/list/{{ id }}"> ID{{ id }}</a></li>
 6         </ul>
 7     </script>
 8       <a href=“#/list”>打开列表页</a>
 9      <div ng-view></div>
10 </div>
11 <script src="../js/angular.min.js"></script>
12 <script src="../js/angular-route.min.js"></script>
13 <script>
14    var app=angular.module(‘mapp‘,[‘ngRoute‘]);
15    app.config([‘$routeProvider‘,function($routeProvider){
16        $routeProvider.when("/list",{templateUrl:"view/list.html",controller: ‘listcontroller‘});
17         $routeProvider.otherwise({redirectTo:‘‘});
18        }]);
19    app.controller("listcontroller",function($scope){
20         $scope.mm=[1,2,3,4,5];
21        })
22 </script>