Angularjs -- 核心概念
来源:互联网 发布:如何导出网页上的数据 编辑:程序博客网 时间:2024/06/05 16:26
angularjs旨在减轻使用AJAX开发应用程序的复杂度,使得程序的创建、测试、扩展和维护变得容易。下面是angularjs中的一些核心概念。
hello.html
ng-app告诉Angular管理页面的那一部分。根据需要ng-app也可以放在<div>上
<body ng-controller="CartController">
Javascript类叫做控制器,它可以管理相应页面区域中的任何东西。
<div ng-repeat="item in items">
ng-repeat代表为items数组中每个元素拷贝一次该DIV中的DOM,同时设置item作为当前元素,并可在模板中使用它。
<span>{{item.title}}</span>
表达式{{item.title}}检索迭代中的当前项,并将当前项的title属性值插入到DOM中
<input ng-model="item.quantity">
ng-model定义输入字段和item.quantity之间的数据绑定
<span>{{item.price | currency}}</span>
<span>{{item.price * item.quantity | currency}}</span>
单价和总价格式化成美元形式。通过Angular的currency过滤器进行美元形式的格式化。
<button ng-click="remove($index)"> Remove </button>
通过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 中
1. 客户端模板
多页面的应用通过组装和拼接服务器上的数据来生成HTML,然后输出到浏览器。Angularjs不同于此的是,传递模板和数据到浏览器,然后在浏览器端进行组装。浏览器的角色编程了只提供模板的静态资源和模板所需要的数据。
<html ng-app><head><script src="angular.js"></script><script src="controllers.js"></script></head><body><div ng-controller='HelloController'><p>{{greeting.text}}, World</p></div></body></html>controllers.js
function HelloController($scope) { $scope.greeting = { text: 'Hello' };}
2. 模型 视图 控制器(MVC)
MVC的核心概念是,在代码之间明确分离管理数据(模型),应程序逻辑(控制器),并将数据呈现给用户(视图)。在Angular应用中,视图就是DOM,控制器就是Javascript类,模型数据存储在对象属性中。
3. 数据绑定
典型的DOM操作,都是先将数据处理完毕之后,再通过元素上设置innerHTML将结果插入到所要的DOM中。这样的工作重复性很高,还要确保界面和javascript属性中获取到数据时正确的状态。
而Angular中包括这中功能,仅仅声明界面的某一部分银蛇到Javascript的属性,让它们自动完成同步。
<html ng-app><head><script src="angular.js"></script><script src="controllers.js"></script></head><body><div ng-controller='HelloController'><input ng-model='greeting.text'><p>{{greeting.text}}, World</p></div></body></html>controllers.js
function HelloController($scope) { $scope.greeting = { text: 'Hello' };}
input的值(用户的输入)与greeting.text绑定在一起,并及时呈现在<p>中。绑定是双向的,也可用通过设置$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模板。
购物车示例:
<!DOCTYPE html><html ng-app><head> <title>Your Shopping Cart</title></head><body ng-controller='CartController'><h1>Your Order</h1><div ng-repeat='item in items'> <span ng-bind="item.title"></span> <input ng-model='item.quantity'/> <span ng-bind="item.price | currency"></span> <span ng-bind="item.price * item.quantity | currency"></span> <button ng-click="remove($index)">Remove</button></div><script src="../js/angular-1.2.2/angular.js"></script><script> function 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.remove = function (index) { $scope.items.splice(index, 1); } }</script></body></html><html ng-app>
ng-app告诉Angular管理页面的那一部分。根据需要ng-app也可以放在<div>上
<body ng-controller="CartController">
Javascript类叫做控制器,它可以管理相应页面区域中的任何东西。
<div ng-repeat="item in items">
ng-repeat代表为items数组中每个元素拷贝一次该DIV中的DOM,同时设置item作为当前元素,并可在模板中使用它。
<span>{{item.title}}</span>
表达式{{item.title}}检索迭代中的当前项,并将当前项的title属性值插入到DOM中
<input ng-model="item.quantity">
ng-model定义输入字段和item.quantity之间的数据绑定
<span>{{item.price | currency}}</span>
<span>{{item.price * item.quantity | currency}}</span>
单价和总价格式化成美元形式。通过Angular的currency过滤器进行美元形式的格式化。
<button ng-click="remove($index)"> Remove </button>
通过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 中
1 1
- Angularjs -- 核心概念
- AngularJS四大核心特性
- AngularJs核心概览
- AngularJs 4大核心
- AngularJS四大核心特性
- AngularJS 核心特性
- AngularJS 核心概览
- AngularJS四大核心特性
- angularjs 一些概念说明
- AngularJS基础概念介绍
- AngularJS系列:5、核心概览
- UDDI核心概念
- 面向对象核心概念
- 活动目录核心概念
- Struts2之核心概念
- Maven核心概念
- js 核心概念
- Apache Shiro 核心概念
- Uva 1511 Soju
- kettle生成主键UUID和调用转换作业
- 开源社区之美
- Java 的拷贝
- Ubuntu 系统下安装dbm数据库
- Angularjs -- 核心概念
- pom.xml之 超级POM
- [资源推荐] Linux 性能调优工具
- 访问google hosts 最新列表
- C++ primer 第五版 中文版 9.3.2 节练习
- 性能优化:使用SparseArray代替HashMap<Integer,Object>
- 关于有限状态机
- GitHub详细教程
- 视图的捏合(缩放)