热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

Angularjs基本概念

angularjs前端MVC框架快速敏捷开发前

 angularjs旨在减轻使用AJAX开发应用程序的复杂度,使得程序的创建、测试、扩展和维护变得容易。下面是angularjs中的一些核心概念。


1. 客户端模板

     多页面的应用通过组装和拼接服务器上的数据来生成HTML,然后输出到浏览器。Angularjs不同于此的是,传递模板和数据到浏览器,然后在浏览器端进行组装。浏览器的角色编程了只提供模板的静态资源和模板所需要的数据。

     










hello.html








{{greeting.text}}, World





controllers.js

function HelloController($scope) {
$scope.greeting = { text: 'Hello' };
}






2. 模型  视图  控制器(MVC)

     MVC的核心概念是,在代码之间明确分离管理数据(模型),应程序逻辑(控制器),并将数据呈现给用户(视图)。在Angular应用中,视图就是DOM,控制器就是Javascript类,模型数据存储在对象属性中。



3. 数据绑定

     典型的DOM操作,都是先将数据处理完毕之后,再通过元素上设置innerHTML将结果插入到所要的DOM中。这样的工作重复性很高,还要确保界面和Javascript属性中获取到数据时正确的状态。

     而Angular中包括这中功能,仅仅声明界面的某一部分银蛇到Javascript的属性,让它们自动完成同步。



















{{greeting.text}}, World





controllers.js

function HelloController($scope) {
$scope.greeting = { text: 'Hello' };
}


input的值(用户的输入)与greeting.text绑定在一起,并及时呈现在

中。绑定是双向的,也可用通过设置$scope.greeting.text的值,并自动同步到输入框和双大括号({{}})中





4. 依赖注入

     $scope对象吧数据绑定自动通过HelloController构造函数传递给开发者,$scope并不是我们唯一需要的,还可以添加一个$location对象,如:








function HelloController($scope, $location) {
$scope.greeting = { text: 'Hello' };
// use $location for something good here...
}


通过Angular的依赖注入系统,我们能够遵循迪米特法则(最少知识原则),只关注我们最需要的部分。




5. 指令

     Angular包括一个强大的DOM转换引擎,使得开发者有能力扩展HTML语法。在之前的实例中我们看到{{}}是用绑定数据的,ng-controller是用来指定哪个控制器来服务哪个视图,ng-model将一个输入框绑定到模型部分。我们称之为HTML扩展指令。

     Angular包含很多标识符来定义视图,这些标识符可以定义常见的视图作为模板。除此之外,开发者还可以编写自己的标识符来扩展HTML模板。



购物车示例:

















Your Order













   ng-app告诉Angular管理页面的那一部分。根据需要ng-app也可以放在


   Javascript类叫做控制器,它可以管理相应页面区域中的任何东西。

   ng-repeat代表为items数组中每个元素拷贝一次该DIV中的DOM,同时设置item作为当前元素,并可在模板中使用它。
{{item.title}}
   表达式{{item.title}}检索迭代中的当前项,并将当前项的title属性值插入到DOM中

   ng-model定义输入字段和item.quantity之间的数据绑定
{{item.price | currency}}
{{item.price * item.quantity | currency}}
    单价和总价格式化成美元形式。通过Angular的currency过滤器进行美元形式的格式化。

   通过ng-repeat的迭代顺序$index,移除数据和相应的DOM(双向绑定特性)
