【AngularJS】 1. Angular JS的五大特性_item[attrname]这是用的angular.js的什么特性-程序员宅基地

技术标签: AngularJS  【WEB】  


AngularJS是由Google创建的一种JS框架,使用它可以扩展应用程序中的HTML词汇,从而在web应用程序中使用HTML声明动态内容。

AngularJS可以让你扩展HTML的语法,以便清晰、简洁地表示应用程序中的组件,并允许将标准的HTML作为你的模板语言,AngularJS可以通过双向数据绑定自动从拥有JavaScript对 象(模型)的UI(视图)中同步数据。


特性一:双向数据绑定

        数据绑定可能是AngularJS最酷最实用的特性。它能够帮助你避免书写大量的初始代码从而节约开发时间。一个典型的web应用可能包含了80%的代码用来处理,查询和监听DOM。数据绑定是的代码更少,你可以专注于你的应用。

        我们想象一下Model是你的应用中的简单事实。你的Model是你用来读取或者更新的部分。数据绑定指令提供了你的Model投射到view的方法。这些投射可以无缝的,毫不影响的应用到web应用中。

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

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

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

<!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 ng-app>
2、这行载入AngularJS脚本:

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

<input type="text" ng-model="yourName" placeholder="Enter a name here">
4、最后,标签中的正文是应用的模板,在UI中显示我们的问候语:

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

    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>

特性三: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会侦测并且提供给你:

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

特性五:Directives(指令)

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

        指令可以用来创建自定义的标签。它们可以用来装饰元素或者操作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>'
    };
});

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

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


额外的特性:测试

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

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

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

一但你运行这个项目,你可以看到如下输出:





参考资料

http://www.gbin1.com/technology/javascript/20120717-AugularJS-features/

http://docs.angularjs.org/tutorial/index

http://gbin1.com/gb/share/262.htm

http://www.ituring.com.cn/article/13471


AngularJS的官方网站上给出了这个框架的基本使用方法,如:

  • 如何引入AugularJS,从而让你的web应用使用该框架
  • 如何添加控件,并对其进行数据绑定
  • 如何进行表单验证
  • 如何与服务器通信
  • 如何创建可重用的组件
  • 如何对组件进行本地化
  • 如何让应用可嵌入、可注入和可测试

另外,网站上还给出了一系列教程,跟随这些内容,我们可以从深入浅出地逐渐对AngularJS的各种特性和用法有很好的了解,进而很好地开始使用这一框架。




版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/vking_wang/article/details/8817232

智能推荐

python课程介绍-少儿Python编程课程的具体介绍-程序员宅基地

