zoukankan      html  css  js  c++  java
  • angular.js中 路由 用法及概念

      在开讲之前,首先谈谈APP应用。平时我们用的app总是多页面,如果用原生安卓或者苹果,那当然很流畅啦。但是当我们用一般的html页面做移动端,简单时候我们可以用<a href=""></a>这样的标签去链接页面时,速度还是可以的。

      但是当我们的应用越来越多时,切换起来没那么流畅。又是碍于网速,页面加载进来有点慢。但是在angular里面,我们可以用路由进行切换。因为在angular里面,我们用户一般在加载这样的应用时,会整个的缓存在手机上。我们用路由进行切换时,不用再发起HTTP请求了。体验比原来好。

      一般我们的路由结构是这样的。

      

     1     <script>
     2         angular.module('app',[])
     3             .config('$routeProvider',function  ($routeProvider) {
     4                 $routeProvider
     5                     .when('/',{
     6                         templateUrl:'view/home.html',
     7                         controller:'homeCtrl'
     8                         }
     9                         )
    10                     .when('/',{
    11                         templateUrl:'view/home.html',
    12                         controller:'homeCtrl'
    13                         }
    14                         )
    15                     .when('/',{
    16                         templateUrl:'view/home.html',
    17                         controller:'homeCtrl'
    18                         }
    19                         )
    20                     .ontherwise({
    21                         redirective:'/'
    22                     })
    23             })
    24     </script>

    上边代码中,

    config函数是一个配置函数。在使用
    $routeProvider这样的一个服务。
    when:代表当你访问这个“/”根目录的时候 去访问 templateUrl中的那个模板。 controller可想已知,就是我们配套的controller,就是应用于根目录的这个 模板时的controller。
    ontherwise 就是当你路径访问错误时,找不到。最后跳到这个默认的 页面。 

      一般在我们的index.html会有这么的一段代码

    <header>
     <h1>Header</h1>
    </header>
    <div class="content">
     <div ng-view></div>
    </div>
    <footer>
     <h5>Footer</h5>
    </footer>

      <div ng-view></div>   这里面呢。就是我们注入的某个模板(template) 例如:<div ng-view=“tpl/abc.html”></div> 就相当于注入叫做abc.html的模板。ng-view这个指令优先级是1000的终极指令。就是说权限很高。

      在注入这个abc.html的模板的时候。我们一般都用了路由设置,路由相当于一个遥控器。这个ng-view就是一部电视机。如果某个模板同当前的路由相关联:
    1 创建一个新的作用域;(用路由(遥控器)打开某个电视台)
    2 移除上一个视图,同时上一个作用域也会被清除;(换台,什么都没了
    3 将新的作用域同当前模板关联在一起;(电视机播放新的电视台
    4 如果路由中有相关的定义,那么就把对应的控制器同当前作用域关联起来;
    5 触发$viewContentLoaded事件;
    6 如果提供了onload属性,调用该属性所指定的函数。

        $location 服务
    AngularJS提供了一个服务用以解析地址栏中的URL,并让你可以访问应用当前路径所对应
    的路由。它同样提供了修改路径和处理各种形式导航的能力。
      我们一般比较常用的:
     1. path()
      path() 用来获取页面当前的路径:
      $location.path(); // 返回当前路径
      修改当前路径并跳转到应用中的另一个URL:
      $location.path('/'); // 把路径修改为 '/' 路由
      2. replace()
      如果你希望跳转后用户不能点击后退按钮(对于登录之后的跳转这种发生在某个跳转之后的
      再次跳转很有用), AngularJS提供了replace() 方法来实现这个功能:
      $location.path('/home');
      $location.replace();
      // 或者
      $location.path('/home').replace();



    。。。。。。后续

  • 相关阅读:
    别再为了this发愁了------JS中的this机制
    offsetLeft,Left,clientLeft的区别
    下拉菜单的实现classList.add() classList.remove() class属性的添加和删除
    for循环
    html的基本数据类型(数字,字符串, 列表, 字典)
    定时器setInterval, innerText获取文本, charAt()获取单个字符串, substring(1, content.length)获取范围内的字符串, 实现字符串的滚动效果
    定时器 setInterval(‘function()’, 2000)
    parseInt 和 parseFloat 实现字符串转换为数字
    javarscript在HTML中的调用方式 (直接调用 和文件调用)
    input文本框 放上图片img 通过padding relative和absolute 的实现
  • 原文地址:https://www.cnblogs.com/GoodPingGe/p/4364383.html
Copyright © 2011-2022 走看看