angularjs 布局模板和路由

发表于   |   分类于   |  

将视图（页面）分解成布局和模板视图，再根据当前URL展示对应视图

布局模板

1
2
3
< header>< h1>Header</h1></header>
< div class="content" >
   < div ng-view>< /div>< /div >

ng-view 由ngRoute模块提供的一个特殊指令, 在HTML中给$route对应的视图内容占位。优先级1000

  • 每次触发$routeChangeSuccess事件, 视图会更新
  • 如果某个模板同当前的路由关联
    • 创建新作用域
    • 移除上一视图和作用域
    • 将新作用域与当前模板关联
    • 如果路由中控制器定义，则与当前作用域关联
    • 触发$viewContentLoaded
    • 如果提供onload属性,调用所指定的函数

路由

  • 使用$routeProvider的when和otherwise
1
2
3
4
5
6
angular.module('myApp', []).config(function($routeProvider) {
   $routeProvider
       .when('/',{
          //  controller、template、templateURL、resolve、redirectTo、reloadOnSearch和css
       })
   }）

controller 字符串或函数

template html模板,templateURL模板链接

resolve 将resolve对象里的值注入到控制器中

redirectTo 路由替换，字符串或者函数，在调用函数时会传入：从当前路径中提取的路由参数，当前路径，当前URL中的查询串

reloadOnSearch true时， $location.search()变化时会重新加载路由

路由模式

  • 标签模式

$location服务

类window.location,能修改路径和内部跳转，不能刷新整个页面

  • $location.path() 获取或修改路径，并且与HTML5的历史api交互，提供用户后退的功能,加replace()，就不能后退
  • absUrl() 获取编码后完整的URL
  • hash() 获取URL中的hash片段
  • host() 获取URL中的主机，port()端口号，
  • protocol() 获取URL中的协议
  • search() 获取URL中的查询串，也可以用对象、字符串设置查询
  • url() 获取或修改当前的URL