Angular-Ui 对于 AngularJS 开发者来说是一个非常重要的工具,其中 UI-Router 又是重中之重。UI-Router 插件提供了“嵌套作用域等规则”等有用的特性,对于复杂项目开发非常实用,最近在项目中开始使用 UI-Router ,于是决定好好把它学习一遍,这些文章都来源于 UI-Router 的 github,由于能力有限,有些地方没有看懂,另外还有一些地方只能意译出来,希望大家在参观的过程中指出其中的错误。
学习 ui-router - 管理状态
学习 ui-router - 状态嵌套和视图嵌套
学习 ui-router - 多个命名的视图
学习 ui-router - 路由控制
学习 ui-router
继续阅读 »
Angular-Ui 对于 AngularJS 开发者来说是一个非常重要的工具,其中 UI-Router 又是重中之重。UI-Router 插件提供了“嵌套作用域等规则”等有用的特性,对于复杂项目开发非常实用,最近在项目中开始使用 UI-Router ,于是决定好好把它学习一遍,这些文章都来源于 UI-Router 的 github,下面是这次学习内容
学习 ui-router - 管理状态
学习 ui-router - 状态嵌套和视图嵌套
学习 ui-router - 多个命名的视图
学习 ui-router - 路由控制
学习 ui-router - 组件
more
继续阅读 »
参考原文:https://github.com/angular-ui/ui-router/wiki
ui-router 的工作原理非常类似于 Angular 的路由控制器,但它只关注状态。
在应用程序的整个用户界面和导航中,一个状态对应于一个页面位置
通过定义controller、template和view等属性,来定义指定位置的用户界面和界面行为
通过嵌套的方式来解决页面中的一些重复出现的部位
最简单的形式
模板可以通过下面这种最简单的方式来指定
html
in index.html
javascript
// in app-states.js (or whatever you want to nam
继续阅读 »
参考原文:https://github.com/angular-ui/ui-router/wiki/URL-Routing
在你的应用中大多数状态都有与其相关联的 url,路由控制不是设计完成 state 之后的事后想法,而是开始开发时就应该考虑的问题。
这里是如何设置一个基本url。
javascript
$stateProvider
.state('contacts', {
url: "/contacts",
templateUrl: 'contacts.html'
})
当我们访问index.html/contacts时, 'contacts'状态将被激活,同时inde
继续阅读 »
参考原文:https://github.com/angular-ui/ui-router/wiki/Multiple-Named-Views
可以给ui-view指定名称,这样一个模板中就可以有多个ui-view。假设您有一个应用,需要动态填充graph、table data和filters,像下面这样:
当您需要使用多视图时,需要用到状态的views属性,views属性值是一个对象。
more
设置views属性将覆盖覆盖的template属性 ##
如果在状态中定义了views属性,那么状态中的templateUrl、template 和 templateProvider属性将被忽略。
示例 - 名称匹配
vie
继续阅读 »
参考原文:https://github.com/angular-ui/ui-router/wiki/Nested-States-%26-Nested-Views
状态嵌套的方法
状态可以相互嵌套。有三个嵌套的方法:
1. 使用“点标记法”,例如:.state('contacts.list', {})
2. 使用parent属性,指定一个父状态的名称字符串,例如:parent: 'contacts'
3. 使用parent属性,指定一个父状态对象,例如:parent: contacts(contacts 是一个状态对象)
more
点标记法
在$stateProvider中可以使用点语法来表示层次结构,下面,contacts
继续阅读 »
参考原文:https://github.com/angular-ui/ui-router/wiki/The-Components
$state / $stateProvider:管理状态定义、当前状态和状态转换。包含触发状态转换的事件和回调函数,异步解决目标状态的任何依赖项,更新$location到当前状态。由于状态包含关联的 url,通过$urlRouterProvider生成一个路由规则来执行转换的状态。
ui-view指示器:渲染状态中定义的视图,是状态中定义的视图的一个占位符。
$urlRouter / $urlRouterProvider:管理了一套路由规则列表来处理当$location发生变化时如何跳转。最低级的方
继续阅读 »
参考原文:https://github.com/angular-ui/ui-router/wiki
ui-router 的工作原理非常类似于 Angular 的路由控制器,但它只关注状态。
在应用程序的整个用户界面和导航中,一个状态对应于一个页面位置
通过定义controller、template和view等属性,来定义指定位置的用户界面和界面行为
通过嵌套的方式来解决页面中的一些重复出现的部位
最简单的形式
模板可以通过下面这种最简单的方式来指定
html
in index.html
javascript
// in app-states.js (or whatever you want to nam
继续阅读 »
参考原文:https://github.com/angular-ui/ui-router/wiki/Multiple-Named-Views
可以给ui-view指定名称,这样一个模板中就可以有多个ui-view。假设您有一个应用,需要动态填充graph、table data和filters,像下面这样:
当您需要使用多视图时,需要用到状态的views属性,views属性值是一个对象。
more
设置views属性将覆盖覆盖的template属性 ##
如果在状态中定义了views属性,那么状态中的templateUrl、template 和 templateProvider属性将被忽略。
示例 - 名称匹配
vie
继续阅读 »
参考原文:https://github.com/angular-ui/ui-router/wiki/Nested-States-%26-Nested-Views
状态嵌套的方法
状态可以相互嵌套。有三个嵌套的方法:
1. 使用“点标记法”,例如:.state('contacts.list', {})
2. 使用parent属性,指定一个父状态的名称字符串,例如:parent: 'contacts'
3. 使用parent属性,指定一个父状态对象,例如:parent: contacts(contacts 是一个状态对象)
more
点标记法
在$stateProvider中可以使用点语法来表示层次结构,下面,contacts
继续阅读 »