（4）Angular的开发

绝地灬酷狼 2021-09-30 01:38 268阅读 0赞

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

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

[http://www.cnblogs.com/powertoolsteam/p/angularjs-introdection.html][http_www.cnblogs.com_powertoolsteam_p_angularjs-introdection.html]  
[http://www.apjs.net/][http_www.apjs.net]  
[http://www.angularjs.cn/][http_www.angularjs.cn]  
[http://docs.angularjs.cn/api][http_docs.angularjs.cn_api]  
[https://material.angularjs.org][https_material.angularjs.org]  
[http://angular-ui.github.io/][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][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][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][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][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][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][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][https_github.com_angular_angular.js_releases]  
使用 CDN 上的 Angular.js  
[http://apps.bdimg.com/libs/angular.js/1.4.9/angular.min.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][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);

s c o p e （ 上 下 文 模 型 ） 视 图 和 控 制 器 之 间 的 桥 梁 用 于 在 视 图 和 控 制 器 之 间 传 递 数 据 利 用 scope（上下文模型） 视图和控制器之间的桥梁 用于在视图和控制器之间传递数据 利用 scope（上下文模型）视图和控制器之间的桥梁用于在视图和控制器之间传递数据利用scope暴露数据模型（数据，行为）

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

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

<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 指令

<img src="{
       {item.url}}">
    
    <img ng-src="{
       {item.url}}">

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

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方法创建一个服务：

$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][https_upload-images.jianshu.io_upload_images_11158618-610f34fe5d36d11d.png_imageMogr2_auto-orient_strip_imageView2_2_w_1240])\]  
AngularJS实现了双向数据绑定

--------------------

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

### 欢迎关注[达叔小生][Link 1]的简书！ ###

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

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

[http_www.cnblogs.com_powertoolsteam_p_angularjs-introdection.html]: http://www.cnblogs.com/powertoolsteam/p/angularjs-introdection.html
[http_www.apjs.net]: http://www.apjs.net/
[http_www.angularjs.cn]: http://www.angularjs.cn/
[http_docs.angularjs.cn_api]: http://docs.angularjs.cn/api
[https_material.angularjs.org]: https://material.angularjs.org
[http_angular-ui.github.io]: http://angular-ui.github.io/
[https_upload-images.jianshu.io_upload_images_11158618-3f278ee6f6c7fc61.png_imageMogr2_auto-orient_strip_imageView2_2_w_1240]: https://upload-images.jianshu.io/upload_images/11158618-3f278ee6f6c7fc61.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240
[https_upload-images.jianshu.io_upload_images_11158618-3a2e50c85d2e7d98.png_imageMogr2_auto-orient_strip_imageView2_2_w_1240]: https://upload-images.jianshu.io/upload_images/11158618-3a2e50c85d2e7d98.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240
[https_upload-images.jianshu.io_upload_images_11158618-69a14966afc61656.png_imageMogr2_auto-orient_strip_imageView2_2_w_1240]: https://upload-images.jianshu.io/upload_images/11158618-69a14966afc61656.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240
[https_upload-images.jianshu.io_upload_images_11158618-5ea12ec8859bd400.png_imageMogr2_auto-orient_strip_imageView2_2_w_1240]: https://upload-images.jianshu.io/upload_images/11158618-5ea12ec8859bd400.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240
[https_upload-images.jianshu.io_upload_images_11158618-b488273f7a6a4d90.png_imageMogr2_auto-orient_strip_imageView2_2_w_1240]: https://upload-images.jianshu.io/upload_images/11158618-b488273f7a6a4d90.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240
[https_upload-images.jianshu.io_upload_images_11158618-7ac2a8e2422e85ea.png_imageMogr2_auto-orient_strip_imageView2_2_w_1240]: https://upload-images.jianshu.io/upload_images/11158618-7ac2a8e2422e85ea.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240
[https_github.com_angular_angular.js_releases]: https://github.com/angular/angular.js/releases
[http_apps.bdimg.com_libs_angular.js_1.4.9_angular.min.js]: http://apps.bdimg.com/libs/angular.js/1.4.9/angular.min.js
[https_upload-images.jianshu.io_upload_images_11158618-684bd9d5d860ccaa.png_imageMogr2_auto-orient_strip_imageView2_2_w_1240]: https://upload-images.jianshu.io/upload_images/11158618-684bd9d5d860ccaa.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240
[https_upload-images.jianshu.io_upload_images_11158618-610f34fe5d36d11d.png_imageMogr2_auto-orient_strip_imageView2_2_w_1240]: https://upload-images.jianshu.io/upload_images/11158618-610f34fe5d36d11d.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240
[Link 1]: https://www.jianshu.com/u/c785ece603d1
[https_upload-images.jianshu.io_upload_images_11158618-9ab0d3fef85d80ce_imageMogr2_auto-orient_strip_imageView2_2_w_1240]: https://upload-images.jianshu.io/upload_images/11158618-9ab0d3fef85d80ce?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240