Angular入门（一）

Angular 简介

什么是 AngularJS

• 一款非常优秀的前端高级 JS 框架
• 最早由 Misko Hevery 等人创建
• 2009 年被 Google 公式收购，用于其多款产品
• 目前有一个全职的开发团队继续开发和维护这个库
• 有了这一类框架就可以轻松构建 SPA 应用程序
• 轻松构建 SPA（单一页面应用程序）
• 单一页面应用程序：
  • 只有一个页面（整个应用的一个载体）
  • 内容全部是由AJAX方式呈现出啦的
• 其核心就是通过指令扩展了 HTML，通过表达式绑定数据到 HTML。

为什么使用 AngularJS

• 更少的代码，实现更强劲的功能
• 将一些以前在后台开发中使用的思想带入前端开发
• 带领当前市面上的框架走向模式化或者架构化

AngularJS 的核心特性

• MVC
• 模块化
• 自动化双向数据绑定
• 指令系统

相关链接

• http://www.apjs.net/
• http://www.angularjs.cn/
• http://docs.angularjs.cn/api
• https://material.angularjs.org
• http://angular-ui.github.io/

Angular 上手

安装 Angular

• 下载 Angular.js 的包
  • https://github.com/angular/angular.js/releases
• 使用 CDN 上的 Angular.js
  • http://apps.bdimg.com/libs/angular.js/1.4.9/angular.min.js
• 使用 Bower 安装

  bower install angular
  

• 使用 NPM 安装

  npm install angular
  

• 每种方式安装包，本质都是将angular的库下载到当前文件夹中

简单示例

    
使用NG实现双边数据绑定
    
    
hello {{user.name}}
 

• angular中最重要的概念是指令（directive）

• ng-model 是双向数据绑定的指令，效果就是将当前元素的value属性和模型中的user.name建立绑定关系

分析 Angular 示例

  

    
使用NG实现双边数据绑定
    
    
hello {{user.name}}
    
  
  
  

Angular 基础概念

MVC 思想

什么是 MVC 思想

• 将应用程序的组成划分为三个部分：Model View Controller
• 控制器的作用就是初始化模型用的；
• 模型就是用于存储数据的;
• 视图用于展现数据
• 登陆案例:
• 模型
  • 我们数据库中所有用户的信息
  • 接受控制器传来的用户名和密码进行校验的业务逻辑并返回true/false
• 控制器
  • 接受用户在界面上填写的用户名和密码
  • 将用户名和密码交给模型
• 视图
  • 给用户呈现一个表单
  • 接受用户输入内容，并将其提交给控制器
  • 根据控制器返回的数据，响应用户页面

模块（Module）

• 划分应用程序结构
• 我们可以通过angular.module创建一个模块
• angular.module方法传递两个参数才是创建模块，一个参数是获取模块

控制器（Controller）

• 控制器的三种主要职责：
• 为应用中的模型设置初始状态
• 通过$scope对象把数据模型或函数行为暴露给视图
• 监视模型的变化，做出相应的动作

视图模型（$scope）

• 视图和控制器之间的桥梁
• 用于在视图和控制器之间传递数据
• 利用$scope暴露数据模型（数据，行为）

表达式（Expression）

• 作用：
• 使用 表达式 把数据绑定到 HTML。
• 语法：
• 表达式写在双大括号内：{{ expression }}。
• 比较：
• 表达式作用类似于ng-bind指令
• 建议更多的使用指令
• 数字 {{ 100 + 100 }}
• 字符串 {{ 'hello' + 'angular' }}
• 对象 {{ zhangsan.name }}
• 数组 {{ students[10] }}
• 注意：
• AngularJS 表达式可以写在 HTML 中。
• AngularJS 表达式不支持条件判断，循环及异常。
• AngularJS 表达式支持过滤器。