AngularJS 入门教程
1. 简介:AngularJS是为了克服HTML在构建应用上的不足而设计的。HTML是一门很好的为静态文本展示设计的声明式语言,但要构建WEB应用的话它就显得乏力了。所以我做了一些工作(你也可以觉得是小花招)来让浏览器做我想要的事。
- 首先我们要下载好AngularJS,http://angularjs.org
- 然后打开一个文本编辑器(我使用的是HBuilder,这个工具还是很方便的,大家可以尝试一下),创建一个HTML文件
<!DOCTYPE html>
<html ng-app><!--标记ng-app告诉AngularJS处理整个HTML页并引导应用-->
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="js/angular.min.js" ></script><!--载入AngularJS脚本-->
</head>
<body>
Hello {{'World'}}!<!--使用双大括号标记的内容是问候语中绑定的表达式-->
</body>
</html>
5. AngularJS的双向数据绑定:
<!DOCTYPE html>
<html ng-app><!--标记ng-app告诉AngularJS处理整个HTML页并引导应用-->
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="js/angular.min.js"></script><!--载入AngularJS脚本-->
</head>
<body>
你的名字: <input type="text" ng-model="yourname" placeholder="世界">
<!--文本输入指令<input ng-model="yourname" />绑定到一个叫yourname的模型变量。
双大括号标记将yourname模型变量添加到问候语文本。
你不需要为该应用另外注册一个事件侦听器或添加事件处理程序!
-->
<hr>
你好 {{yourname || '世界'}}!<!--这里yourname的默认值是世界,当在文本框中输入内容是,这里的yourname会动态改变-->
</body>
</html>
6. AngularJS应用的解析:描述AngularJS应用程序的三个组成部分,并解释它们如何映射到模型-视图-控制器设计模式(MVC设计模式):
- 模板(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应用。
AngularJS 入门教程的更多相关文章
- AngularJS入门教程:日期格式化
AngularJS入门教程:日期格式化[转载] 本地化日期格式化: ({{ today | date:'medium' }})Nov 24, 2015 2:19:24 PM ({{ today | d ...
- 【转载】图灵AngularJS入门教程
摘自图灵的AngularJS入门教程:http://www.ituring.com.cn/article/13471 感觉非常不错,所以推荐到首页一下! (一)Hello World! 开始学习Ang ...
- AngularJS 入门教程 $http is not defined 解决方案
采用从git下载的教程, www.angularjs.cn 版本的 入门教程,在第5步的时候 签出文件: git checkout -f step-5 运行将会提示: $http is not def ...
- Angular系列---- AngularJS入门教程03:AngularJS 模板(转载)
是时候给这些网页来点动态特性了——用AngularJS!我们这里为后面要加入的控制器添加了一个测试. 一个应用的代码架构有很多种.对于AngularJS应用,我们鼓励使用模型-视图-控制器(MVC)模 ...
- Angular系列----AngularJS入门教程01:AngularJS模板 (转载)
是时候给这些网页来点动态特性了——用AngularJS!我们这里为后面要加入的控制器添加了一个测试. 一个应用的代码架构有很多种.对于AngularJS应用,我们鼓励使用模型-视图-控制器(MVC)模 ...
- Angular系列----AngularJS入门教程00:引导程序(转载)
我们现在开始准备编写AngularJS应用——phonecat.这一步骤(步骤0),您将会熟悉重要的源代码文件,学习启动包含AngularJS种子项目的开发环境,并在浏览器端运行应用. 进入angul ...
- Angular系列------AngularJS入门教程:导言和准备(转载)
学习AngularJS的一个好方法是逐步完成本教程,它将引导您构建一个完整的AngularJS web应用程序. 该web应用是一个Android设备清单的目录列表,您可以筛选列表以便查看您感兴趣的设 ...
- [转载]AngularJS入门教程02:AngularJS模板
是时候给这些网页来点动态特性了——用AngularJS!我们这里为后面要加入的控制器添加了一个测试. 一个应用的代码架构有很多种.对于AngularJS应用,我们鼓励使用模型-视图-控制器(MVC)模 ...
- [转载]AngularJS入门教程00:引导程序
我们现在开始准备编写AngularJS应用——phonecat.这一步骤(步骤0),您将会熟悉重要的源代码文件,学习启动包含AngularJS种子项目的开发环境,并在浏览器端运行应用. 进入angul ...
- AngularJS入门教程
1. 简介:AngularJS是为了克服HTML在构建应用上的不足而设计的.HTML是一门很好的为静态文本展示设计的声明式语言,但要构建WEB应用的话它就显得乏力了.所以我做了一些工作(你也可以觉得是 ...
随机推荐
- NOIP 2009 靶形数独(DLX)
小城和小华都是热爱数学的好学生,最近,他们不约而同地迷上了数独游戏,好胜的他们想用数独来一比高低.但普通的数独对他们来说都过于简单了,于是他们向Z 博士请教,Z 博士拿出了他最近发明的“靶形数独”,作 ...
- JavaSE复习(七)Stream流和方法引用
Stream流 全新的Stream概念,用于解决已有集合类库既有的弊端. 传统集合的多步遍历代码 几乎所有的集合(如 Collection 接口或 Map 接口等)都支持直接或间接的遍历操作.而当我们 ...
- 进程id
我们知道怎么通过fork函数创建(或者说是复制)一个进程,但是我们要怎么样操作这个被创建出来的进程呢?那就需要用到他的进程id,所以就要获取进程id,一下提供一些获取进程id的函数和其使用方法. 1) ...
- JMS实战——ActiveMQ
安装 官网下载地址:http://activemq.apache.org/ 小编这里以5.9.0版本为例,做简单介绍. 下载之后解压到制定路径,目录结构如下: 启动 直接运行bin下的activemq ...
- [Elasticsearch] 多字段搜索 (一) - 多个及单个查询字符串
多字段搜索(Multifield Search) 本文翻译自官方指南的Multifield Search一章. 查询很少是只拥有一个match查询子句的查询.我们经常需要对一个或者多个字段使用相同或者 ...
- 时间戳转换成日期的js
在项目开发过程中,我们常常需要把时间戳转换成日期.下面这个是我一直使用的js方法,希望能帮助到有需要的朋友.大家如果有更好的方法,请多多指教! js代码如下: //时间戳转换成日期 function ...
- elementUI默认样式修改不成功的问题
问题: login.vue中引入<style lang="postcss" src="./login.css" scoped></style& ...
- Flink之状态之checkpointing
1.前言 在Flink中,函数和操作符都可以是有状态的.在处理每个消息或者元素时,有状态的函数都会储存信息,使得状态成为精密操作中关键的组成部分. 为了使状态能够容错,Flink会checkpoint ...
- golang and intellij
有一个项目,混合了java和go,需要在intellij中安装go的插件. OK,网上的信息简直混乱不堪,两个流派,一个流派就是装插件,一个流派就是编译插件,各种折腾,还是安装不了,谁知柳暗花明又一村 ...
- Kafka数据辅助和Failover
数据辅助与Failover CAP理论(它具有一致性.可用性.分区容忍性) CAP理论:分布式系统中,一致性.可用性.分区容忍性最多只可同时满足两个.一般分区容忍性都要求有保障,因此很多时候在可用性与 ...