2014-01-02 W.Y.
Angular-Ui 对于 AngularJS 开发者来说是一个非常重要的工具,其中 UI-Router 又是重中之重。UI-Router 插件提供了“嵌套作用域等规则”等有用的特性,对于复杂项目开发非常实用,最近在项目中开始使用 UI-Router ,于是决定好好把它学习一遍,这些文章都来源于 UI-Router 的 github,由于能力有限,有些地方没有看懂,另外还有一些地方只能意译出来,希望大家在参观的过程中指出其中的错误。 学习 ui-router - 管理状态 学习 ui-router - 状态嵌套和视图嵌套 学习 ui-router - 多个命名的视图 学习 ui-router - 路由控制 学习 ui-router 继续阅读 »
2016-08-03 曹强
Angular-Ui 对于 AngularJS 开发者来说是一个非常重要的工具,其中 UI-Router 又是重中之重。UI-Router 插件提供了“嵌套作用域等规则”等有用的特性,对于复杂项目开发非常实用,最近在项目中开始使用 UI-Router ,于是决定好好把它学习一遍,这些文章都来源于 UI-Router 的 github,下面是这次学习内容 学习 ui-router - 管理状态 学习 ui-router - 状态嵌套和视图嵌套 学习 ui-router - 多个命名的视图 学习 ui-router - 路由控制 学习 ui-router - 组件 more 继续阅读 »
2014-01-01 W.Y.
参考原文: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 继续阅读 »
2014-01-02 W.Y.
参考原文: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 继续阅读 »
2014-01-01 W.Y.
参考原文: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 继续阅读 »
2014-01-01 W.Y.
参考原文: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 继续阅读 »
2014-01-02 W.Y.
参考原文:https://github.com/angular-ui/ui-router/wiki/The-Components $state / $stateProvider:管理状态定义、当前状态和状态转换。包含触发状态转换的事件和回调函数,异步解决目标状态的任何依赖项,更新$location到当前状态。由于状态包含关联的 url,通过$urlRouterProvider生成一个路由规则来执行转换的状态。 ui-view指示器:渲染状态中定义的视图,是状态中定义的视图的一个占位符。 $urlRouter / $urlRouterProvider:管理了一套路由规则列表来处理当$location发生变化时如何跳转。最低级的方 继续阅读 »
2016-08-03 曹强
参考原文: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 继续阅读 »
2016-08-05 曹强
参考原文: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 继续阅读 »
2016-08-04 曹强
参考原文: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 继续阅读 »