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-routerangular 系列八 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

sv零星知识点

css零星进阶知识点