Angular 入门学习
1、Hello World 入门
源代码
<!doctype html>
<html ng-app>
<head>
<script src="http://code.angularjs.org/angular-1.0.1.min.js"></script>
</head>
<body>
Hello {{'World'}}!
</body>
</html>
<html ng-app> 中的 ng-app 表示告诉AngularJS处理整个HTML页面并引导引用。
<script src="http://code.angularjs.org/angular-1.0.1.min.js"></script> 运行载入AngularJS的脚本（初次运行，有点慢）
Hello {{'World'}} 使用双大括号标记{{}}的内容是问候语中绑定的表达式，这个表达式是一个简单的字符串‘World’。
2、AngularJS双向绑定数据
源代码
<!doctype html>
<html ng-app>
<head>
<script src="http://code.angularjs.org/angular-1.0.1.min.js"></script>
</head>
<body>
Your name: <input type="text" ng-model="yourname" placeholder="World">
<hr>
Hello {{yourname || 'World'}}!
</body>
</html>
其中：
（1）、文本输入指令<input ng-model="yourname" />绑定到一个叫yourname的模型变量，placeholder默认值。
（2）、双大括号标记将yourname模型变量添加到问候语文本。
（3）、你不需要为该应用另外注册一个事件侦听器或添加事件处理程序！
运行程序，在文本框中输入字符将显示出来。
3、AngularJS应用的解析
本节描述AngularJS应用程序的三个组成部分，并解释它们如何映射到模型-视图-控制器设计模式：
模板（Templates）
模板是您用HTML和CSS编写的文件，展现应用的视图。 您可给HTML添加新的元素、属性标记，作为AngularJS编译器的指令。 AngularJS编译器是完全可扩展的，这意味着通过AngularJS您可以在HTML中构建您自己的HTML标记！
应用程序逻辑（Logic）和行为（Behavior）
应用程序逻辑和行为是您用JavaScript定义的控制器。AngularJS与标准AJAX应用程序不同，您不需要另外编写侦听器或DOM控制器，因为它们已经内置到AngularJS中了。这些功能使您的应用程序逻辑很容易编写、测试、维护和理解。
模型数据（Data）
模型是从AngularJS作用域对象的属性引申的。模型中的数据可能是Javascript对象、数组或基本类型，这都不重要，重要的是，他们都属于AngularJS作用域对象。
AngularJS通过作用域来保持数据模型与视图界面UI的双向同步。一旦模型状态发生改变，AngularJS会立即刷新反映在视图界面中，反之亦然。
此外，AngularJS还提供了一些非常有用的服务特性：
- 底层服务包括依赖注入，XHR、缓存、URL路由和浏览器抽象服务。
- 您还可以扩展和添加自己特定的应用服务。
- 这些服务可以让您非常方便的编写WEB应用。
Angular 入门学习的更多相关文章
- angular入门学习文档之一
一.数据双向绑定 angular(下面统一简称ng)强大的地方莫过于它内置的数据双向绑定功能,下面我们通过一个简单的例子来演示ng强大的双向绑定数据的能力. 代码如下: 1.dom结构: 1.< ...
- Angular【学习笔记】
1.angular入门网站 感谢@菜鸟教程:http://www.runoob.com/angularjs/angularjs-tutorial.html 学习笔记:
- ReactJS入门学习一
ReactJS入门学习一 阅读目录 React是什么? React如何制作组件? 理解组件属性props 理解页面中如何渲染数据的 理解从服务器端获取数据及理解state的 回到顶部 React是什么 ...
- 适合我胃口的angular.js学习资料
断断续续弄了半年的ANGULAR.JS学习资料,网上下载了N多资料,测试了很多次. 现在只能算是入门,因时间问题,现在要转入其它领域. 如果以后要拾起来,下面这个PDF比较对我胃口. <Angu ...
- Angular入门笔记
AngularJS(下面简称其为ng)是Google开源的一款JavaScript MVC框架,弥补了HTML在构建应用方面的不足,其通过使用指令(directives)结构来扩展HTML词汇,使开发 ...
- vue入门学习（基础篇）
vue入门学习总结: vue的一个组件包括三部分:template.style.script. vue的数据在data中定义使用. 数据渲染指令:v-text.v-html.{{}}. 隐藏未编译的标 ...
- Hadoop入门学习笔记---part4
紧接着<Hadoop入门学习笔记---part3>中的继续了解如何用java在程序中操作HDFS. 众所周知,对文件的操作无非是创建,查看,下载,删除.下面我们就开始应用java程序进行操 ...
- Hadoop入门学习笔记---part3
2015年元旦,好好学习,天天向上.良好的开端是成功的一半,任何学习都不能中断,只有坚持才会出结果.继续学习Hadoop.冰冻三尺,非一日之寒! 经过Hadoop的伪分布集群环境的搭建,基本对Hado ...
- PyQt4入门学习笔记（三）
# PyQt4入门学习笔记(三) PyQt4内的布局 布局方式是我们控制我们的GUI页面内各个控件的排放位置的.我们可以通过两种基本方式来控制: 1.绝对位置 2.layout类 绝对位置 这种方式要 ...
随机推荐
- ahjesus 让Boot Camp支持创建win7 u盘安装盘
通过修改BootCamp助理成功创建USB的windows7的安装盘. 以下将方法共享出来. 准备工作: 找到自己电脑的Boot Rom 版本.(点左上角那个小苹果标志 然后点 [关于本机] 然后点 ...
- git version 2.5.0.windows.1中文乱码问题解决方案
UI部分 Options->Text Local:zh_CN,Character set:GBK ~/.GitConfig [gui] encoding = utf-8 [tgit] proje ...
- js事件小记
参考javascript编程全解 javascript高级程序设计 javascript经典实例 对事件的处理方式称为事件处理程序或事件侦听器 ,对于一个元素或事件,只能设定1个事件处理程序,却可以 ...
- ArcMap中的名称冲突问题
这是一个非常有趣的问题. 现在我一个点层叫"汶川73",有一个面层也叫"汶川73",使用空间连接工具来计算每个面中被落入有多少个点.但不管怎么算,结果都只能生成 ...
- 解决SharePoint文档库文件在搜索结果页面显示的标题和文档的标题不一致问题（search result）
问题表现: SharePoint 2013 爬网后,搜索一个文档,虽然搜到了,但是显示有点问题,如图: 原因分析: 造成该问题的原因是,该文档除了本身有一个名称外,在文档metadata的title属 ...
- E/AndroidRuntime(1636): java.lang.RuntimeException: Unable to start activity ComponentInfo{com.***.app.wx.MainActivity} : android.view.InflateException: Binary XML file line #51 :
类中加载的xml中,所自定义组件的包名错误(xml中51行错误:自定义组件包名写错了).
- Cocos2d入门--3--小球运动
本章直接上源代码.内容不难,主要就是 HelloWorldScene.h文件: #ifndef __HELLOWORLD_SCENE_H__ #define __HELLOWORLD_SCENE_H_ ...
- DP大作战—状态压缩dp
题目描述 阿姆斯特朗回旋加速式阿姆斯特朗炮是一种非常厉害的武器,这种武器可以毁灭自身同行同列两个单位范围内的所有其他单位(其实就是十字型),听起来比红警里面的法国巨炮可是厉害多了.现在,零崎要在地图上 ...
- 通过设置虚拟机(ubantu15.10)的分辨率达到全屏效果
最近搭建了一个ubantu 15.10虚拟机,怎么折腾都不能全屏显示.虽然我已经点了, 还是无法达到真正的全屏. 查了一下,http://jingyan.baidu.com/article/0964 ...
- CentOS6.5+nginx+tomcat负载均衡集群
思路: 1.安装jdk 2.安装tomcat 3.安装nginx依赖库 4.安装nginx 5.nginx+2个tomcat集群 一:网络拓扑