AngularJS系列(十一)——路由和复制

路由

路由允许我们通过不同的 URL 访问不同的内容。我觉得听夸张，以前这都是后台的控制器来处理的，如servlet，springMVC这类。

通过 AngularJS 可以实现多视图的单页Web应用（single page web application，SPA）。

<body ng-app='routingDemoApp'>
<h2>AngularJS 路由应用</h2>
<ul>
                   <li><ahref="#/">首页</a></li>
                   <li><ahref="#/computers">电脑</a></li>
                   <li><ahref="#/printers">打印机</a></li>
                   <li><ahref="#/others">其他</a></li>
</ul>
<div ng-view></div>
<scriptsrc="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
<scriptsrc="https://apps.bdimg.com/libs/angular-route/1.3.13/angular-route.js"></script>
<script>
   angular.module("routingDemoApp", ['ngRoute'])
                   .config(['$routeProvider',function ($routeProvider) {
                            $routeProvider
                            .when('/',{template : '这是首页页面'})
                            .when('/computers',{template : '这是电脑页面'})
                            .when('/printers',{template : '这是打印机页面'})
                            .otherwise({'redirectTo':'/'})
                   }])
</script>
</body>

通常我们的URL形式为 http://runoob.com/first/page，但在单页Web应用中 AngularJS通过 # + 标记实现，例如：

http://runoob.com/#/first

http://runoob.com/#/second

http://runoob.com/#/third

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

实例解析：

1、载入了实现路由的 js 文件：angular-route.js。

2、包含了 ngRoute 模块作为主应用模块的依赖模块。

angular.module('routingDemoApp',['ngRoute'])

3、使用 ngView 指令。

<div ng-view></div>

该 div 内的 HTML 内容会根据路由的变化而变化。

4、配置 $routeProvider，AngularJS$routeProvider 用来定义路由规则。

module.config(['$routeProvider',function($routeProvider){
   $routeProvider
       .when('/',{template:'这是首页页面'})
       .when('/computers',{template:'这是电脑分类页面'})
       .when('/printers',{template:'这是打印机页面'})
       .otherwise({redirectTo:'/'});
}]);

实例

<body ng-app='routingDemoApp'>
         <h2>AngularJS路由应用</h2>
         <ul>
                   <li><ahref="#/">首页</a></li>
                   <li><ahref="#/computers">电脑</a></li>
                   <li><ahref="#/printers">打印机</a></li>
                   <li><ahref="#/others">其他</a></li>
         </ul>
         <divng-view></div>
         <scriptsrc="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
         <scriptsrc="https://apps.bdimg.com/libs/angular-route/1.3.13/angular-route.js"></script>
         <script>
                   angular.module('routingDemoApp',['ngRoute'])
                   .config(['$routeProvider',function($routeProvider){
                            $routeProvider
                            .when('/',{template : '这是首页页面'})
                            .when('/computers',{template : '这是电脑页面'})
                            .when('/printers',{template : '这是打印机页面'})
                            .otherwise({'redirectTo':'/'})
                   }])
         </script>
</body>

使用ui-router

<body ng-app='routingDemoApp'>
         <h2>AngularJS路由应用</h2>
         <ul>
                   <li><ahref="#/">首页</a></li>
                   <li><ahref="#/computers">电脑</a></li>
                   <li><ahref="#/printers">打印机</a></li>
                   <li><ahref="#/others">其他</a></li>
         </ul>
         <divui-view="left"></div>
         <divui-view="right"></div>
         <scriptsrc="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
         <scriptsrc="https://apps.bdimg.com/libs/angular-route/1.3.13/angular-route.js"></script>
         <scriptsrc="https://cdn.bootcss.com/angular-ui-router/1.0.0-rc.1/angular-ui-router.min.js"></script>
         <script>
                   varmainApp = angular.module("routingDemoApp", ["ui.router"]);
                   mainApp.config(function($stateProvider, $urlRouterProvider) {
                            $stateProvider
                            .state("home",{
                                     url: "/",
                                     views: {
                                               left: {
                                                        template: "这是首页页面"
                                               },
                                               right: {
                                                        template: "这是右侧页面"
                                               }
                                     }
                            })
                            .state("computers",{
                                     url: "/computers",
                                     templateUrl: "computers.html"
                            })
                            .state("printers",{
                                     url: "/printers",
                                     templateUrl: "printers.html"
                            })
                            .state("others",{
                                     url: "/others",
                                     templateUrl: "others.jsp"
                            });
                            $urlRouterProvider.otherwise("others");
                   })
         </script>
</body>

全局方法

复制

angular.copy(source,destination)

注意

如果只有一个参数（没有指定拷贝的对象），则返回一个拷贝对象

如果指定了destination,则会深拷贝对象复制给destination

如果source是null或者undefined，那么会直接返回source

如果source就是desitination，那么会报错。

AngularJS系列(十一)——路由和复制

路由

全局方法

复制

猜你喜欢