AngularJS 从零开始学习(一)
什么是AngularJS?
AngularJS是一个把HTML(视图)绑定到JavaScript对象(模型)上的框架。当模型改变时,页面也能自动随之更新,反之亦然。当某个域的内容发生变化时,与之关联的模型也能更新。正因为Angular处理了所有的中间代码,所以你不用像jQuery那样,手动更新HTML或者事件监听。事实上,这里没有任何一个例子使用到了jQuery!
几大特性(可以像android一样理解为四大组件的这种特性):
特性一:双向的数据绑定
个典型的web应用可能包含了80%的代码用来处理,查询和监听DOM,传统来说,当model变化了。 开发人员需要手动处理DOM元素并且将属性反映到这些变化中。这个一个双向的过程。一方面,model变化驱动了DOM中元素变化,另一方面,DOM元素的变化也会影响到Model。这个在用户互动中更加复杂,因为开发人员需要处理和解析这些互动,然后融合到一个model中,并且更新View;angularJS实现的双向数据绑定能够同步DOM和Model
特性二:模板
官方文档的上的解释是:A module is a collection of services, directives, controllers, filters, and configuration information;看到了吧,是个集合;这个模板其实就是个扩充了的html,只是这里面有很多对html的处理操作,包含了很多帮助你映射model到view的内容。引用模板是通过ng-app指令来实现的,把当前网页声明为angularJS应用,然后进行后面的操作!
特性三:MVC
Model
model是应用中的简单数据。一般是简单的javascript对象。这里没有必要继承框架的classes,使用 proxy对象封装或者使用特别的setter/getter方法来访问。事实上我们处理vanilla javascript的方法就是一个非常好的特 性,这种方法使得我们更少使用应用的原型。
ViewModel
viewmodel是一个用来提供特别数据和方法从而维护指定view的对象。
viewmodel是$scope的对象,只存在于AnguarJS的应用中。$scope只是一个简单的js对象,这个对象使用简单的API来侦测和广播状态变化。
Controller
controller负责设置初始状态和参数化$scope方法用以控制行为。需要指出的controller并不保存状态也不和远程服务互动。
特性四:服务和依赖注入
特性五:指令(Directives)
指令可以用来创建自定义的标签。它们可以用来装饰元素或者操作DOM属性。可以作为标签、属性、注释和类名使用。看个例子:
myModule.directive('myComponent', function(mySharedService) { return { restrict: 'E', controller: function($scope, $attrs, mySharedService) { $scope.$on('handleBroadcast', function() { $scope.message = 'Directive: ' + mySharedService.message; }); }, replace: true, template: '<input>' }; }); 然后,你可以使用这个自定义的directive来使用: <my-component ng-model="message"></my-component>
控制器controllers
尽管控制器看起来并没有起到什么控制的作用,但是它在这里起到了至关重要的作用。通过给定我们数据模型的语境,控制器允许我们建立模型和视图之间的数据绑定。我们是这样把表现层,数据和逻辑部件联系在一起的:
function PhoneListCtrl($scope) {
$scope.phones = [
{"name": "Nexus S",
"snippet": "Fast just got faster with Nexus S."},
{"name": "Motorola XOOM™ with Wi-Fi",
"snippet": "The Next, Next Generation tablet."},
{"name": "MOTOROLA XOOM™",
"snippet": "The Next, Next Generation tablet."}
];
}
待续
AngularJS 从零开始学习(一)的更多相关文章
- ASP.NET从零开始学习EF的增删改查
ASP.NET从零开始学习EF的增删改查 最近辞职了,但是离真正的离职还有一段时间,趁着这段空档期,总想着写些东西,想来想去,也不是很明确到底想写个啥,但是闲着也是够 ...
- 从零开始学习jQuery (五) 事件与事件对象
本系列文章导航 从零开始学习jQuery (五) 事件与事件对象 一.摘要 事件是脚本编程的灵魂. 所以本章内容也是jQuery学习的重点. 本文将对jQuery中的事件处理以及事件对象进行详细的讲解 ...
- 从零开始学习jQuery (四) 使用jQuery操作元素的属性与样式
本系列文章导航 从零开始学习jQuery (四) 使用jQuery操作元素的属性与样式 一.摘要 本篇文章讲解如何使用jQuery获取和操作元素的属性和CSS样式. 其中DOM属性和元素属性的区分值得 ...
- 从零开始学习jQuery (三) 管理jQuery包装集
本系列文章导航 从零开始学习jQuery (三) 管理jQuery包装集 一.摘要 在使用jQuery选择器获取到jQuery包装集后, 我们需要对其进行操作. 本章首先讲解如何动态的创建元素, 接着 ...
- 从零开始学习jQuery (二) 万能的选择器
本系列文章导航 从零开始学习jQuery (二) 万能的选择器 一.摘要 本章讲解jQuery最重要的选择器部分的知识. 有了jQuery的选择器我们几乎可以获取页面上任意的一个或一组对象, 可以明显 ...
- 从零开始学习jQuery (一) 入门篇
本系列文章导航 从零开始学习jQuery (一) 入门篇 一.摘要 本系列文章将带您进入jQuery的精彩世界, 其中有很多作者具体的使用经验和解决方案, 即使你会使用jQuery也能在阅读中发现些 ...
- 从零开始学习jQuery(转)
本系列文章导航 从零开始学习jQuery (一) 开天辟地入门篇 从零开始学习jQuery (二) 万能的选择器 从零开始学习jQuery (三) 管理jQuery包装集 从零开始学习jQuery ( ...
- 从零开始学习Hadoop--前言
Hadoop是最著名使用最广泛的分布式大数据处理框架,它是用Java开发的. 这本书有一个明确的目标:只要有一台能上网的计算机,就可以让读者在最短的时间内,学会Hadoop的初级开发.所以,这本书只讲 ...
- 从零开始学习jQuery (一) 开天辟地入门篇
一.摘要 本系列文章将带您进入jQuery的精彩世界, 其中有很多作者具体的使用经验和解决方案, 即使你会使用jQuery也能在阅读中发现些许秘籍. 本篇文章是入门第一篇, 主要是简单介绍jQuer ...
随机推荐
- Java I/O 操作的一些基本知识
1.文件类:File ,也是唯一的单独的文件类.可以对文件进行操作.其方法有:exists(),delete(),isDirectory(),createNewFile(),getName(),get ...
- 【卷一】正则四 |> 练习
参考:<Python核心编程(3rd)>—P39 1-1 识别后续的字符串: "bat", "bit", "but" &quo ...
- id和instancetype的异同
相同点: 都可以作为方法返回值类型 在initWithName:方法中是一样的,例如: - (id)initWithName:(NSString *)name; - (instancetype)ini ...
- swift中JSon数据的处理
import UIKit class MainTabBarViewController: UITabBarController { override func viewDidLoad() { supe ...
- 3. 编写Java应用程序,定义Animal类,此类中有动物的属性:名称 name,腿的数量legs,统计动物的数量 count;方法:设置动物腿数量的方法 void setLegs(),获得腿数量的方法 getLegs(),设置动物名称的方法 setKind(),获得动物名称的方法 getKind(),获得动物数量的方法 getCount()。定义Fish类,是Animal类的子类,统计鱼的数量
//Animal 类 package d922B; public class Animal { private String kind; private int legs,count; public ...
- GetWindowRect和GetClientRect的异同
由于项目需要,需要学习CGridCtrl控件的使用,测试控件时发现了一个问题,我无法将控件放在对话框的制定位置. 该问题的原因很容易发现,其实就是GetWindowRec()函数和GetClientR ...
- 一般css样式开头公共部分
@charset "utf-8"; /* CSS Document -- skyren */ body { font-family: "微软雅黑", Arial ...
- 部署php项目
1.不写端口号,即127.0.0.1,其隐含一个默认端口号80 2.查看当前占用的端口号 3.nginx修改工作路径,nginx修改端口号 4.查看端口号是否可访问telnet命令 在dos界面输入命 ...
- selenium 百度登陆
using System;using OpenQA.Selenium;using OpenQA.Selenium.Firefox;//引用命名空间using System.IO; using Syst ...
- cmstop框架中的js设计content.js
控制cmstop框架中action的js 内容模块 找出当前页面的js的思路01先找显示页面的当前文件.在页面文件中-->找(编辑,删除)按钮-->找获取这个按钮的js选择器 02看加载的 ...