Angular入门

2017-02-08 本文已影响0人 J_L_L

Angular 简介

什么是 AngularJS

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

为什么使用 AngularJS

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

AngularJS 的核心特性

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

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的库下载到当前文件夹中
angular中最重要的概念是指令（directive）
ng-model 是双向数据绑定的指令，效果就是将当前元素的value属性和模型中的user.name建立绑定关系
JS: BOM DOM ES

使用总结

运行官方文档

CDN的优势

Content Delivery Network

快
节省自己服务器的带宽压力和流量

Angular 基础概念

MVC 思想

什么是 MVC 思想

将应用程序的组成划分为三个部分：Model View Controller
控制器的作用就是初始化模型用的，组织调度相应的处理模型；
模型就是用于存储数据的,处理数据与业务逻辑
视图用于以有好的方式向用户展现数据
优势：每个模块分工明确，职责清晰，复用。
目的：模块化和复用

mvc.png

登陆案例
模型
- 我们数据库中所有用户的信息
- 接受控制器传来的用户名和密码进行校验的业务逻辑并返回true/false
控制器
- 接受用户在界面上填写的用户名和密码
- 将用户名和密码交给模型
视图
- 给用户呈现一个表单
- 接受用户输入内容，并将其提交给控制器
- 根据控制器返回的数据，响应用户页面

模块（Module）

//创建一个名字叫MyApp的模块，第二个参数指的是该模块依赖哪些模块
var myApp = angular.module("MyApp",[]),

建立模块，通过ng-app指令指定不同的模块，划分应用程序结构，对页进行业务上的划分；模块间相互独立
也可以将重复使用的指令或过滤器之类的做成模块便于使用
angular.module方法传递两个参数才是创建模块，一个参数是获取模块
便于协同分工和维护

控制器（Controller）

angular.mdule ('OneApp',[])
            .controller('HelloController',[
                '$scope',
                function($scope){
                    $scope.p={
                        name:'zhangsan'
                     };
                  }
              ]);