function CartController($scope) {
   CartController 管理这购物车的逻辑,$scope 就是用来把数据绑定到界面上的元素
$scope.items = [ {title: ‘Paint pots‘, quantity: 8, price: 3.95}, {title: ‘Polka dots‘, quantity: 17, price: 12.95}, {title: ‘Pebbles‘, quantity: 5, price: 6.95} ];
   通过定义$scope.items,我们已经创建一个虚拟数据代表了用户购物车中物品集合,购物车是不能仅工作在内存中,也需要通知服务器端持久化数据。
$scope.remove = function(index) {$scope.items.splice(index, 1);};
   remove()函数能够绑定到界面上,因此我们也把它增加到$scope 中












推荐阅读
  • 本文介绍了lua语言中闭包的特性及其在模式匹配、日期处理、编译和模块化等方面的应用。lua中的闭包是严格遵循词法定界的第一类值,函数可以作为变量自由传递,也可以作为参数传递给其他函数。这些特性使得lua语言具有极大的灵活性,为程序开发带来了便利。 ... [详细]
  • 后台获取视图对应的字符串
    1.帮助类后台获取视图对应的字符串publicclassViewHelper{将View输出为字符串(注:不会执行对应的ac ... [详细]
  • 基于layUI的图片上传前预览功能的2种实现方式
    本文介绍了基于layUI的图片上传前预览功能的两种实现方式:一种是使用blob+FileReader,另一种是使用layUI自带的参数。通过选择文件后点击文件名,在页面中间弹窗内预览图片。其中,layUI自带的参数实现了图片预览功能。该功能依赖于layUI的上传模块,并使用了blob和FileReader来读取本地文件并获取图像的base64编码。点击文件名时会执行See()函数。摘要长度为169字。 ... [详细]
  • 本文介绍了使用Java实现大数乘法的分治算法,包括输入数据的处理、普通大数乘法的结果和Karatsuba大数乘法的结果。通过改变long类型可以适应不同范围的大数乘法计算。 ... [详细]
  • 本文介绍了C#中数据集DataSet对象的使用及相关方法详解,包括DataSet对象的概述、与数据关系对象的互联、Rows集合和Columns集合的组成,以及DataSet对象常用的方法之一——Merge方法的使用。通过本文的阅读,读者可以了解到DataSet对象在C#中的重要性和使用方法。 ... [详细]
  • 本文介绍了在SpringBoot中集成thymeleaf前端模版的配置步骤,包括在application.properties配置文件中添加thymeleaf的配置信息,引入thymeleaf的jar包,以及创建PageController并添加index方法。 ... [详细]
  • Voicewo在线语音识别转换jQuery插件的特点和示例
    本文介绍了一款名为Voicewo的在线语音识别转换jQuery插件,该插件具有快速、架构、风格、扩展和兼容等特点,适合在互联网应用中使用。同时还提供了一个快速示例供开发人员参考。 ... [详细]
  • 1,关于死锁的理解死锁,我们可以简单的理解为是两个线程同时使用同一资源,两个线程又得不到相应的资源而造成永无相互等待的情况。 2,模拟死锁背景介绍:我们创建一个朋友 ... [详细]
  • 《数据结构》学习笔记3——串匹配算法性能评估
    本文主要讨论串匹配算法的性能评估,包括模式匹配、字符种类数量、算法复杂度等内容。通过借助C++中的头文件和库,可以实现对串的匹配操作。其中蛮力算法的复杂度为O(m*n),通过随机取出长度为m的子串作为模式P,在文本T中进行匹配,统计平均复杂度。对于成功和失败的匹配分别进行测试,分析其平均复杂度。详情请参考相关学习资源。 ... [详细]
  • 本文介绍了指针的概念以及在函数调用时使用指针作为参数的情况。指针存放的是变量的地址,通过指针可以修改指针所指的变量的值。然而,如果想要修改指针的指向,就需要使用指针的引用。文章还通过一个简单的示例代码解释了指针的引用的使用方法,并思考了在修改指针的指向后,取指针的输出结果。 ... [详细]
  • 本文介绍了在开发Android新闻App时,搭建本地服务器的步骤。通过使用XAMPP软件,可以一键式搭建起开发环境,包括Apache、MySQL、PHP、PERL。在本地服务器上新建数据库和表,并设置相应的属性。最后,给出了创建new表的SQL语句。这个教程适合初学者参考。 ... [详细]
  • 本文介绍了如何使用php限制数据库插入的条数并显示每次插入数据库之间的数据数目,以及避免重复提交的方法。同时还介绍了如何限制某一个数据库用户的并发连接数,以及设置数据库的连接数和连接超时时间的方法。最后提供了一些关于浏览器在线用户数和数据库连接数量比例的参考值。 ... [详细]
  • 本文介绍了通过ABAP开发往外网发邮件的需求,并提供了配置和代码整理的资料。其中包括了配置SAP邮件服务器的步骤和ABAP写发送邮件代码的过程。通过RZ10配置参数和icm/server_port_1的设定,可以实现向Sap User和外部邮件发送邮件的功能。希望对需要的开发人员有帮助。摘要长度:184字。 ... [详细]
  • Java验证码——kaptcha的使用配置及样式
    本文介绍了如何使用kaptcha库来实现Java验证码的配置和样式设置,包括pom.xml的依赖配置和web.xml中servlet的配置。 ... [详细]
  • 高质量SQL书写的30条建议
    本文提供了30条关于优化SQL的建议,包括避免使用select *,使用具体字段,以及使用limit 1等。这些建议是基于实际开发经验总结出来的,旨在帮助读者优化SQL查询。 ... [详细]
author-avatar
王小贱
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有