AngularJS

版本：
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

发表评论