[AngularJS] 1. Angular JS的五大特性

最新推荐文章于 2021-08-11 10:52:18 发布

七夕小娜

最新推荐文章于 2021-08-11 10:52:18 发布

阅读量2.1k

点赞数

CC 4.0 BY-SA版权

分类专栏： angularJS 文章标签： angularJS 框架选择

本文链接：https://blog.youkuaiyun.com/qian_xiaona/article/details/51014214

angularJS 专栏收录该内容

22 篇文章

订阅专栏

本文介绍了AngularJS框架的主要特点，包括双向数据绑定、模板、MVC架构、依赖注入和指令等核心概念。并通过实例展示了如何使用AngularJS进行单一页面应用程序(SPA)的开发。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

由于公司一开始就使用的angularjs框架，因此没有深入考虑过为什么使用这个框架，由于一次偶然被问到引起了我的好奇，故此做如下总结

AngularJs概述：

AngularJs所有的操作思路都以“业务数据”为关注点，彻底颠覆了传统的DOM操作。并不是所有的应用都适合用AngularJS来做。AngularJS主要考虑的是构建数据的CRUD(增删改查)操作为主的SPA应用。幸运的是，至少90%的WEB应用都是CRUD应用。但是要了解什么适合用AngularJS构建，就得了解什么不适合用AngularJS构建。

如游戏，图形界面编辑器，这种DOM操作很频繁也很复杂的应用，和CRUD应用就有很大的不同，它们不适合用AngularJS来构建。像这种情况用一些更轻量、简单的技术如jQuery可能会更好。

AngularJS 使得开发现代的单一页面应用程序（SPAs：Single Page Applications）变得更加容易。

AngularJS 把应用程序数据绑定到 HTML 元素。
AngularJS 可以克隆和重复 HTML 元素。
AngularJS 可以隐藏和显示 HTML 元素。
AngularJS 可以在 HTML 元素"背后"添加代码。
AngularJS 支持输入验证。
特性一：双向数据绑定

数据绑定可能是AngularJS最酷最实用的特性。它能够帮助你避免书写大量的初始代码从而节约开发时间。一个典型的web应用可能包含了80%的代码用来处理，查询和监听DOM。数据绑定是的代码更少，你可以专注于你的应用。我们想象一下Model是你的应用中的简单事实。你的Model是你用来读取或者更新的部分。数据绑定指令提供了你的Model投射到view的方法。这些投射可以无缝的，毫不影响的应用到web应用中。

这里肯定有更好的解决方案！那就是AngularJS的双向数据绑定，能够同步DOM和Model等等。

这里有一个非常简单的例子，用来演示一个input输入框和<h1>元素的双向绑定：

[html]

<!doctype html>
<html ng-app>
<head>
    <script src="http://code.angularjs.org/angular-1.0.0rc10.min.js"></script>
</head>
<body>
    <div>
      <label>Name:</label>
      <input type="text" ng-model="yourName" placeholder="Enter a name here">
      <hr>
      <h1>Hello, {{yourName || 'World'}}!</h1>
    </div>
</body>
</html>

1、标记ng-app告诉AngularJS处理整个HTML页并引导应用：

[html]
<html ng-app>

2、这行载入AngularJS脚本：

[html]
<script src="...angular.js"></script>

3、本输入指令<input ng-model="yourname" />绑定到一个叫yourname的模型变量：

[html]
<input type="text" ng-model="yourName" placeholder="Enter a name here">

4、最后，标签中的正文是应用的模板，在UI中显示我们的问候语：

[html]
<h1>Hello, {{yourName || 'World'}}!</h1>

<h1>Hello, {{yourName || 'World'}}!</h1>注意，使用双大括号标记{{}}的内容是问候语中绑定的表达式

特性二：模板

在AngularJS中，一个模板就是一个HTML文件。但是HTML的内容扩展了，包含了很多帮助你映射model到view的内容。

>> HTML模板将会被浏览器解析到DOM中。

>>DOM然后成为AngularJS编译器的输入。

>>AngularJS将会遍历DOM模板来生成一些指导，即，directive（指令）。

>>所有的指令都负责针对view来设置数据绑定。

我们要理解AuguarJS并不把模板当做String来操作。输入AngularJS的是DOM而非string。数据绑定是DOM变化，不是字符串的连接或者innerHTML变化。使用DOM作为输入，而不是字符串，是AngularJS区别于其它的框架的最大原因。使用DOM允许你扩展指令词汇并且可以创建你自己的指令，甚至开发可重用的组件。

最大的好处是为设计师和开发者创建了一个紧密的工作流。设计师可以像往常一样开发标签，然后开发者拿过来添加上功能，通过数据绑定将会使得这个过程非常简单。

这里有一个例子，我们使用ng-repeat指令来循环图片数组并且加入img模板，如下：

