开发Ionic应用前Angular js必备知识

　　Angular js是一个Web应用框架，它极其流行，已经成为目前使用最普遍的Javascript工具之一。Ionic基于AngularJS构建而成，因此学习一些AngularJS的知识颇有必要。Ionic并无独立开发一套完整的Web应用框架，而是对AngularJS进行了扩展，给它添加了大量界面组件和其余的移动端友好的特性。

　　本篇文章会带你了解AngularJS的核心知识并介绍一些基础知识。咱们学会控制器，顾名思义，它会控制（control）你的数据。接着咱们介绍做用于，它会链接控制器和用户界面，后者被称为视图（view）。仔细观察视图，你会看到他们是如何经过模板和做用域来建立交互视觉效果的。在这个过程当中，咱们还会学习其它特性，好比如何使用过滤器来转换数据、如何构建并使用指令来加强现有的HTML元素，以及如何从外部数据源中加载并保存应用数据。

　　如今咱们来看一个bootstrap+AngularJS开发的一个小应用，方便咱们了解AngularJS。你能够草丛GitHub上查看完整的项目代码https://github.com/ionic-in-action/chapter3。若是你想看最终的效果，能够访问https://ionic-in-action/chapter3.herokuapp.com

 

1.视图和模板：描述内容

　　AngularJS和HTML关系密切，尤为是在你建立模板的时候。模板是一块HTML内容，能够再须要的时候载入应用。AngularJS向HTML中加入了许多新特性并扩充了HTML的语义。视图会使用模板来展现数据。视图必定会有一个模板（就是HTML标签），还会有模板须要用到数据。视图会把模板转换成用户最终看到的视觉效果，也就是说，它会基于数据修改模板。下面咱们来看一段模板

<ul class="list-group">
    <li class="list-group-item" ng-repeat="note in notes" ng-click="displayNote($index)" ng-class="{active:note.id==content.id}">
        {{note.title}}<br/>
        <small>{{note.date|date:'short'}}</small>
    </li>
</ul>

　　这段模板展现的只是<ul>中的一个<li>元素，它包含多个被称为Angular指令的属性。指令会修改包含它的元素行为。在本例中，ng-Repeat会遍历一个Javascript对象或者数组，并为每一个元素建立一个<li>元素。ng-click相似Javascript的onClick时间处理器，单击时会调用displayNote()函数。这个模板被渲染时会为notes数组中的每一个元素建立一个列表元素。

　　双花括号（{{}}）表示某些数据会被展现在这里，这种思想被称为数据绑定，这种语法叫作表达式花括号中的全部内容都是表达式，Angular会用当前模型的数据对表达式求值。所以，note.title的内容会被插入到<li>元素中花括号包裹的位置。模板就是带有指令或表达式的HTML。视图会获取数据并使用数据中的值来对模板进行渲染。假设notes数组中有5个笔记，<ul>元素会包含5个列表元素，如图。

　　Angular有不少自带的指令，它们都以ng开头。有些用来修改显示样式（如ng-show、ng-class），有些用于表单（如ng-model、ng-Form），有些用于监听点击等各类事件（如ng-click、ng-mouseover）。Angular还有许多做用在原生HTML元素上的指令，提供一些HTML没有的功能，这些元素包括输入框、文本区域和锚点。举个例子，Angular能够给<input type="text">元素添加额外的属性，让它支持自定义验证。完整的列表请查阅Angular官方文档。

2.控制器、模型、和做用域：管理数据和逻辑

　　控制器是附加在文档对象模型（DOM）节点上的函数，用来驱动你的应用逻辑。在Javascript中，控制器就是一个函数，用来和做用域通讯并响应时间。

　　做用域能够理解为在控制器和视图之间共享的一个上下文。能够把它看作控制器和界面的桥梁，做用域在控制器中更新时也会更新视图。做用域有两个核心角色：存储数据并容许控制器的方法访问数据。存储在做用域中的数据被称为模型。模型能够是任意Javascript值（同城是数组或者对象，也能够是简单的数据或者字符串），你能够把它存储在做用域中，而后经过做用域共享个控制器和视图。咱们来看一个例子，它会把上图的视图和模板结合起来：

