版本:
Angular2以后官方的称呼就叫Angular,不是Angular2,也不是Angular4,而1.x版本的老版本,叫AngularJS。
学习AngularJS 1.x:
https://hairui219.gitbooks.io/learning_angular/content/zh/chapter05_1.html
ng-app指令
一个AngularJS web应用中只能出现一个ng-app指令,它相当于main方法。
有两种写法,ng-app或者ng-app=”自定义的模块”,ng-app有一个默认的模块,ng-app=“自定义的模块” 是一个使用了自定义的模块,该自定义的模块继承了那个初始的默认的模块,可以调用初始的默认的模块的方法。
HTML5规范要求所有的用户自定义属性以”data-“开头,所以data-ng-app是符合HTML5规范的写法,用HTML Validator检查代码的时候,ng-app会报错,而data-ng-app不会。
控制器——controller
控制器——controller 是一种封装,是AngularJS设计模式的一种定义。
可以通过ng-controller指令来隐式为模板创建一个控制器,也可以通过$controller服务来创建一个控制器。
控制器的用于增强作用域,包括设置好作用域对象的初始状态,以及给作用域对象增加行为。
控制器通过AngularJS的另一个设计模式——依赖注入 来使用更多服务。比如$scope。可以将$scope理解为 页面与数据的高速通道、桥梁、连接、粘合剂,也就是控制器中定义的所有东西,想要反应到页面上,就必须通过$scope。
使用ng-init向controller中传递参数
使用ng-init向controller中传递参数,不能立即获取到,是因为 “the controller is being created before the variable is added to the $scope object”
<div ng-include="'modules/units/views/view.html" ng-controller="UnitsViewCtrl" ng-init="unitId = '123'"> </div>
$scope.setUnitId=function(unitId) { $stateParams.id=unitId; getData(); }
<div ng-include="'modules/units/views/view.html'" ng-controller="UnitsViewCtrl" ng-init="setUnitId('123')"> </div>
可以使用$watch,或者在ng-init中调用函数
http://corpus.hubwiz.com/2/angularjs/18608161.html
ng-template寄宿方式
<script type="text/ng-template" id="/tpl.html"> Content of the template. </script>
angular.js 中 父级和 子集 controller 之间的通讯
http://yijiebuyi.com/blog/62f8daffb5c629e85de91ca0b3942985.html
AngularJs中的directive(一)
https://segmentfault.com/a/1190000007018923
$watch监听属性变动
$watch是一个scope函数,用于监听模型变化,当模型部分发生变化时通知。$watch函数会返回一个注销监听的函数。
示例:
$scope.multiModel = []; var destroyWatch = $scope.$watch('multiModel.length', function () { //如果不再需要监听,则注销。 destroyWatch(); })
angularjs-dropdown-multiselect
http://ngmodules.org/modules/angularjs-dropdown-multiselect
<script src="https://cdn.bootcss.com/angularjs-dropdown-multiselect/1.11.8/angularjs-dropdown-multiselect.min.js"></script>
angular.module('hxyclient', [ 'angularjs-dropdown-multiselect' ])..... $scope.multiModel = []; $scope.multiModelOptions = [{id: 1, label: "text1"}];
<div ng-dropdown-multiselect="" style="float:left;" extra-settings="{ scrollableHeight: '500px', scrollable: true }" options="multiModelOptions" translation-texts="{buttonDefaultText:'选择属性',dynamicButtonTextSuffix:'选择属性',checkAll:'全选',uncheckAll:'重置'}" selected-model="multiModel" checkboxes="true"> </div>
ng-if中的ng-model值无效的问题
与其他指令一样,ng-if指令也会创建一个子级作用域,在ng-if中每个包含的元素都拥有自己的作用域,相对于控制器作用域来说,这个作用域属于一个子级作用域,所以要绑定控制器中的变量值必须添加$parent标识。
gulp编译后select控件缺失请选择项
查看编译后的html文件,发现option内容变成了
<option value>-- 选择所属工程 --</option>
在源码中把value的值由””(空白)修改为” “(空格)解决了问题。对取值做trim可使编译前的代码恢复正常工作。
<select ng-model="collector.projectId" ng-options="item.id as item.name for item in projects" required> <option value=" ">-- 选择所属工程 --</option> </select>
指令
scope中不同类型配置,在html中传值的格式不同。
@ 直接传值 字符串单向绑定,
= 传引用,模型双向绑定,
& 方法绑定
bool值需要设置为=,如果出现值总是传不进去,尝试更换scope中的参数名。
app.directive('unitParaGroup', function() { return { restrict: 'E', templateUrl: 'modules/units/components/units.paraGroup.html', scope : { title : '@', unitData: '=', attributes:'=', column : '@', }, }; })
<unit-para-group title="机组参数设定" attributes="analogSettingAttrs" unit-data="unitLastestData" column="{{unitParaGroupColumn}}" ng-if="!hideSettingGroup"></unit-para-group>
在angular1.5的版本之前,都是以directive作为组件化的形式,而directive本身是一个指令,而并非是一个组件,所以它并不能很好的承担组件这一个职责,所以google在angular1.5的版本中推出了component组件。
数据共享
在多个controller中共享数据的方式
- 使用$rootScope
- 使用service
- 通过$scope的事件传播
要注意如果需要共享的数据是网络获取到的,并且多个controller同时发起请求,为了做到只需要一个实际请求即可,需要做请求状态判断处理。
在多个AngularJS controller之间共享数据
http://blog.51cto.com/xitongjiagoushi/1684429
双花括号:是angular内置的一种混合(Markup)指令,它会将表达式绑定到元素。
局部模板:模板片段
数据绑定是模型与视图间的自动同步,视图是模型的投影,当模型或视图改变时,它们会互相反映这种改变。
grunt或gulp Unknown provider: aProvider
多是因为使用了隐匿依赖,在代码压缩后会失效。解决办法,编写所有service、directive用数组注入。
http://tobato.iteye.com/blog/2116307