angularUI 在不断发展过程中已经被划分成了几个模块,你可以选择你需要的模块载入,我们今天要了解一下路由控制器 ui-router ,它就是angularUI划分出出来的一个独立模块.

此模块只关注状态,在整个用户界面导航中,一个状态对应一个视图,开发者可以根据URL状态来组织控制界面UI渲染.

这里和后端开发有一点点区别需要注意:

后端: 以node.js使用express框架的web开发为例,当我们定位一个路由,对应的会去服务端请求相应资源,服务器端接收请求,解析路由,然后做一系列逻辑处理,最后指定一个视图返回客户端.

url —> 路由  —> 逻辑处理  —> 替换视图 —> 返回客户端 —> 呈现

angular:浏览器定位一个路由,ui-router会触发状态改变,状态改变加载对应的视图,视图通过ng-controller 指令找到对应的controller控制器,然后控制器处理各种业务逻辑,然后根据指令把模型加载绑定到视图,最后在浏览器呈现.

url —> 路由状态改变 —> 加载指定视图 —> 找到controller控制器  —> 处理逻辑  —>  模型根据指令绑定视图  —>  呈现

该模块提供了视图嵌套的功能,同一个页面使用多个视图,让多个视图控制某个视图等复杂web应用.

你可以去github下载指定版本:https://github.com/angular-ui/ui-router

或者也可以通过 bower 来安装前端包,关于 bower 前端包管理器使用回头我们可以单独分享.

zhangzhi@moke:~/code/work/Client/vender$ bower install angular-ui-router —save

它会把新版本下载到你当前所在目录下面.(当前最新版是 0.2.13 )

页面使用的时候直接引用:

<script src="./vender/angular-ui-router-0.2.13.js"></script>

之前介绍了几个常用模块,而今天学习的 ui-router 是我们在整个应用中全局必须用到的.所以我们可以把它注册在 module.config 方法中.

我们在Client 根目录下新建了main.js 文件,用来加载 module.config 方法.

angular.module('YIJIEBUYI', ['ui.router'])
.config(['$locationProvider', '$urlRouterProvider', function($locationProvider, $urlRouterProvider) {
    $urlRouterProvider.otherwise("/blog/index");
}]);

以后我们用到的常用全局模块会陆续放到此函数注册,目前只需要 ui-router 模块.

接着在routes 目录中创建一个路由配置文件 blog.js

angular.module('YIJIEBUYI').config(['$stateProvider','$urlRouterProvider',function($stateProvider,$urlRouterProvider){
$urlRouterProvider
.when('/blog','/blog/index')
.otherwise('/blog/index'); $stateProvider.state('blog',{
    url:'/blog',
    views:{
        'container':{templateUrl:'templates/blog/layout.html'}
    }
}).state('blog.index',{
    url:'/blog/index',
    views:{
        'container':{templaterUrl:'templates/blog/index.html'}
    }
    })
}]);

因为main.js 中我们已经注册 ui-router 模块,所以我们上面配置的路由文件中,注入了 $stateProvider,$urlRouterProvider 2个服务.angular.js 的服务注入机制会根据参数名称自动去已经定义的服务列表里查询并注入.

上面的路由定义中有 $urlRouterProvider,此服务主要是设置默认otherwise 路由.

路由定义全部由 $stateProvider 服务来提供,state 支持多层嵌套,子类继承父类的特性,下一篇我们主要分享一下 stateProvider 内容.