angular.module("App")
.controller('Controller',function($scope){
    $scope.notes=[
          {id:1,title:'Note 1',date:new Date()}  ,
          {id:2,title:'Note 2',date:new Date()}    
    ];
    $scope.getNote=function(index){
        $scope.content=$scope.notes[$index];
    }
});

　　这个控制器会使用一个数组中的元素来设置notes模型，后者存储在一个特殊的$scope对象中。这个对象是Angular提供的，每一个做用域都有，你能够存储数据并在控制器和视图（也就是模型）中共享数据。视图会使用ng-repeat在列表中展现笔记数组。getNote()方法能够帮你声明哪些笔记须要存储在content模型中。视图能够调用这个方法，由于它们在同一个做用域中。

　　控制器中的全部内容都和应用的其余部分隔离，除了它本身的子做用域。这很重要，由于这能够限制代码和变量的可见性。对于一个新Angular开发这来讲，常见的挑战就是访问不一样做用域中的内容，默认状况下是不可能实现的。

　　Angular的做用域是有层级结构的，做用域能够想DOM同样嵌套。实际上，做用域对应页面上的DOM结构。做用域能够经过附加实现只容许一个HTML元素及其它子元素访问，就像CSS类能够将目标样式应用在设置类的元素及子元素同样。

　　当想进行跨做用域通讯时，层级结构变得尤为重要，由于子做用域能够查看父做用域（就像Javascript的原型继承同样，若是你很熟悉的话）。Angular中的一些指令会建立子做用域，所以有时候不太好判断具体的做用域。若是你在子做用域中访问一个不存在的值，它实际上会在父做用域中寻找那个值，直到找到或者遍历完全部的父做用域。

　　根做用域（经过特殊的$root Scope对象访问）是Angular建立的第一个做用域，是其它全部做用域的基础。这意味着你放在根做用域上的全部东西对其它做用域都是可见的，听起来彷佛还不错，但最好不要这样作。须要保持做用域整洁和聚焦，而不是把全部东西都堆在根做用域里。Javascript的做用域就有这个问题，应用一般使用全局做用域来保存变量。假设你有一个名为id的值；若是你的子做用域也有一个id，就会出现冲突，你没法访问根做用域中的值。协同开发时这个问题会更加突出，由于开发同一个应用的人越多或者你使用的外部工具越多，那就越有可能出现命名冲突。

注意：控制器不是万能的

　　有一些事实不该该在控制器中作的，由于它们会让你的代码更难维护和测试。最重要的是避免在控制器中进行DOM操做，假设你在构建一个幻灯片效果，控制器不该该改动DOM或者改变幻灯片的样式，由于这应该有自定义指令实现。你还应该避免在控制器中格式化或者过滤数据，可以使用表单来作这些是。

3.Service:可重用的对象和方法

　　Angular中有一个概念交service，它本质上就是一个javascript对象，能够在整个应用中共享。Angular默认提供了许多service，你能够建立本身的service。若是你已经尝试过Angular，那你确定用过自带的service。

　　$http是一个很是常见的service，Angular用它来操做HTTP请求。它有不少方法，好比get()、post()和其余的HTTP动做。service能够很是复杂（好比$http），也能够简单的只包含一些数据。

　　service是有Angular延迟加载的，也就是说，它们只会在使用的时候才载入内存。它们仍是单例的，若是你在一个地方改变了service的值，其它用到这个service的地方都会受影响。Ionic把许多特性写成了Angular的service，须要记住的是，控制器中包含的几乎全部的内容都是service。

4.双向数据绑定：在控制器和视图之间共享数据

　　Angular最强大的特性之一就是双向数据绑定。你已经看到了视图如何把数据绑定到模板，其实反过来一样适用。视图能够改变做用域中的数据，数据会马上更新到做用域并反应到控制器中。这在表单中尤为有用，用户向文本框中输入内容时，做用域中的值会同步更新。你不须要作任何特殊的事情来启动双向数据绑定——她会自动实现。

结语：以上就是Angular的核心概念，这些背景知识已经足够你起步。