AngularJS初探

前言

现在前端的技术发展是如此之快，各种框架层出不穷，AngularJS无疑是十分耀眼的一个。仅以此篇博文开启学习AngularJS之门，共勉。

正文

一、AngularJS特性

AngularJs是一个用于设计动态web应用的结构框架，其有很多优秀的特性，如模板机制、数据绑定、模块、指令、依赖注入、路由，这里暂且不对其原理做深入探究，毕竟还不知道怎么用这些高级的功能。

二、基础知识

在这篇文章的最后我要写一个常见的应用—Todo,下面是一些必要的准备知识。

1、指令：指令是ng为HTML补充的语法扩展，用于增强HTML的表现力。
2、模板与数据的绑定：通过ng-model实现。何为双向绑定，通俗讲就是两者将随时保持同步，最新的数据会实时显示在页面中，页面中用户修改的数据也会实时被记录在数据模型中。
3、循环输出：ng-repeat实现
4、事件：ng-event实现

不多说了，还是结合例子来看吧，更容易明白。

三、Todo

1、可以先简单的将AngularJS视为MVC框架。那么模板是什么？我理解为：包含ng-controller指令的标签内（包括其自身）的html内容。

<div ng-controller="Todo">
    <input type="text" ng-model="data.item" ng-keyup="add($event)">
    <ul>
        <li ng-repeat="o in data.list">
            <span>{{o.content}}</span>
            <a href="javascript:;" ng-click="del($index)">删除</a>
        </li>
    </ul>
</div>

 - 首先把input内的输入内容与数据中的data.item绑定，随着输入内容的变化data.item自动发生改变。
 - 在键盘抬起的时候会触发add方法，且参数为event事件。
 - data.list在数据中是一个数组，通过ng-repeat指令可以做到循环输出。
 - 在点击删除的时候触发del方法，其参数$index代表的是当前循环的索引。

2、下面是MVC中的M，即model。这里的model是跟C即控制器是对应的，每个控制器下面会有一个作用域$scope。模板中用到的数据以及方法都需要挂载在$scope下面才可以被找到。

var app = angular.module("MyApp",[]);
app.controller('Todo',function($scope){
    $scope.data = {
        'item' : '',
        'list' : [] 
    };
    $scope.add = function(e){
        if(e.keyCode==13){
            $scope.data.list.push({'content':$scope.data.item});
            $scope.data.item = '';
        }
    },
    $scope.del = function(index){
        $scope.data.list.splice(index,1);
    }
});

 - 首先可以看到，抬起回车键就会向data.list内加入一条数据，model的变化可以实时的展现在view上。
 - 点击删除时会根据索引删除掉data.list内的一条数据

结语

AngularJS可以很大程度上简化我们的工作，并且有很多很酷的特性，值得我们去深入探索。