初识angular体验(三)

  哈喽,大家好,不知不觉又过了一个星期,感觉一周一周过得好快啊,上周的分享我们说到了angular的一个主要的特性——双向数据绑定,这周呢,我会把其他特性以代码的形式给大家介绍!!

  特性二:模板

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

  HTML模板将会被浏览器解析到DOM中。DOM然后成为AngularJS编译器的输入。AngularJS将会遍历DOM模板来生成一些指导,即,directive(指令)。所有的指令都负责针对view来设置数据绑定。

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

var m= angular.module(‘hd‘,[]);
        m.controller(‘ctrl‘,[‘$scope‘,function($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="‘ctrl‘">
      <ul>
        <li ng-repeat="image in images">
          <img ng-src="{{image.thumbnail}}" alt="{{image.description}}">
        </li>
      </ul>
    </div>

  以上代码就是通过遍历scope.images 的数据把img一一通过li输出,这就是一个模板。

  当然,真正的项目的数据都是通过接口去读取的,在这里我只能以假的数据来定义!

  特性三:MVC

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

  特性四:依赖注入(Dependency Injection,即DI)

  AngularJS拥有内建的依赖注入子系统,可以帮助开发人员更容易的开发,理解和测试应用。

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

  特性五:Directives(指令)

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

  好啦,以上就是这周分享的内容,下周开始我会以节的形式给大家分享angular知识点和注意事项,让我们这些零基础的朋友们,能够快速进步!!!

时间: 2024-10-13 09:49:42

初识angular体验(三)的相关文章

初识angular体验(五)

大家好,好久不见啦,不知道朋友们这段时间学习的怎样了?都有没有提高呢?本人这期间基本把angular基础教程都看了一遍,感觉受益匪浅. 今天给大家说的是一个小知识点--全局变量,所谓全局变量懂JS的人都会明白,但是在angular里如何使用呢?让我们继续往下看. 在angualr里设置全局变量有2个函数,是以定义服务的形式注入进去的,constant()和value(),下面我看来看代码: <div ng-controller="myCtrl1">             

初识angular体验(四)

亲们,大家好,又到了我们angular每周分享的时间啦,从这周开始呢我准备把angular的基础知识给大家讲解下,欢迎大家随时留言,一起讨论问题! 首先给大家介绍下双向数据绑定,angular的数据绑定是数据模型(model)与视图(view)组件的自动同步.angular的实现方式允许你把应用中的模型看成单一数据源.而视图始终是数据模型的一种展现形式.当模型改变时,视图就能反映这种改变,反之亦然. 下面我们先来看一段代码: <div ng-app="hd" ng-control

初识angular体验(二)

不知不觉过了一周了,这期间本人也学习了几章angular的实例教程,上次的分享我说到了angular的好处以及我们为什么要用angular.今天我们来说下究竟什么时候用angular是最好的以及举一些简单的小例子. angular是一个MVC框架,最适于开发客户端的单页面应用.它不是个功能库,而是用来开发动态网页的框架.它专注于扩展HTML的功能,提供动态数据绑定,而且它能跟其它框架(如jQuery)合作融洽. 如果你要开发的是单页应用,angular就是你的上上之选.Gmail.Google 

初识angular体验(一)

很久之前就听说了这个前端框架,但是由于自己工作一直没有涉及到相关知识,因此也没有进行学习.这次趁机借着项目需要正好学习AngularJS,顺便复习一下前端的相关知识. Angular是Google的优秀的前端框架,目前已经应用于多个产品. 通过在云课堂的初步学习,简单的了解了下它的使用方法,并且了解了它和jquery的相关区别以及简单的应用,下面听俺一一道来!!!! Angular是一个对前端数据处理的一个JS库,最为核心的是MVVM,模块化,自动化双向数据绑定,语义标签化,依赖注入等. 至于为

初识云计算的三种服务模式 (IaaS SaaS PaaS)

最近公司在使用其他云服务的同时,要封装自己的云服务,下面作为开发产品前的热身,来了解云计算中的三种服务模式,笔者也是从网络上查找,进行综合总结.请拍.. 三种服务模式 根据现在最常用,也就是比较权威的NIST(National Institute of Standard and Technology)美国国家标准技术研究院定义,云计算主要分为三种服务模式,而且这三层的分法重要是从用户体验的角度出发的: IaaS IaaS全拼是Infrastructure as a Service,基础设置即服务

Swift初体验(三)

/*******************************************************************************/ // 协议 protocol Description{ func description() -> String mutating func aMutatingMethod() class func aTypeMethod() // func anOptionalMethod() } // 如果要声明可选择实现的方法,需要在func前

javascript数据结构和算法 第一章(编程体验)三

变量作用域 变量作用域就是指在一个程序中,变量的值在哪里可以被获取到.javascript函数作用域被定义为函数作用域,这意味着变量的值在定义和声明该变量的函数,包括任何在该函数的嵌套函数里是可见的. 当一个变量定义在函数的外面,在主程序中,该变量将会拥有全局作用域.这就意味着它的值可以被程序的任何地方,包括函数获取. 下面的小程序演示全局变量时如何工作的. function showScope() { return scope; } var scope = "global"; pri

capwap学习笔记&mdash;&mdash;初识capwap(三)

2.5.6 CAPWAP状态机详解 2.5.6.1 Start to Idle 这个状态变迁发生在设备初始化完成. ¢  WTP: 开启CAPWAP状态机. ¢  AC:  开启CAPWAP状态机. 2.5.6.2 Idle to Discovery 这个状态变迁发生是为了支持CAPWAP发现进程. ¢   WTP: WTP进入发现状态是为了优先去传输第一个Discovery Request message.在进入这个状态之前,WTP设置发现DiscoveryInterval timer,将Di

初识angular.js之爱恨情仇

angular.js Angular.JS 是一组用来开发Web页面的框架.模板以及数据绑定和丰富UI组件.它支持整个开发进程,提供web应用的架构,无需进行手工DOM操作. AngularJS很小,只有60K,兼容主流浏览器,与 jQuery 配合良好. 简单概括:MV*模型的js框架 angular.js之爱恨情仇 爱恋之际 MV*模式 职责清晰.层次分明,例如页面样式变化仅改变View代码,其它层次结构代码无需改动. 数据绑定 数据视图绑定(单.双向数据绑定),无需反锁的改变DOM的值或修