相关链接
作用域
angular 中作用域的概念是一个亮点，由不同的指令、controller等作用域组成的作用域树就是一个app。简单理解一个controller的作用域就是一个$scope，在此controller下的所有指令的操作都是在此作用域下，ng-click，ng-show/hide/if 等指令的表达式计算就是在此作用域下进行的。作用域的层级结构使其具有了继承的特性，形成了作用域链，子作用域可以访问父作用域中的内容。
双向绑定原理
angular的双向数据绑定是其核心功能。angular 通过监控能事件改变进行绑定；DOM事件(input改变，点击等)，XHR的响应触发回调；浏览器地址变化，计时器触发回调等；如果以上情况没有发生，MV改变的可能性不大;当发生了能引起view或model改变的事件时angular就会从根作用域执行脏循环$digest检查，判断是否有需要改变的地方。脏循环会不止一次的执行，以便将所有的model改变集中在一起去改变view，为的是提高性能。
服务
所谓服务就是一些可以共用的方法、常量等，注册之后可以在需要使用的地方通过名称进行依赖注入.在运行之前可以通过module进行注册服务
apm = angular.module('apm', ['ngExtend', 'ui.router', 'highcharts-ng']);
//常量 基本页面路径
apm.constant('BASE_PATH', '/asset/views/')
.constant('SUB_ROUTES', 'subroutes/');
在运行阶段可以通过$provide进行注册，$provide只能在配置阶段注入,所以要在配置阶段保存其引用
apm.config(function ($stateProvider, BASE_PATH, SUB_ROUTES, $controllerProvider, $filterProvider, $requireProvider, $urlRouterProvider, $provide) {
apm.register = {
controller: $controllerProvider.register,
filter: $filterProvider.register,
factory: $provide.factory
};
//具体使用
apm.register.factory('overview_queryTransactions', function (MyChart, $myhttp, CHART_CONSTANT, $rootScope)
注册服务的方法比较
| 对象种类 | 可以在配置阶段注入 | 可以在运行阶段注入 | |
| constant | 常量值 | Y | Y |
| value | 变量值 | N | Y |
| service | 构造函数创建新对象 | N | Y |
| factory | 工厂函数返回新对象 | N | Y |
| provider | $get工厂函数返回新对象 | Y | N |
依赖注入
angular会将依赖的所有模块上的所有服务混入应用级别的单一命名空间内。所以，模块间可以相互依赖，不同模块间的服务可以相互依赖。这有一个问题就是会存在冲突的可能性。在需要使用的地方根据名称注入。对应的每个名字只存在唯一的服务。我们利用这点可以在依赖某模块的同时去覆盖此模块提供的服务。
注入服务
var c = $injector.get(cfg.chartId, cfg.header);
事件传播机制
angular的事件传播机制类似DOM中的冒泡与捕获的情形。在子级可以通过$scope.$emit 进行事件冒泡,父级可以收到此事件，父级通过$scope.$broadcast进行广播，所有子级可以收到此事件.
//监听事件
$rootScope.$on(EVENT.MODULE.emit, function (event, data) {
$rootScope.$broadcast(EVENT.MODULE.broadcast, data);
});
//触发事件
$scope.$emit(EVENT.CHANGE_CONDITION.emit, null);
路由
angular用于开发单页面应用，路由是必不可少的。angular自带路由模块，比较简单的路由需求是可以满足了。存在一些局限。不支持嵌套路由，一个路由只能对应页面中一个区域。当你遇到这些问题的时候，已经有人帮你解决了，ui-router，目前还没遇到过他不支持的功能；
$urlRouterProvider.when(/^/?$/, '/app/application/application/application');
$stateProvider
//固定路径配置示例
//.state('accountsettings', {//账号设置
// url: '/accountsettings',
// templateUrl: BASE_PATH + 'account_settings.html',
// resolve: {
// require: $requireProvider.require('account_settings'),
// }
//})
//默认规则配置
.state('def', {
url: '{url:[^@]*}',//'/{one_code:\w+}/{two_code:\w+}/{three_code:\w+}/{url:[^@]*}',
templateUrl: function ($stateParams) {
var menu = apm.parseURL($stateParams.url), url = BASE_PATH + menu.path;
return addSuffix(url);
},
resolve: {
require: function ($q, $stateParams) {
return resolve($q, $stateParams.url, [getDeps($stateParams.url)]);
}
}
})
//子路由
.state('def.child', {
url: '@/{path:[^/]+}{a1:/?}{p1:[^/]*}{a2:/?}{p2:[^/]*}{a3:/?}{p3:[^/]*}{a4:/?}{p4:[^/]*}{a5:/?}{p5:[^/]*}',
templateUrl: function ($stateParams) {
var url = BASE_PATH + SUB_ROUTES + $stateParams.path;
return addSuffix(url);
},
resolve: {
require: function ($q, $stateParams) {
return resolve($q, $stateParams.path, [SUB_ROUTES + $stateParams.path.split(/[.?]/)[0]]);
}
}
});
})
ui-router 跳转带参数的url api
.state('/search', { //搜索
url: '/search?query',
。。。
$state.go('/search',{query:$scope.searchfield});
异步加载
angular开发单页面应用的时候不可能一次将所有资源全部加载，通常会整合requirejs；
//配置路由
$stateProvider.state('index', { //首页
url: '/index',
templateUrl: '/index',
resolve: {
require: $requireProvider.require('index')
}
})
angular.module('ngExtend', ['ng', 'ngCookies']).
provider('$require', function rq() {
/**
* 异步加载配置
* @param deps 如果是单个依赖可以直接写名字,多个依赖使用数组,路径根据require配置
* @returns {*}
*/
this.require = function (deps) {
if (angular.isString(deps)) {
deps = [deps];
}
return ['$rootScope', '$q', function ($rootScope, $q) {
var def = $q.defer();
require(deps, function () {
$rootScope.$apply(function () {
def.resolve();
});
});
return def.promise;
}];
};
this.$get = function () {
return this;
};
}).
需要手动启动angular
angular.element(document).ready(function () {
//阻止 # 导航
$(document).delegate('a', 'click', function (event) {
var href = $(this).attr('href');
if (href === '#') {
event.preventDefault();
}
});
angular.bootstrap(document, ['apm']);
});
controller之间相互通信
- 通过上面的事件传播机制
- 父作用域数据共享
- url参数传递
推荐事件传播以及url传递，url传递参数可以刷新
Form验证
<input type="email" class="form-control" placeholder="" ng-model="condition.email"
name="email"
ng-required="requiredEmail"
ng-class="{'border-red':editform.email.$invalid}" ng-if="isEdit" disabled>
更改插值表达式
myMod.config(function($interpolateProvider){
$interpolateProvider.startSymbol(‘[[’)；
$interpolateProvider.endSymbol(‘]]’)；
})
表达式
// 取值 var modelGetter = $parse($ipt.attr('ng-model'));
// 设值 var modelSetter = modelGetter.assign;
//执行 $scope.$eval
动态编译指令
element.append($compile(html.join(' '))(scope));
测试
测试环境 karma+jasmine 依赖node.js