在开讲之前,首先谈谈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();

。。。。。。后续

angular.js中 路由 用法及概念的更多相关文章

  1. Angular JS中 Promise用法

    一.Promise形象讲解A promise不是angular首创的,作为一种编程模式,它出现在1976年,比js还要古老得多.promise全称是 Futures and promises. 而在j ...

  2. angular.js的路由和模板在asp.net mvc 中的使用

    angular.js的路由和模板在asp.net mvc 中的使用 我们知道angular.js是基于mvc 的一款优秀js框架,它也有一套自己的路由机制,和asp.net mvc 路由不太一样.as ...

  3. (网页)Angular.js 中 copy 赋值与 = 赋值 区别

    转自st.gg Angular.js 中 copy 赋值与 = 赋值 区别 为什么用 $scope.user = $scope.master; $scope.master 会跟着 $scope.use ...

  4. Angular.js中处理页面闪烁的方法详解

    Angular.js中处理页面闪烁的方法详解 前言 大家在使用{{}}绑定数据的时候,页面加载会出现满屏尽是{{xxx}}的情况.数据还没响应,但页面已经渲染了.这是因为浏览器和angularjs渲染 ...

  5. 秒味课堂Angular js笔记------Angular js中的工具方法

    Angular js中的工具方法 angular.isArray angular.isDate angular.isDefined angular.isUndefined angular.isFunc ...

  6. angular.js 中同步视图和模型数据双向绑定,$watch $digest $apply 机制

    Angular.js 中的特性,双向绑定. 让视图的改变直接反应到数据中,数据的改变又实时的通知到视图,如何做到的? 这要归功于 scope 下面3个重要的方法: $watch $digest $ap ...

  7. angular.js 中的作用域 数据模型 控制器

    1.angular.js 作为后起之秀的前端mvc框架,他于传统的前端框架都不同,我们再也不需要在html中嵌入脚本来操作对象了.它抽象出了数据模型,控制器及视图. 成功解耦了应用逻辑,数据模型,视图 ...

  8. 在Angular.js中的H5页面调用Web api时跨域问题处理

    /// <summary> /// 被请求时 /// 在Angular.js中的H5页面调用Web api时跨域问题处理 /// </summary> /// <para ...

  9. Angular JS 中的服务注册方法

    在Angular JS中创建服务的几种方法 factory() service() constant() value() provider() factory(name,fn(){}) 该服务为单例的 ...

随机推荐

  1. 基于Kali的一次DDos攻击实践

    镜像下载.域名解析.时间同步请点击 阿里云开源镜像站 一.什么是DDos攻击 DDOS(Distributed Denial of Service),即分布式拒绝服务,是一种针对于网络服务的攻击行为. ...

  2. CF1486X Codeforces Round #703

    C2 Guessing the Greatest (二分+构造) 题目大意:交互题,每次可以询问一个子区间次大值的位置,最多询问20次,问全局最大值的位置.n=1e5 40次的情况大力二分,20次需要 ...

  3. 论文解读(GMI)《Graph Representation Learning via Graphical Mutual Information Maximization》2

    Paper Information 论文作者:Zhen Peng.Wenbing Huang.Minnan Luo.Q. Zheng.Yu Rong.Tingyang Xu.Junzhou Huang ...

  4. uniapp小程序图片前端压缩上传

    目录 1,前言 2,实现代码 1,前言 这次项目中做了一个图片上传,要求是大于2MB的就压缩成2MB一下的再上传,我这边利用了uniapp的文件接口,使用canvas做了一个压缩上传的功能,目前已上线 ...

  5. 渲染一个react?

    分为首次渲染和更新渲染 生命周期, 建立虚拟DOM, 进行diff算法 对比新旧DOM, 节点对比, 将算法复杂度从O(n^3)降低到O(n) key值优化, 避免用index作为key值, 兄弟节点 ...

  6. Oracle数据常用的备份与恢复?

    Oracle的备份与恢复有三种标准的模式,大致分为两大类,备份恢复(物理上的)以及导入导出(逻辑上的),而备份恢复又可以根据数据库的工作模式分为非归档模式(Nonarchivelog-style)和归 ...

  7. Spring支持的事务管理类型?

    Spring支持两种类型的事务管理: 编程式事务管理 :这意味你通过编程的方式管理事务,给你带来极大的灵活性,但是难维护. 声明式事务管理: 这意味着你可以将业务代码和事务管理分离,你只需用注解和XM ...

  8. 为什么 wait, notify 和 notifyAll 这些方法不在 thread 类里面?

    一个很明显的原因是 JAVA 提供的锁是对象级的而不是线程级的,每个对象都有 锁,通过线程获得.由于 wait,notify 和 notifyAll 都是锁级别的操作,所以把他 们定义在 Object ...

  9. java-方法引用

    /** * 方法引用格式: * 双冒号:: 引用运算符,它所在的表达式被称为方法引用.如果Lambda表达式 * 的函数方案已经存在于某个地方的实现中, * ===>那么可以通过双冒号来引用改方 ...

  10. 学习GlusterFS(六)

    一.GlusterFS概述 分布式文件系统由来 在介绍之前我们先来看下文件系统及典型的NFS文件系统. 计算机通过文件系统管理,存储数据的.而现在数据信息时代中人们可获取数据成指数倍的增长,单纯通过增 ...