Angular零星知识点2
Posted 长安
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Angular零星知识点2相关的知识，希望对你有一定的参考价值。
四、ng-if、ng-show、ng-switch
参考： AngularJS的学习--ng-show/ng-hide/ng-if和ng-switch
简单总结:
ng-show和ng-hide只是显示或隐藏了DOM节点，节点依然会被加载渲染
ng-if与ng-show一样都是接收一个bool，但是当ng-if为false时，它控制的DOM节点不会被创建或者之前的DOM节点会被销毁，可加快DOM加载速度
ng-switch省去了tab选项卡时的麻烦，它监听一个变量，变量值为a时，a控制的DOM节点就会被创建显示，变量值为b时，a的DOM节点被销毁，b的DOM节点被创建
又发现了个问题，ng-if、ng-switch与ng-show的区别，还有一个，即ng-if与ng-switch会创建新的子作用域，所以在ng-if、ng-switch中用ng-mode时要注意加上$parent
参考：ng-if与ng-show、ng-hide指令的区别和注意事项；Angularjs Scope 原型链
$scope是可以继承的，跟javascript的原型链相同
用ng-switch做了个小测试，结果一目了然：
<body ng-app="myapp" ng-controller="DemoCtrl" ng-switch="ShowMode">
<div class="well span6" ng-switch-when="a">
<input ng-model="$parent.showa"/>
</div>
<div class="well span6" ng-switch-when="b">
<input ng-model="showb"/>
</div>
<div class="well span6" style="float:none;">
<button ng-click="ChangeShow(\'a\')">switch to a</button>
<button ng-click="ChangeShow(\'b\')">switch to b</button>
<br/>
</div>
</body>
<script type="text/javascript">
var app=angular.module(\'myapp\',[]);
app.controller(\'DemoCtrl\' ,function($scope){
$scope.showa="123";
$scope.showb="234";
$scope.ShowMode = "a";
$scope.ChangeShow = function(ShowMode){
if(ShowMode==\'a\'){
$scope.ShowMode=\'a\';
console.log($scope.showa);
}else{
$scope.ShowMode=\'b\' ;
console.log($scope.showb);
}
}});
</script>
五、ng-repeat track by
参考： angularjs: ng-repeat 如何实现嵌套？；ng-repeat指令中使用track by子语句解决重复数据遍历的错误
之前没有注意到这个问题，因为repeat的都是json格式的数据，而对于这种类型的数据，就算内容相同，也不会报错，恩，后来测试了一下，确实如此
但是当遍历数组时，如果数组中是数字或字符串等基本数据类型并有重复元素，就会报错
For example: item in items is equivalent to item in items track by $id(item). This implies that the DOM elements will be associated by item identity in the array.
此时他们的id就是他们自身的值，而ngRepeat不允许collection中存在两个相同id的对象
解决方法是定义track by表达式，即在item in data后面加上track by item.id【业务上自己定义的id】或者track by $index【索引变量】
六、路由 ngRoute 和ui-route
参考： Angular系列文章之angular路由；ngRoute VS ui-router；angular 系列八 ui-router详细介绍及ngRoute工具区别
简单总结：
angular中常用的就是这两种路由，之前看过ui-route，可惜项目里还是用的ngRoute
ngRoute是angular内置的路由模块，但功能有限，ui-route是基于ngRoute开发的第三方路由模块，很受追捧
ui-route主要弥补了ngRoute在多视图和视图嵌套方面的不足
ngRoute是通过url来驱动视图，而ui-route则是通过状态state
ngRoute 和 ui-route 相比:
$route —> $state
$routeParams —> $stateParams
$routeProvider —> $stateProvider
<div ng-view></div> —> <div ui-view></div>
以上是关于Angular零星知识点2的主要内容，如果未能解决你的问题，请参考以下文章
typescript Angular 2测试片段。代码库https://developers.livechatinc.com/blog/category/programming/angular-2/
typescript Angular最终版本的Angular 2测试片段。代码库https://developers.livechatinc.com/blog/category/programming
typescript Angular最终版本的Angular 2测试片段。代码库https://developers.livechatinc.com/blog/category/programming
typescript Angular最终版本的Angular 2测试片段。代码库https://developers.livechatinc.com/blog/category/programming