[javascript]
function AlbumCtrl($scope) {
    scope.images = [
        {"image":"img/image_01.png", "description":"Image 01 description"},
        {"image":"img/image_02.png", "description":"Image 02 description"},
        {"image":"img/image_03.png", "description":"Image 03 description"},
        {"image":"img/image_04.png", "description":"Image 04 description"},
        {"image":"img/image_05.png", "description":"Image 05 description"}
    ];
}
<div ng-controller="AlbumCtrl">
<ul>
    <li ng-repeat="image in images">
      <img ng-src="{{image.thumbnail}}" alt="{{image.description}}">
    </li>
</ul>
</div>

    function AlbumCtrl($scope) {
        scope.images = [
            {"image":"img/image_01.png", "description":"Image 01 description"},
            {"image":"img/image_02.png", "description":"Image 02 description"},
            {"image":"img/image_03.png", "description":"Image 03 description"},
            {"image":"img/image_04.png", "description":"Image 04 description"},
            {"image":"img/image_05.png", "description":"Image 05 description"}
        ];
    }

特性三：MVC

针对客户端应用开发AngularJS吸收了传统的MVC基本原则。MVC或者Model-View-Controll设计模式针对不同的人可能意味不同的东西。AngularJS并不执行传统意义上的MVC，更接近于MVVM（Moodel-View-ViewModel）。

Model:model是应用中的简单数据。一般是简单的javascript对象。这里没有必要继承框架的classes，使用proxy对象封装或者使用特别的setter/getter方法来访问。事实上我们处理vanilla javascript的方法就是一个非常好的特性，这种方法使得我们更少使用应用的原型。

ViewModel:viewmodel是一个用来提供特别数据和方法从而维护指定view的对象。

viewmodel是$scope的对象，只存在于AnguarJS的应用中。$scope只是一个简单的js对象，这个对象使用简单的API来侦测和广播状态变化。

Controller:controller负责设置初始状态和参数化$scope方法用以控制行为。需要指出的controller并不保存状态也不和远程服务互动。

View:view是AngularJS解析后渲染和绑定后生成的HTML 。这个部分帮助你创建web应用的架构。$scope拥有一个针对数据的参考，controller定义行为，view处理布局和互动。

特性四：依赖注入（Dependency Injection，DI）
AngularJS拥有内建的依赖注入子系统，可以帮助开发人员更容易的开发，理解和测试应用。

DI允许你请求你的依赖，而不是自己找寻它们。比如，我们需要一个东西，DI负责找创建并且提供给我们。

为了而得到核心的AngularJS服务，只需要添加一个简单服务作为参数，AngularJS会侦测并且提供给你：

[javascript]
function EditCtrl($scope, $location, $routeParams) {
// Something clever here...
}

function EditCtrl($scope, $location, $routeParams) {
// Something clever here...
} 你也可以定义自己的服务并且让它们注入：

[javascript]
angular.
    module('MyServiceModule', []).
    factory('notify', ['$window', function (win) {
    return function (msg) {
        win.alert(msg);
    };
}]);

function myController(scope, notifyService) {
    scope.callNotify = function (msg) {
        notifyService(msg);
    };
}

myController.$inject = ['$scope', 'notify'];

angular.
    module('MyServiceModule', []).
    factory('notify', ['$window', function (win) {
    return function (msg) {
        win.alert(msg);
    };
}]);

function myController(scope, notifyService) {
    scope.callNotify = function (msg) {
        notifyService(msg);
    };
}

myController.$inject = ['$scope', 'notify'];

特性五：Directives（指令）

你是不是也希望浏览器可以做点儿有意思的事情？那么AngularJS可以做到。

指令可以用来创建自定义的标签。它们可以用来装饰元素或者操作DOM属性。

这里是一个例子，它监听一个事件并且针对的更新它的$scope ，如下：

[javascript]
myModule.directive('myComponent', function(mySharedService) {
    return {
        restrict: 'E',
        controller: function($scope, $attrs, mySharedService) {
            $scope.$on('handleBroadcast', function() {
                $scope.message = 'Directive: ' + mySharedService.message;
            });
        },
        replace: true,
        template: '<input>'
    };
});

然后，你可以使用这个自定义的directive：

[javascript]
<my-component ng-model="message"></my-component>

<my-component ng-model="message"></my-component>使用一系列的组件来创建你自己的应用将会让你更方便的添加，删除和更新功能。

额外的特性：测试

AngularJS内含了测试用例可以帮助你更方便的执行测试。为什么不用呢？

JS是一个动态的解析性语言，而不是编译类型的，因此非常的难写测试。

AngularJS被开成一个可测试的框架。它甚至包含了点对点的单元测试runner。如果你喜欢这个特性，我测试的时候用的是chrome的一个插件Batarang 。