• 初识AngularJS


    AngularJS是一个新出现的强大客户端技术,提供给大家的一种开发强大应用的方式。这种方式利用并且扩展HTML,CSS和javascript,并且弥补了它们的一些非常明显的不足。本应该使用HTML来实现而现在由它开发的动态一些内容。Angular.js是google开发者设计和开发的一套前端开发框架,帮助简化前端开发的负担。

    AngularJS 是一个为动态WEB应用设计的结构框架。它能让你使用HTML作为模板语言,通过扩展HTML的语法,让你能更清楚、简洁地构建你的应用组件。它的创新点在于,利用 数据绑定依赖注入,它使你不用再写大量的代码了。这些全都是通过浏览器端的Javascript实现,这也使得它能够完美地和任何服务器端技术结合。

    AngularJS是为了克服HTML在构建应用上的不足而设计的。HTML是一门很好的为静态文本展示设计的声明式语言,但要构建WEB应用的话它就显得乏力了。所以我做了一些工作(你也可以觉得是小花招)来让浏览器做我想要的事。

    通常,我们是通过以下技术来解决静态网页技术在构建动态应用上的不足:

    • 类库 - 类库是一些函数的集合,它能帮助你写WEB应用。起主导作用的是你的代码,由你来决定何时使用类库。类库有:jQuery
    • 框架 - 框架是一种特殊的、已经实现了的WEB应用,你只需要对它填充具体的业务逻辑。这里框架是起主导作用的,由它来根据具体的应用逻辑来调用你的代码。框架有:knockoutsproutcore等。

    AngularJS使用了不同的方法,它尝试去补足HTML本身在构建应用方面的缺陷。AngularJS通过使用我们称为标识符(directives)的结构,让浏览器能够识别新的语法。例如:

    • 使用双大括号{{}}语法进行数据绑定;
    • 使用DOM控制结构来实现迭代或者隐藏DOM片段;
    • 支持表单和表单的验证;
    • 能将逻辑代码关联到相关的DOM元素上;
    • 能将HTML分组成可重用的组件。

    一、一个简单的AngularJS实例

    下面是一个包含了一个表单的典型CRUD应用。表单值先经过验证,然后用来计算总值,这个总值会被格式化成本地的样式。下面有一些开发者常见的概念,你需要先了解一下:

    • 数据模型(data-model)关联到视图(UI)上;
    • 写、读、验证用户的输入;
    • 根据模型计算新的值;
    • 将输出格式本地化。
    <!doctype html>
    <html ng-app>
        <head>
            <script src="http://code.angularjs.org/angular-1.0.1.min.js"></script>
        </head>
        <body>
            Your name: <input type="text" ng-model="yourname" placeholder="World">
            <hr>
            Hello {{yourname || 'World'}}!
        </body>
    </html>
    • ng-app 标识符标明这是一个AngularJS应用。这个`ng-app`标识符会使AngularJS**自动初始化**(auto initialize)你的应用
    • 文本输入指令<input ng-model="yourname" />绑定到一个叫yourname的模型变量。
    • 双大括号标记将yourname模型变量添加到问候语文本。
    • 你不需要为该应用另外注册一个事件侦听器或添加事件处理程序!

    现在试着在输入框中键入您的名称,您键入的名称将立即更新显示在问候语中。 这就是AngularJS双向数据绑定的概念。 输入框的任何更改会立即反映到模型变量(一个方向),模型变量的任何更改都会立即反映到问候语文本中(另一方向)

    AngularJS应用程序的三个组成部分,并解释它们如何映射到模型-视图-控制器设计模式:

    • 模板(Templates):模板是您用HTML和CSS编写的文件,展现应用的视图。 您可给HTML添加新的元素、属性标记,作为AngularJS编译器的指令。 AngularJS编译器是完全可扩展的,这意味着通过AngularJS您可以在HTML中构建您自己的HTML标记!
    • 应用程序逻辑(Logic)和行为(Behavior):应用程序逻辑和行为是您用JavaScript定义的控制器。AngularJS与标准AJAX应用程序不同,您不需要另外编写侦听器或DOM控制器,因为它们已经内置到AngularJS中了。这些功能使您的应用程序逻辑很容易编写、测试、维护和理解。
    • 模型数据(Data):模型是从AngularJS作用域对象的属性引申的。模型中的数据可能是Javascript对象、数组或基本类型,这都不重要,重要的是,他们都属于AngularJS作用域对象

    二、五个超酷特性

    1. 双向的数据绑定

    传 统来说,当model变化了。 开发人员需要手动处理DOM元素并且将属性反映到这些变化中。这个一个双向的过程。一方面,model变化驱动了DOM中元素变化,另一方面,DOM元素 的变化也会影响到Model。这个在用户互动中更加复杂,因为开发人员需要处理和解析这些互动,然后融合到一个model中,并且更新View。这是一个 手动的复杂过程,当一个应用非常庞大的时候,将会是一件非常费劲的事情。

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

    2. 模板

    在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模板,如下:

    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>
    View Code

    3. MVVM

    针对客户端应用开发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处理布局和互动。

    4. 依赖注入(Dependency Injection,即DI)

    AngularJS拥有内建的依赖注入子系统,可以帮助开发人员更容易的开发,理解和测试应用。DI允许你请求你的依赖,而不是自己找寻它们。比如,我们需要一个东西,DI负责找创建并且提供给我们。为了而得到核心的AngularJS服务,只需要添加一个简单服务作为参数,AngularJS会侦测并且提供给你:

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

    也可以定义自己的服务并且让它们注入:

    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']; 
    View Code

    5. Directives(指令)

    指令可以用来创建自定义的标签。它们可以用来装饰元素或者操作DOM属性。这里是一个例子,它监听一个事件并且针对的更新它的$scope ,如下:

    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>'
        };
    });
    View Code

    然后,你可以使用这个自定义的directive来使用:

    <my-component ng-model="message"></my-component> 

    额外的特性:测试

    AngularJS内含了测试用例可以帮助你更方便的执行测试。JS是一个动态的解析性语言,而不是编译类型的,因此非常的难写测试。

    AngularJS被开成一个可测试的框架。它甚至包含了点对点的单元测试runner。如果你喜欢这个特性,看看这个项目:https://github.com/angular/angular-seed

     参考:

    • AngularJS中文社区
    • http://www.angularjs.cn/A002
    • http://developer.51cto.com/art/201302/380661.htm
    • http://www.gbin1.com/technology/javascript/20120717-AugularJS-features/
  • 相关阅读:
    括号序列
    乘积最大
    装箱问题
    开心的金明
    金明的预算方案(有依赖的背包问题)
    砝码称重
    (枚举)算法竞赛入门经典(7.1.2)最大乘积
    (枚举)算法竞赛入门经典(7.1.1)除法
    Zabbix历史数据清理
    sonarqube6.7.1使用
  • 原文地址:https://www.cnblogs.com/JoannaQ/p/3325571.html
Copyright © 2020-2023  润新知