（4）Angular的开发

angular框架，库，是一款非常优秀的前台高级JS框架，有了这个框架即可以轻松构建SPA应用程序，通过指令宽展了HTML，通过表达式绑定数据到HTML。

轻松构建SPA应用程序，单一页面应用程序

http://www.cnblogs.com/powertoolsteam/p/angularjs-introdection.html
http://www.apjs.net/
http://www.angularjs.cn/
http://docs.angularjs.cn/api
https://material.angularjs.org
http://angular-ui.github.io/

更少的代码，实现更强劲的功能

image.pngimage.png

传统方式实现加法运算

image.png

Angular实现加法运算

image.png

传统方式实现数据列表呈现

image.pngimage.png

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

下载 Angular.js 的包
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

创立一个新的HTML文件

image.png

HTML 页面中 ng-xxx 的属性称之为指令
ng-app 指令告诉 AngularJS，<div> 元素是 AngularJS 应用程序管理的边界
ng-model 指令把文本框的值绑定到变量 name 上
Angular 最大程度的减少了页面上的 DOM 操作
让 JavaScript 中专注业务逻辑的代码
通过简单的指令结合页面结构与逻辑数据
通过自己设置指令实现组件化编程

我们需要本地运行 Angular 文档
下载最新的 Angular 包
MVC 是一种应用程序的开发思想
为理解决应用程序展现结构，业务逻辑之间的紧耦合关系

模型
解决数据和业务逻辑

视图
向客户展现数据

控制器
组织调度相应的解决模型

AngularJS很重要的一个特性就是实现板块化编程

var myApp = angular.module(“MyApp”, []);

控制器

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

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

// 监视购物车内容变化，计算最新结果$scope.$watch(‘totalCart’, calculateDiscount);

scope暴露数据模型（数据，行为）

AngularJS 表达式可以包含字母，操作符，变量

ng-repeat指令用来编译一个数组重复创立当前元素

<ul class="messages">    <li ng-repeat="item in messages track by $index">        {{item}}    </li></ul>

<ul class="messages">    <li ng-repeat="item in messages track by $index" ng-class="{red:item.read}">        {{item.content}}    </li></ul>

ng-show/ng-hide 指令
ng-link/ng-src 指令

<!-- 浏览器在解析HTML时会去请求{{item.url}}文件 --><img src="{{item.url}}"><!-- 可以使用ng-src处理该问题 --><img ng-src="{{item.url}}">

ng-model
ng-class
ng-show/ng-hide/ng-if
ng-click
ng-link/ng-src
过滤器（Filter）
过滤器的主要用途就是一个格式化数据的小工具，
date 过滤器

<span>{{'1284893553026' | date:"MM/dd/yyyy 'at' h:mma"}}</span>

limitto 过滤器
limitto过滤器用于限制一个字符串或者数组展现的长度：

<ul class="messages">    <li ng-repeat="item in messages | limitTo:-2">        {{item.content | limitTo:2 }}    </li></ul>

filter过滤器会根据设置的检索数据过滤未匹配到的数据内容

<ul class="messages">    <li ng-repeat="item in messages | filter:{content:123}">        {{item.content}}    </li></ul>

Form 表单 – 验证规则

必填项 required or ng-required
最小长度 minlength or ng-minlength
最大长度 maxlength
类型 type（number、email）

服务（Service）

公用（公共）的业务逻辑集中存放的一段代码

通过板块的service方法创立一个服务：

var myApp = angular.module('MyApp', []);// 通过factory方法创立一个公用的servicevar userService = myApp.service('UserService', function() {    var users = { 1: 'zhangsan1', 2: 'zhangsan2' };    return {        getUser: function(id) {            return users[id];        },        addUser: function(id, name) {            users[id] = name;        },    };});

$http服务是AngularJS中解决AJAX的服务

// Simple GET request example:$http({  method: 'GET',  url: '/someUrl'}).then(function successCallback(response) {    // this callback will be called asynchronously    // when the response is available  }, function errorCallback(response) {    // called asynchronously if an error occurs    // or server returns response with an error status.  });

MVC

Model（数据模型，业务逻辑）
View（界面展现，展现结构）
Controller（控制器，控制逻辑）

image.png

AngularJS实现了双向数据绑定

请点赞！由于你们的赞同/鼓励是我写作的最大动力！

欢迎关注达叔小生的简书！

这是一个有质量，有态度的博客

博客