参考资料:
Scopes
angularjs1.3.0源码解析之scope
继续阅读 »
元旦放假一天,由于太宅,于是有了新年第一个产出。主题来源于这一周在项目中使用 AngularJS 所遇到的问题,在此做一个使用笔记,以加深对 AngularJS 的理解。本人文笔不行,如文章被有幸浏览到,还请各位童鞋多多提意见。
AugularJS 简单介绍
AngularJS 由 Google 倾力打造的前端 JavaScript 工具。这里只说它是“工具”,没说它是完整的“框架”,是因为它并不是定位于去完成一套框架要做的事。更重要的,是它给我们提供了一种新的应用组织与开发方式。与其他许多模版系统最大的不同在于,他直接扩展了现有的 HTML 架构,透过声明式语言 (Directives Syntax)直接赋予 HTML 新的功
继续阅读 »
1. setupModuleLoader
该方法主要用于设置模块加载器,源码比较长,并且使用了多层闭包。首先在该方法中,定义了一个非常有用的方法ensure,代码如下:
javascript
function ensure(obj, name, factory) {
return obj[name] || (obj[name] = factory());
}
继续阅读 »
AngularJS中在处理controller时提供了两种语法。
* 第一种是,在DOM中使用ng-controller="TestController",这样在定义controller时需要将model绑定到$scope上。
* 另一种是,在DOM中使用ng-controller="TestController as test",这样其实是将model直接绑定到controller的实例上。
在AngularJS的官方Get Started以及各种文档中,多推荐第一种方式,导致很多人可能都不知道原来还有第二种方式,我也是最近看一篇文章时才注意到这个。那么这两种方式各有什么优劣势呢?在现实的开发中到底更推荐哪种方式呢?今天就来探究
继续阅读 »
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/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发生变化时如何跳转。最低级的方
继续阅读 »