文章浏览阅读2.9k次。以下是少儿Python编程课程的具体介绍,可供参考:1.1.Python简介Python是一种计算机程序设计语言。是一种动态的、面向对象的脚本语言,初被设计用于编写自动化脚本(shell),随着版本的不断更新和语言新功能的添加,越来越多被用于独立的、大型项目的开发。1989年圣诞节期间,在阿姆斯特丹,Guido为了打发圣诞节的无趣,决心开发一个新的脚本解释程序,作为ABC语言(ABC是由Guido..._少儿编程python课程简述

详解在Java中写JS代码-程序员宅基地

文章浏览阅读4.5k次。1.项目实战response.setCharacterEncoding("gbk"); PrintWriter out=response.getWriter();out.print("&lt;script&gt;top.location.reload();&lt;/script&gt;");out.flush();2.关闭本页面,跳转到百度response.setChara..._java中写js代码

HTML5利用Canvas绘制图形(Canvas基本知识、绘制矩形、使用路径和图形组合)_canvas组态-程序员宅基地

文章浏览阅读2.3k次。绘制图形有很多方法,可以借助Flash实现,也可以使用SVG和VML来绘图。本次将要学习一种新的灰土方法——使用Canvas元素,它是基于HTML5原生的绘图功能。使用Canvas元素,可以绘制图形,也可以实现动画。它方便了使用JavaScript脚本的前端开发人员,寥寥数行代码,就可以在Canvas元素中实现各种图像及动画。Canvas基本知识构建Canvas元素非常简单你的浏览_canvas组态

CUDA 块同步,线程同步_cuda线程同步-程序员宅基地

文章浏览阅读1.6k次。Block同步WAIT_FOR_THE_FINAL_BLOCK自定义#define WAIT_FOR_THE_FINAL_BLOCK \do { \ __threadfence(); \ __shared__ int value; \ if (threadIdx.x + threadIdx.y == 0) value = 1 + atomicAdd(d_sync_buffer + sync_buffer_id, 1); \ __syncthreads(); \ if (value <_cuda线程同步

springBoot静态资源访问优先级_为什么springboot 静态资源 static 优先级高于resource-程序员宅基地

文章浏览阅读579次。springBoot静态资源访问优先级默认文件夹只有static,优先级最高的是resources>static>config就是访问同个文件最先访问resources下的资源_为什么springboot 静态资源 static 优先级高于resource

Python下的pip的安装源的切换_downloading bitsandbytes-0.35.0-py3-none-any.whl (-程序员宅基地

文章浏览阅读7.3k次,点赞3次,收藏7次。引言: pip是python中非常方便易用的安装包管理器,但是在实际安装中,却是非常的慢,该如何解决呢?_downloading bitsandbytes-0.35.0-py3-none-any.whl (62.5 mb)

随便推点

一看这着装就是程序员-程序员宅基地

文章浏览阅读258次。是什么力量,让任何地方的程序员都享有「免于体面的自由」? 在今天的社会里,工程师往往代表着知识水平和社会地位。每当普通人听到这个头衔,总会报之以敬仰的目光: 但有一种工程师,虽然也是如假包换的高级技术人员,却很少能享受到和同类相近的社交待遇:程序员。 ..._程序员打扮 朋友圈热文

java泛型边界_Java泛型中的上下边界的理解-程序员宅基地

文章浏览阅读484次。用 extends 父类型>标识上边界通配符,用于表示实例化时可以确定父类型的未知类型用 super 子类型>标识下边界通配符,用于表示实例化时可以确定子类型的未知类型例子public class JavaPromgramer extends Promgramerpublic class Promgramer extends ITWorkerpublic class ITWorker ..._java泛型上下边界

linux 下实现VNC显示图形界面 开机自动启动-程序员宅基地

文章浏览阅读1.2k次。一般linux都内置了VNC软件,除非你安装时候没选上默认的选项,在liunx 启动vncserver非常简单,只要在shell输入: vncserver ,然后输入密码就可以了通过其他电脑在shell输入:vncviewer启动vncviewer客户端,然后输入IP,例如:192.168.1.112:1 来远程控制了,但默认是没有图形界面的并且不能向其他软件直接通过chkconfig 来..._linux只在vnc时才显示面板

在UEFI模式下,linux误删EFI分区后,重新恢复引导_gpt detected. please create a bios-boot partition -程序员宅基地

文章浏览阅读9.6k次,点赞4次,收藏9次。遇到上面情况,我们通常使用boot-repair修复引导。但是这时会弹出一个错误:GPT detected. Please create a BIOS-Boot partition遇到这个情况以后,我就疯狂百度资料,一直在找现成的解决方案,但是都不是没有解决问题的方案。这个期间我大概花了我半天的时间在检索资料,之后由于实在找不到资料。我只能冷静地分析这个错误,"Please creat..._gpt detected. please create a bios-boot partition (>1mb, unformatted filesys

2018面试_.net面试题2018-程序员宅基地

文章浏览阅读562次。今年找工作,前前后后找了一个多月,总结了下.NET常见的面试题。(答案会逐步完善)1、简述private、protected、public、internal修饰符的访问权限,override与重载的区别。2、详述.NET里class和struct的异同?3、.net中读写数据库需要用到哪些类?它们的作用?请尽可能全的列举出所有数据库的类型。4、阐述下.net中ref和out的区别的各自的作用。5、..._.net面试题2018

二进制 八进制 十进制互转_逢二进一,十进制1等于二进制1,十进制2等于二进制10,8等于-程序员宅基地

文章浏览阅读359次。二进制 八进制 十进制互转1. 进制介绍:二进制:逢2进1八进制:逢8进1十进制:逢10进1十六进制:逢16进1注意:在电子设备中,数据的存储最小单位是字节。表示方法:1个字节 = 8个比特位2. Java中把数据共计划分成2大类型:1)引用数据类型:它表示是数组 、 类 、接口等2)基本数据类型:对基本的数据进行的类型划分:整数:由于整数有非常大的数据,也有非常小的数据。于是把整数类型又区分成4种:byte 、 short 、 int 、 long小数:float(单精度)_逢二进一,十进制1等于二进制1,十进制2等于二进制10,8等于