AngularJs学习总结

最近做了一个webapp，由于之前没有相关的开发经验，所以就选了ionic框架来完成本次app开发，ionic框架包含了angularJs,所以还是比较方便的。所以与其说是AngularJs总结，还不如说是使用ionic框架的总结。
总的来说，框架用的还是比较舒服的，很方便，特别是AngularJs的数据绑定和路由机制，十分好用的。为开发能节省不少时间。
下面来总结一下使用中遇到的问题和觉得应该注意的问题。
1.ionic中关于banner的数据更新。
代码如下：

<ion-slide-box show-pager="true" auto-play="true" does-continue="true" delegate-handle="image-viewer">
   <ion-slide ng-repeat="banner in banners track by $index">
        <a href="......">
              <img ng-src="......" width="100%">
        </a>
    </ion-slide>
</ion-slide-box>

当我从后台请求到数据然后给banners赋值后，发现banner根本没更新，界面还是不显示。网上一查，用 $ionicSlideBoxDelegate.$getByHandle(‘image-viewer’).update();更新，用这句代码banner倒是更新了，后台返回一条数据的时候显示没问题，返回3条数据的时候显示也没问题，返回2条数据的时候问题来了，pager point 显示4个，这个就让人很郁闷了。跟踪了一下源码，发现确实index最大会变成3，研究了好久，觉得还是$ionicSlideBoxDelegate.$getByHandle(‘image-viewer’).update();出了问题，但是具体哪里出了问题，就没搞清楚了。试了好久，最终得出一条可行的方法，具体代码如下：

 <div ng-if="banners != null && banners.length > 0">
      <ion-slide-box show-pager="true" auto-play="true"
                does-continue="true" delegate-handle="image-viewer">
           <ion-slide ng-repeat="banner in banners track by $index">
                <a href="......">
                  <img ng-src="......" width="100%">
                </a>
           </ion-slide>
      </ion-slide-box>
</div>

就是最外层添加一层div 然后用ng-if决定是否添加或者删除ion-slide-box，这样就能解决由update更新所出现的问题了。而且在controller里获取数据更新banners的时候也不使用$ionicSlideBoxDelegate.$getByHandle('image-viewer').update(); 总觉得这个update方法有点还有不为人知的问题。
以上，就是这个问题的解决办法了，暂时找不到好的方法，如果以后能找到好的方法再更新吧。

2.路由跳转问题
当我们从界面A跳转到界面B，然后从界面B返回的时候想要跳转到界面C，而不是一般的返回到A，那么我们可以用$location.path("C").replace();来直接替换B界面。我觉得angularJs的界面跳转这部分和android相比，还是有很大的缺点的，像在选项卡之间一直不停的切换后，点击返回按钮时，没法直接退出，需要一直不停的返回上一层，如果能像android那样，栈里面只存放一个界面，如果想要跳转到该界面，就把该界面前面的所有界面清除掉就好了。

3.同一个html中可以有多个ng-app，但是angularJs只启动第一个，一般不要在一个页面多次启动app。

4.controller之间传递数据用$on,$emit,$broadcast$emit只能向parent controller 传递event 和data
$broadcast只能向child controller 传递event 和data$on 用于接收data和event

5.service 和factory差不多，至少使用上来说，好像没什么区别。

6.ng-cloak 可以来避免未渲染元素闪烁. 如<p ng-cloak>{{gretting}}</p>