（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/

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

[外链图片转存失败(img-HSRDgmSj-1563690800882)(https://upload-images.jianshu.io/upload_images/11158618-3f278ee6f6c7fc61.png?imageMogr2/auto-orient/strip|imageView2/2/w/1240)]

[外链图片转存失败(img-XMuEZKk2-1563690800886)(https://upload-images.jianshu.io/upload_images/11158618-3a2e50c85d2e7d98.png?imageMogr2/auto-orient/strip|imageView2/2/w/1240)]
传统方式实现加法运算

[外链图片转存失败(img-UqCMrU0F-1563690800886)(https://upload-images.jianshu.io/upload_images/11158618-69a14966afc61656.png?imageMogr2/auto-orient/strip|imageView2/2/w/1240)]

Angular实现加法运算

[外链图片转存失败(img-TGDvy7Nw-1563690800888)(https://upload-images.jianshu.io/upload_images/11158618-5ea12ec8859bd400.png?imageMogr2/auto-orient/strip|imageView2/2/w/1240)]

传统方式实现数据列表呈现
[外链图片转存失败(img-ZGMi83kB-1563690800889)(https://upload-images.jianshu.io/upload_images/11158618-b488273f7a6a4d90.png?imageMogr2/auto-orient/strip|imageView2/2/w/1240)]

[外链图片转存失败(img-gxIYPbJe-1563690800892)(https://upload-images.jianshu.io/upload_images/11158618-7ac2a8e2422e85ea.png?imageMogr2/auto-orient/strip|imageView2/2/w/1240)]

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

下载 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

创建一个新的HTML文件
[外链图片转存失败(img-UVDyruFc-1563690800894)(https://upload-images.jianshu.io/upload_images/11158618-684bd9d5d860ccaa.png?imageMogr2/auto-orient/strip|imageView2/2/w/1240)]

HTML 页面中 ng-xxx 的属性称之为指令
ng-app 指令告诉 AngularJS，

元素是 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（上下文模型） 视图和控制器之间的桥梁 用于在视图和控制器之间传递数据 利用$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方法创建一个公用的service
var 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（控制器，控制逻辑）
[外链图片转存失败(img-N8IwiIAh-1563690800895)(https://upload-images.jianshu.io/upload_images/11158618-610f34fe5d36d11d.png?imageMogr2/auto-orient/strip|imageView2/2/w/1240)]
AngularJS实现了双向数据绑定

---

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

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

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

[外链图片转存失败(img-srRjojvx-1563690800898)(https://upload-images.jianshu.io/upload_images/11158618-9ab0d3fef85d80ce?imageMogr2/auto-orient/strip|imageView2/2/w/1240)]