码迷,mamicode.com
首页 > 其他好文 > 详细

初识angular体验(三)

时间:2017-04-05 18:25:33      阅读:149      评论:0      收藏:0      [点我收藏+]

标签:angularjs   web   前端   

  哈喽,大家好,不知不觉又过了一个星期,感觉一周一周过得好快啊,上周的分享我们说到了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知识点和注意事项,让我们这些零基础的朋友们,能够快速进步!!!

本文出自 “学习改变命运” 博客,请务必保留此出处http://itzhongxin.blog.51cto.com/12734415/1913024

初识angular体验(三)

标签:angularjs   web   前端   

原文地址:http://itzhongxin.blog.51cto.com/12734415/1913024

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!