初识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.p_w_picpaths = [
            {"p_w_picpath":"img/p_w_picpath_01.png", "description":"Image 01 description"},
            {"p_w_picpath":"img/p_w_picpath_02.png", "description":"Image 02 description"},
            {"p_w_picpath":"img/p_w_picpath_03.png", "description":"Image 03 description"},
            {"p_w_picpath":"img/p_w_picpath_04.png", "description":"Image 04 description"},
            {"p_w_picpath":"img/p_w_picpath_05.png", "description":"Image 05 description"}
        ];
}]); 
 <div ng-controller="'ctrl'">
      <ul>
        <li ng-repeat="p_w_picpath in p_w_picpaths">
          <img ng-src="`p_w_picpath`.`thumbnail`" alt="`p_w_picpath`.`description`">
        </li>
      </ul>
    </div>

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

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

特性三：MVC

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

特性四：依赖注入（Dependency Injection，即DI）

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

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

特性五：Directives（指令）

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

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

创新互联www.cdcxhl.cn，专业提供香港、美国云服务器，动态BGP最优骨干路由自动选择，持续稳定高效的网络助力业务部署。公司持有工信部办法的idc、isp许可证，机房独有T级流量清洗系统配攻击溯源，准确进行流量调度，确保服务器高可用性。佳节活动现已开启，新人活动云服务器买多久送多久。

当前文章：初识angular体验(三)-创新互联
文章网址：https://www.cdcxhl.com/article40/csggeo.html

成都网站建设公司_创新互联，为您提供网站制作、建站公司、小程序开发、网站改版、网站收录、网页设计公司

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源：创新互联

猜你还喜欢下面的内容