AngularJS入门：01-基础

一、Angular简介

• AngularJS*是Google开发的纯客户端JavaScript技术的WEB框架,用于扩展、增强HTML功能,它专为构建强大的WEB应用而设计。 Angular 简称 ng；
  作用：扩展增强HTML功能（标签名，属性，等）
  AngularJS 通过新的属性（自定义）和{{表达式}}扩展了 HTML。
  AngularJS 可以构建一个单页面应用程序（SPA：Single Page Application）如：网易云音乐。

1.1 常用指令

1）、ng-app—— 指令定义一个 AngularJS 应用程序。ng-application ：即angular的应用，一般放在html标签上，指定一个应用 。一般话在html根标签上。
2）、ng-model—— 指令把元素值（比如输入域：input等的值）绑定到应用程序。
3）、ng-bind ——指令把应用程序数据绑定到 HTML 视图。 也可以通过{{表达式}}
{{表达式}}——是ng-bind的简写方式。
4）、ng-init：angular提供的一个初始化指令；它里面可以写js语法，在这里面来定义一些变量，作为初始值。

框架分析

angular不同于常规的MVC框架，更偏向于MVVM框架，它实现了数据的双向绑定，大大的简化了数据与视图之间的交互
MVVM模式
Model：它是与应用程序的业务逻辑相关的数据的封装载体，它是业务领域的对象，在web页面中，大部分Model都是来自Ajax的服务端返回数据或者是全局的配置对象；而angular中的service则是封装和处理这些与Model相关的业务逻辑的场所。
View：它专注于界面的显示和渲染，在angular中则是包含一堆声明式Directive的视图模板。
ViewModel：视图模型的协调者——它是View和Model的粘合体，负责View和Model的交互和协作，它负责给View提供显示的数据，以及提供了View中Command事件操作Model的途径；在angular中$scope对象充当了这个ViewModel的角色；

$scope == ViewModel对象

View不能直接与Model交互，而是通过$scope这个ViewModel来实现与Model的交互。对于界面表单的交互，通过ngModel指令来实现View和ViewModel的同步。

二、Angular表达式

    AngularJS 使用 表达式（ {{表达式}} ） 把数据绑定到 HTML。

5.1 表达式语法

1、AngularJS 表达式写在双大括号内：{{ expression }}。
AngularJS 表达式把数据绑定到 HTML，这与 ng-bind 指令有异曲同工之妙。
AngularJS 将在表达式书写的位置”输出”数据。可任意位置，而bind需要放在数据的父标签上。
AngularJS 表达式 很像 JavaScript 表达式：它们可以包含文字、运算符和变量。

    <!--表达式运算-->
    {{'name'.length}}
    {{5*10+1}}
    <!--对象操作 -->
    <div ng-init="user={name:'小花',age:18}">
        {{user.name}}
    </div>