angular是一个新兴的JS框架,和以往的框架不同的事,Angularjs更注重于js的建模,管理,同时也提供大量的组件帮助用户组建商业化程序,是一种值得研究的JS框架。
Angularjs使我们可以使用MVC的模式来写JS。Angularjs现在由谷歌来维护。
这里我们来简单的探讨一下它的应用。
首先使用Angularjs我们必须引入他的JS文件。
<script src="../angular.min.js"></script>
这个文件我上传到了附件中了。
Angular的主要部分包括:
ng-app:AngularJS程序入口,对该标签内的元素进行初始化。
ng-controller:在当前元素范围内绑定指定的控制器(controller)。
ng-model:指定当前元素与数据模型($scope)中的属性绑定,如果数据模型中没有此属性,会自动新建一个。
ng-repeat:循环$scope中的属性,类似于{{#each beans}}
{{xxx}}:花括号表示读取某一属性值
filter、orderBy:过滤器。filter可以根据指定的属性过滤数据(例子里是quer属性)。orderBy是排序过滤器。这两个过滤器都是内置的。过滤器是可自定义的。
我们来看一下例子:
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <script src="../angular.min.js"></script> <script> var StudentListCtrl = ['$scope', '$http', function($scope, $http) { $http.get('json/students.json') .success(function(data) { $scope.students = data; }); $scope.sortType = 'age'; } ]; </script> </head> <body ng-app ng-controller="StudentListCtrl"> <input ng-model="quer"/> <select ng-model="sortType"> <option value="name"> 按名字排序</option> <option value="id"> 按学号排序</option> </select> <ul> <li ng-repeat="student in students | filter:quer | orderBy:sortType"> {{student.name}} <p>{{student.sex}}</p> <p>{{student.age}}</p> <p> <img ng-src="{{student.img}}"/> </p> </li> </ul> </body> </html>
其中students.json的内容为:
[ { "age": 13, "id": "0001", "name": "陈大虾", "sex": "男", "img":"im" }, { "age": 14, "id": "0002", "name": "陈大锅", "sex": "男" }, { "age": 15, "id": "0003", "name": "邓小娇", "sex": "女" } ]
显示的结果为:
- 陈大虾
男
13
- 陈大锅
男
14
- 邓小娇
女
15
在这个例子里面,我们改变下拉框的内容,则列表显示的结果会有变化,这就是Angular的方便之处,我们只需要文件,建模的内容,而动态内容的js实现已经不需要我们来实现了。
关于在Angular设置类名:
1. 直接使用 class="{{className}}"
2. 使用ng-class="{true:'selected'}[selected]"
相关推荐
学习过程中结合angularjs教程1-12所讲述的步骤(详见http://docs.angularjs.org/#!/tutorial),在VS2012 C#环境下将1-12例子归拢在一起,是教程例子的集合,望给初学者节省点滴时间。
自动点滴管理系统是一款基于.NET 3.5框架,利用Windows Communication Foundation (WCF) 技术构建的应用程序。WCF是微软提供的一种全面的服务导向架构,用于构建高度互操作的、分布式系统。它允许应用程序在不同的...
【基于Wcf技术的自动点滴管理系统】是一种利用先进的软件技术设计的医疗管理工具,主要用于提升医疗机构的点滴护理效率。此系统的核心是运用Windows Communication Foundation(Wcf),这是一种由微软提供的.NET框架...
标题中的“zhuji.rar_drip_液体点滴_点滴_点滴速度检测”表明这是一个与医疗设备相关的项目,具体是关于液体点滴(输液)速度检测的。这个压缩包可能包含了用于控制或监测点滴速度的软件代码,其中"zhuji.asm"是一个...
首先,我们可以从“8-液体点滴速度监控装置(电).doc”推测,这是一个关于电子方式监测液体滴速的详细文档。它可能包含电路设计的原理图,解释了如何通过传感器检测滴落的液体并转化为电信号,以及如何将这些信号...
自动点滴管理系统是一款基于.NET 3.5框架,利用Windows Communication Foundation (WCF) 技术构建的高效能、高可靠性的应用。WCF是微软推出的一种面向服务的通信框架,旨在简化分布式系统的开发,它提供了丰富的功能...
液体点滴速度监控装置 液体点滴速度监控装置是对液体点滴速度的检测和控制及储液瓶中液面高度的检测报警的系统。本系统通过光电传感器检测液面高度和液体点滴速度,使用步进电机控制液体点滴速度,并实现了多机通信...
### 自动点滴控制器知识点解析 #### 一、自动点滴控制器概览 自动点滴控制器是一种用于医疗领域的自动化设备,旨在监控和调节静脉输液过程中的点滴速度。传统的输液过程依赖于医护人员的人工监控,不仅增加了医护...
【点滴液体点滴速度监控装置设计报告】 本设计报告主要探讨了一种基于单片机技术的液体点滴速度监控装置,旨在实现对输液过程的精确控制和实时监测,以提高医疗安全性和患者的舒适度。该系统的核心是单片机AT89C51...
【液体点滴速度监控系统设计】是一种利用现代电子技术来确保医疗输液过程安全、精确的系统。本系统的核心是单片机AT89C51,它负责处理来自输入和输出系统的数据,以实现对点滴速度的有效控制。系统设计包含了以下几...
自动点滴管理系统是一个基于.NET 3.5框架的软件应用,主要利用了Windows Communication Foundation (WCF) 技术来构建。WCF是微软提供的一种面向服务的架构,它旨在简化分布式系统中的通信,并且能够支持多种协议,如...
本资料集包含了关于这种装置的详细信息,旨在帮助医护人员理解其工作原理、操作方法以及维护技巧。 首先,我们需要了解液体点滴速度监控装置的基本构造。通常,这种装置包括一个电子控制器、流量传感器、显示器和...
标题“用51实现对点滴速度的控制”指的是利用经典的51系列单片机来设计一个可以调节输液速度的系统。51单片机是微控制器的一种,因其内部资源丰富、开发工具成熟且价格适中,常被用于教学和各种嵌入式控制系统中。 ...
【标题】中的“[单片机毕设]液体点滴速度监控装置资料.zip”表明这是一个关于单片机设计的毕业设计项目,主要关注的是用于监控液体点滴速度的设备。这种装置通常在医疗领域应用,用于精确控制病人的输液速率。 ...
本文介绍了一种基于单片机的无人监守点滴自动监控系统的设计,这一系统通过检测、控制和报警三大功能模块,有效提升了输液过程的安全性和便捷性。 系统的硬件设计主要包括液位检测模块、滴速检测模块、显示模块、...