Angular 使用个人总结

前端之家收集整理的这篇文章主要介绍了Angular 使用个人总结前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

1.把控制器中与视图无关的逻辑都移到"服务(service)"中

2. 新手常犯错误

当在路由中已经指定了controller,就要把html中的移除,比如`<body ng-app="7minWorkout" ng-controller="WorkoutController">`,否则会有两个controller,会出现加载两次的情况。
$routeProvider.when('/workout',{ templateUrl: @H_404_10@'partials/workout.html',controller: @H_404_10@'WorkoutController' });@H_404_10@

3.本质上,当写 directive 时令时。当我们设置了 link 参数,实际上是创建了一个 postLink() 链接函数,以便 compile() 函数可以定义链接函数。编译函数(compile)负责对模板DOM进行转换。 链接函数(link) 负责将作用域和 DOM 进行链接

.... compile: @H_404_10@function@H_404_10@ compile(tElement,tAttrs,transclude) { @H_404_10@return@H_404_10@ { pre: @H_404_10@function@H_404_10@ preLink(scope,iElement,iAttrs,controller) { ... },post: @H_404_10@function@H_404_10@ postLink(scope,controller) { ... } } },link: @H_404_10@function@H_404_10@ postLink(scope,iAttrs) { ... } ...@H_404_10@

个人理解compile函数功能更强。

详情内容[译]ng指令中的compile与link函数解析

4. 使用ng-repeat指令,为防止重复值发生的错误加上track by $index。

<@H_404_10@li @H_404_10@ng-repeat@H_404_10@="i in ctrl.list track by $index"@H_404_10@>@H_404_10@{{ i }}</@H_404_10@li@H_404_10@>@H_404_10@

5. 关于向父子controller中传递内容

  • `$emit` 只能向parent controller传递event与data
  • `$broadcast` 只能向child controller传递event与data
  • `$on` 用于接收event与data

6.尽量要少操作DOM.这里有个简单的例子,我们要做一个切换的按钮 (这个例子有点做作和有点长,主要是为了表示一下很复杂的情况也是这样解决的.)

@H_403_84@
.directive( 'myDirective',function@H_404_10@ () { @H_404_10@return@H_404_10@ { template: @H_404_10@'<a class="btn">Toggle me!</a>',link: @H_404_10@function@H_404_10@ ( scope,element,attrs ) { @H_404_10@var@H_404_10@ on = false@H_404_10@; $(element).click( @H_404_10@function@H_404_10@ () { @H_404_10@if@H_404_10@ ( on ) { $(element).removeClass( @H_404_10@'active' ); } @H_404_10@else@H_404_10@ { $(element).addClass( @H_404_10@'active' ); } on @H_404_10@= !on; }); } }; });@H_404_10@
View Code@H_404_10@

这个例子中有些错误,第一,jQuery是不需要的. 第二即使其他地方引入了jQuery,我们还是可以用 angular.element 来替换. 第三,即使要使用jQuery,jqLite (angular.element) 也会在引入jQuery时优先使用jQuery. 所以不要用$,而是angular.element. 第四,jqLite 不需要包裹$,在link函数中,element 已经是一个jQuery元素被传了进去. 第五,之前说过,模板中与逻辑混在一起。

改进后

@H_403_84@
.directive( 'myDirective2',function@H_404_10@ () { @H_404_10@return@H_404_10@ { scope: @H_404_10@true@H_404_10@,template: @H_404_10@'<a class="btn" ng-class="{active: on}" ng-click="toggle()">Toggle me!</a>',attrs ) { scope.on @H_404_10@= false@H_404_10@; scope.toggle @H_404_10@= function@H_404_10@ () { scope.on @H_404_10@= !scope.on; }; } }; });@H_404_10@
View Code@H_404_10@

7. ng默认的解析标签是{{}},有时候会和其他模板引擎中的标签冲突,如Symfony的twig的模板。如要修改

var@H_404_10@ app = angular.module('myApp',[]); app.config([@H_404_10@'$interpolateProvider',function@H_404_10@($interpolateProvider) { $interpolateProvider.startSymbol(@H_404_10@'{['); $interpolateProvider.endSymbol(@H_404_10@']}'); }]);@H_404_10@

8. 重置form到初始状态,并清除之前的错误信息

//@H_404_10@ form.$setPristine()可以重置表单到dirty之前的状态,并且清除form上的ng-dirty类名@H_404_10@ //@H_404_10@ accountForm是form元素的name属性值@H_404_10@
 $scope.accountForm.$setPristine(); $scope.accountForm.$setUntouched();@H_404_10@

9. 使用一次性绑定提高性能。尤其是在ng-repeat中

<p>Hello {{::name}}!</p>

<custom-directive two-way-attribute="::oneWayExpression"></custom-directive>

猜你在找的Angularjs相关文章