首页 > 代码库 > 3.AngularJS必备知识

3.AngularJS必备知识

  AngularJS是一个WEB应用框架。

  本节我们会学习控制器(控制数据),会学习作用域(连接控制器和用户界面),用户界面又叫做视图,通过模板和作用域来创建交互视觉效果。另外,我们还会学习其他的特性比如如何使用过滤器来转换数据、如何构建并使用指令来增强现有的HTML元素,以及如何从外部数据源中加载并保存应用数据。

  3.1 AngularJS初探

  一个典型的AngularJS应用的组件:

  3.1.1 视图和模板:描述内容

    模板:是一块HTML内容,就是带有指令或者表达式的HTML,可以在需要的时候载入应用。

    视图:会使用模板来展示数据,视图一定会有一个模板(就是HTML标签),还会有模板需要用到的数据,视图会获取数据并使用数据中的值来对模板进行渲染。

    指令:指令会修改包含它的元素的行为。Angular有很多自带的指令,他们都是以ng开头的,如用来修饰显示样式的(ngShow、ngClass)、用于表单的(ngModel、ngForm)、用于监听单击等事件的(ngClick、ngMouseover),Angular还有许多作用在原生HTML元素上的指令,提供一些HTML没有的功能,这些元素包括输入框、文本区域和锚点。

    表达式:双花括号{{}},表示某些数据会被展示在这里,这种思想被称为数据绑定。花括号中的所有内容都是表撒施,AngularJS会用当前模型的数据对表达式进行求值。

    ngApp和ng-App的区别:

    ngApp是JavaScript版本的名字,ng-App是HTML版本的名字。

  模板代码示例:

//以下是一段模板
<ul class=""list-group>    
    <li class="list-group-item">
        ng-repeat="note in notes"    //ng-repeat为笔记数组中的每个笔记创建一个li
        ng-click="displayNote($index)"    //ng-click会在li被点击时调用displayNote()方法
        ng-class="{active:note.id == content.id}">{{note.title}}<br />    //用ng-class来控制是否显示一个类
        <small>{{note.date | date:‘short‘}}</small>    //显示数据并使用过滤器显示较短的日期格式
    </li>
</ul>

  3.1.2 控制器、模型和作用域:管理数据和逻辑

    控制器:是附加在文档对象模型(DOM)节点上的函数,用来驱动你的应用逻辑。在JavaScript中,控制器就是一个函数,用来和作用域通信并相应事件。

    作用域:可以理解为在控制器和视图之间共享的一个上下文,可以爸它看做控制器和界面的桥梁,作用域在控制器中更新时也会更新视图。作用域有两个核心角色:存储数据并允许控制器的方法访问数据。存储在作用域中的数据被称为模型,模型可以是任意的JavaScript值(通常是数组或者对象,也可以是简单的数字或者字符串),你可以把它存储在作用域中,然后通过作用域共享给控制器和视图。

  控制器代码示例:

angular.module(‘app‘).controller(‘Controller‘,function($scope){  //声明控制器并使用$scope服务来访问作用域
    $scope.notes = [  //创建笔记对象数组并赋值给notes模型,ngrepeat会显示这个模型
        {id:1,title:‘Note 1‘,date:new Date()},
        {id:2,title:‘Note 2‘,date:new Date()}
    ];
    $scope.getNote=function(index){  //添加一个方法,它会被视图中的ngClick命令出发并更新当前值
        $scope.content=$scope.notes[index];
    };
});

    控制器中的所有内容和应用的其他部分隔离,除了它自己的子作用域。这很重要,因为这可以限制代码和变量的可见性。

    根作用域(通过$root Scope对象访问)是Angular创建的第一个作用域,是其他所有作用域的基础,这意味着你放在根作用域上的所有东西对其他作用域都是可见的,听起来似乎还不错,但是最好不要这样做。需要保持作用域整洁和聚焦,而不是把所有东西都推在根作用域里。

    控制器不是万能的:一要避免在控制器中进行DOM操作,二要避免在控制器中格式化或者过滤数据,可以使用表单来做这些事。

  3.1.3 Service:可重用的对象和方法

    Angular中有一个概念叫service,它本质上就是一个JavaScript对象,可以在整个应用中共享。Angular默认提供了许多service,你也可以创建自己的service。

    $http是一个非常常见的service,Angular用它来操作HTTP请求。

    service是有Angular延迟加载的,也就是说,他们只会在使用的时候才会载入内存。他们还是单例的,如果你在一个地方改变了service的值,其他用到这个service的地方都会受到影响。

    Ionic把许多特性写成了Angular的service,需要注意的是,控制器中包含的几乎所有内容都是service。

  3.1.4 双向数据绑定:在控制器和视图之间共享数据

    Angular最强大的特性之一就是双向数据绑定。视图将数据绑定到模板,反过来也同样使用。视图可以改变作用域中的数据,数据会立刻更新到作用域并反映到控制器中。这在表单中尤其有用,用户向文本框中输入内容时作用域中的值会同步更新。你不需要做任何特殊的事情来启动双向数据绑定,它会自动实现。如下面的例子:

技术分享
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>

<div ng-app="myApp" ng-controller="formCtrl">
  <form novalidate>
    First Name:<br>
    <input type="text" ng-model="user.firstName"><br>
    Last Name:<br>
    <input type="text" ng-model="user.lastName">
    <br><br>
    <button ng-click="reset()">RESET</button>
  </form>
  <p>form = {{user }}</p>
  <p>master = {{master}}</p>
</div>

<script>
var app = angular.module(myApp, []);
app.controller(formCtrl, function($scope) {
    $scope.master = {firstName:"John", lastName:"Doe"};
    $scope.reset = function() {
        $scope.user = angular.copy($scope.master);
    };
    $scope.reset();
});
</script>

</body>
</html>
View Code

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

    

    

3.AngularJS必备知识