By 被删

更新日期:

文章目录
  1. 1. ngRoute
    1. 1.1. ngRoute包括的内容
    2. 1.2. $routeProvider
    3. 1.3. $route
    4. 1.4. $routeParams
    5. 1.5. $location
    6. 1.6. 参考
  2. 2. Controller间通信
    1. 2.1. angular控制器通信的方式
    2. 2.2. 利用作用域的继承方式
    3. 2.3. 基于事件的方式
    4. 2.4. angular服务的方式
    5. 2.5. 参考
  3. 3. 结束语

最近的一个项目使用AngularJS(v1.2.6)作为前端的框架，《Angular使用笔记》系列用于记录过程中的一些使用和解决方法。
本文记录使用有关路由以及控制器间通信的过程。

ngRoute

前面篇章我们已经讲述过路由的简单使用方法，这里我们将对路由传参等进行更详细的介绍。

ngRoute包括的内容

ng的路由机制是靠ngRoute提供的，通过hash和history两种方式实现了路由，可以检测浏览器是否支持history来灵活调用相应的方式。

  • 服务$routeProvider用来定义一个路由表，即地址栏与视图模板的映射
  • 服务$routeParams保存了地址栏中的参数，例如{id : 1, name : ‘tom’}
  • 服务$route完成路由匹配，并且提供路由相关的属性访问及事件，如访问当前路由对应的controller
  • 指令ngView用来在主视图中指定加载子视图的区域
    ng-view的实现原理，是根据路由的切换，动态编译html模板——$compile(html)(scope)

以上内容再加上$location服务，则可实现一个单页面应用。

$routeProvider

$routeProvider服务提供两种方法：

  • when()：配置路径和参数
    • when的第二个参数
      • controller： 对应路径的控制器函数，或者名称
      • controllerAs： 给控制器起个别名
      • template： 对应路径的页面模板，会出现在ng-view处
      • templateUrl： 对应模板的路径
      • resolve： 该属性会以键值对对象的形式，给路由相关的控制器绑定服务或者值。然后把执行的结果值或者对应的服务引用，注入到控制器中。如果resolve中是一个promise对象，那么会等它执行成功后，才注入到控制器中，此时控制器会等待resolve中的执行结果
      • redirectTo：重定向地址
      • reloadOnSearch：设置是否在只有地址改变时，才加载对应的模板;search和params改变都不会加载模板
      • caseInsensitiveMatch ：路径区分大小写
1
2
3
4
5
6
7
8
resolve: {
  //设置三秒的延迟Promise，该页面在3秒后才会加载成功
  delay: function($q, $timeout) {
    var delay = $q.defer();
    $timeout(delay.resolve, 3000);
    return delay.promise;
  }
}
  • otherwise：配置其他的路径跳转，即default

$route

  • $route.reload()方法可以实现刷新路由
  • $route服务提供了current和routes属性
  • $route服务提供以下几个事件：
    使用$on来调用事件
    • $routeChangeStart 路由发生变化时被触发
    • $routeChangesSuccess 路由成功时被触发
    • $routeChangeError 路由异常时被触发
    • $routeUpdate 路由更新时被触发

$routeParams

$routeParams服务可获取路由中的参数，当路由成功后才能获取。

1
2
3
4
5
6
.when('/example/:id',{}) //设置路由参数id
//控制器中获取参数
app.controller('ExampleController', ['$routeParams', function($routeParams){
    var id = $routeParams.id;
    //使用id获取相关id值
}]);

  • $routeParams和$route.current.params

    $route.current.params在路由发生变化时会改变
    $routeParams只有当路由成功时才会改变
    这里有个很好的例子

$location

$location服务解析地址栏中的URL（基于window.location），可在应用代码中获取到。

  • 暴露当前地址栏的URL，可获取并监听或改变URL
  • 当出现以下情况时同步URL
    • 改变地址栏
    • 点击了后退按钮（或者点击了历史链接）
    • 点击了一个链接
  • 可用（protocol, host, port, path, search, hash）获取URL对象的具体内容

参考

Controller间通信

angular控制器通信的方式

  • 1.利用作用域继承的方式
    即子控制器继承父控制器中的内容。
  • 2.基于事件的方式
    即$on,$emit,$boardcast这三种方式。
  • 3.服务方式
    写一个服务的单例然后通过注入来使用。

利用作用域的继承方式

作用域的继承是基于javascript的原型继承方式。

  • 当作用域上面的值为基本类型的时候，修改父作用域上面的值会影响到子作用域，修改子作用域只会影响子作用域的值，不会影响父作用域上面的值
  • 作用域上的值为对象（引用类型），任何一方的修改都能影响另一方

基于事件的方式

Angularjs为在scope中为我们提供了冒泡和隧道机制。

  • $broadcast会把事件广播给所有子级以下的作用域
  • $emit则会将事件冒泡传递给父级以上的作用域
  • $on则是angularjs的事件注册函数，表示事件监听

    兄弟控制间进行通信：
    兄弟控制中向父作用域触发一个事件，然后在父作用域中监听事件，再广播给子作用域。

angular服务的方式

angular服务中生成一个对象，该对象就可以利用依赖注入的方式在所有的控制器中共享。

参考

《AngularJS控制器controller如何通信？》

结束语

路由参数的传递以及控制器直接的通信，配合使用能获得更多的功能呢。

码生艰难，写文不易，给我家猪囤点猫粮了喵~

B站: 被删

查看Github有更多内容噢：https://github.com/godbasin
更欢迎来被删的前端游乐场边撸猫边学前端噢

如果你想要关注日常生活中的我，欢迎关注“牧羊的猪”公众号噢

作者：被删

出处：https://godbasin.github.io

本文版权归作者所有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，否则保留追究法律责任的权利。

文章目录
  1. 1. ngRoute
    1. 1.1. ngRoute包括的内容
    2. 1.2. $routeProvider
    3. 1.3. $route
    4. 1.4. $routeParams
    5. 1.5. $location
    6. 1.6. 参考
  2. 2. Controller间通信
    1. 2.1. angular控制器通信的方式
    2. 2.2. 利用作用域的继承方式
    3. 2.3. 基于事件的方式
    4. 2.4. angular服务的方式
    5. 2.5. 参考
  3. 3. 结束语