ui-router路由控制器(一)的更多相关文章

  1. angular ui.router 路由传参数

    angular已经用了一段时间了,最近在做路由,做一下笔记. 路由跳转的时候进行穿参 ui.router方式 <a ui-sref="edit({id:5})"> 编辑 ...

  2. Angularjs ui router,路由嵌套 父controller执行问题

    解决方式来源:https://stackoverflow.com/questions/25316591/angularjs-ui-router-state-reload-child-state-onl ...

  3. 【原创】ui.router源码解析

    Angular系列文章之angular路由 路由(route),几乎所有的MVC(VM)框架都应该具有的特性,因为它是前端构建单页面应用(SPA)必不可少的组成部分. 那么,对于angular而言,它 ...

  4. ngRoute 与ui.router区别

    angular路由 路由 (route) ,几乎所有的 MVC(VM) 框架都应该具有的特性,因为它是前端构建单页面应用 (SPA) 必不可少的组成部分. 那么,对于 angular 而言,它自然也有 ...

  5. AngularJS 使用 UI Router 实现表单向导

    Today we will be using AngularJS and the great UI Router and the Angular ngAnimate module to create ...

  6. [转]AngularJS 使用 UI Router 实现表单向导

    本文转自:http://www.oschina.net/translate/angularjs-multi-step-form-using-ui-router 今天我们将使用AngularJs和伟大的 ...

  7. [转]AngularJS+UI Router(1) 多步表单

    本文转自:https://www.zybuluo.com/dreamapplehappy/note/54448 多步表单的实现   在线demo演示地址https://rawgit.com/dream ...

  8. 前端MVC Vue2学习总结(八)——Vue Router路由、Vuex状态管理、Element-UI

    一.Vue Router路由 二.Vuex状态管理 三.Element-UI Element-UI是饿了么前端团队推出的一款基于Vue.js 2.0 的桌面端UI框架,手机端有对应框架是 Mint U ...

  9. ngRoute 和 ui.router 的使用方法和区别

    在单页面应用中要把各个分散的视图给组织起来是通过路由机制来实现的.本文主要对 AngularJS 原生的 ngRoute 路由模块和第三方路由模块 ui.router 的用法进行简单介绍,并做一个对比 ...

随机推荐

  1. Sql server management studio: cannot find one or more components

      Install VS2010 SHELL 独立组件 https://www.microsoft.com/en-US/download/details.aspx?id=1366 运行安装程序,rep ...

  2. 11个实用的CSS学习工具

    1. 盒子模型的幻灯片 通过3D转换效果产生的互动的幻灯片.按向左或向右箭头键切换,全屏观看会有更好的效果. 2. CSS Diner 通过一个简单的小游戏让你学习CSS selector,输入正确的 ...

  3. [android错误] android-support-v*.jar包出现错误。

    可以去你安装的sdk目录中获得.\android_sdks\extras\android\support中获得各个jar包: android-support-v4.jar android-suppor ...

  4. The platform of the target `Pods` (iOS 4.3) is not compatible 错误

    一:使用 cocoaPod错误 The platform of the target `Pods` (iOS 4.3) is not compatible with `AFNetworking (1. ...

  5. JDBC二查询(web基础学习笔记八)

    一.建立数据库 --创建news表空间 CREATE TABLESPACE tbs_news DATAFILE 'F:\ORACLE\news.dbf' SIZE 10M AUTOEXTEND ON; ...

  6. 算法笔记_117:算法集训之结果填空题集一(Java)

     目录 1 空瓶换汽水 2 三人年龄 3 考察团组成 4 微生物增殖 5 除去次方数 6 正六面体染色 7 古堡算式 8 海盗比酒量 9 奇怪的比赛 10 土地测量   1 空瓶换汽水 浪费可耻,节约 ...

  7. ora-4031错误

    SQL语句共享的不好,即没有使用绑定变量 来一个SQL语句,在Shared Pool中分配一块内存……再来一个,再分配... 最后共享内存分配完了,有可能都在5k-8K 之间,如果突然又来一个SQL语 ...

  8. Eclipse 如何导入web项目

      Eclipse 如何导入web项目 CreateTime--2018年3月8日09:07:16 Author:Marydon 方法一:推荐使用 1.将web项目手动拷贝到Eclipse的工作空间下 ...

  9. spring mvc 图片上传,图片压缩、跨域解决、 按天生成文件夹 ,删除,限制为图片代码等相关配置

    spring mvc 图片上传,跨域解决 按天生成文件夹 ,删除,限制为图片代码,等相关配置 fs.root=data/ #fs.root=/home/dev/fs/ #fs.root=D:/fs/ ...

  10. Python之对象的属性

    # -*- coding: utf-8 -*- #python 27 #xiaodeng #Python之对象的属性 #http://python.jobbole.com/82622/ #对象的属性 ...