专栏首页代码人生AngularJS系列(十一)——路由和复制

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

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。

本文链接:https://blog.csdn.net/luo4105/article/details/77897335

路由

路由允许我们通过不同的 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,那么会报错。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 你所了解的array_diff_uassoc 真的是你了解的那样吗?

    如果让你用一句话描述 PHP 函数 array_diff_uassoc,也许你开口就来了,就是同事比较两个或多个函数,并返回在第一个函数出现且没有在其他函数出现...

    写PHP的老王
  • PHP代码审计 | 记一次CMS代码审计

    访问url: http://127.0.0.1/uqcms/index.php/admin/ad/save

    HACK学习
  • [系列] - go-gin-api 路由中间件 - 签名验证(七)

    上篇文章分享了,路由中间件 - Jaeger 链路追踪(实战篇),文章反响真是出乎意料, 「Go中国」 公众号也转发了,有很多朋友加我好友交流,直呼我大神,其实...

    新亮
  • 【译】现代化的PHP开发--异常Exception

    自PHP 5发布以来,异常(Exception)已作为面向对象的编程语言功能添加到PHP。根据定义,异常是程序执行期间的异常事件。在PHP中,Exception...

    Lemon黄
  • React-Hook实现数据获取管理和滚动获取

    本来是想要暴露出的handlerSetUrl 通过改变url进行下一页的获取,但是老是出现错误。

    我已经洗完澡了
  • woocommerce面包屑导航breadcrumb的修改

      我们知道woocommerce自带了面包屑导航breadcrumb,但有时我们需要调整一下它所在的位置,那么需要如何操作呢?有哪些参数可以调用呢?随ytka...

    ytkah
  • [视频教程] 配置vscode的PHP自动补全提示与使用Xdebug进行远程调试debug

    默认下载安装完的vscode并不能准确提示和检测PHP的语法错误,需要手动指定一下本机的PHP程序路径。按下面的操作配置完后就能在文件保存的时候检测语法有无错误...

    陶士涵
  • 【Python】通过Requests模块收发HTTP报文

    这两天学习了用python的requests模块发送HTTP报文,然后以CTF题为例进行脚本练习。

    一名白帽的成长史
  • 【译】现代化的PHP开发--迭代器Iterator

    来源:https://www.startutorial.com/articles/view/modern-php-developer-iterator

    Lemon黄
  • Python3中正则表达式使用方法

    崔庆才,Python技术控,爬虫博文访问量已过百万。喜欢钻研,热爱生活,乐于分享。

    生信宝典

扫码关注云+社区

领取腾讯云代金券