[转载]AngularJS入门教程00:引导程序
我们现在开始准备编写AngularJS应用——phonecat。这一步骤(步骤0),您将会熟悉重要的源代码文件,学习启动包含AngularJS种子项目的开发环境,并在浏览器端运行应用。
进入angular-phonecat目录,运行如下命令:
git checkout -f step-0
该命令将重置phonecat项目的工作目录,建议您在每一学习步骤运行此命令,将命令中的数字改成您学习步骤对应的数字,该命令将清除您在工作目录内做的任何更改。
运行以下命令:
node scripts/web-server.js
来启动服务器,启动后命令行终端将会提示
Http Server running at http://localhost:8000
,请不要关闭该终端,关闭该终端即关闭了服务器。在浏览器中输入http://localhost:8000/app/index.html来访问我们的phonecat应用。
现在,在浏览器中您应该已经看到了我们的初始应用,很简单,但说明我们的项目已经可以运行了。
应用中显示的“Nothing here yet!”是由如下HTML代码构建而成,代码中包含了AngularJS的关键元素,正是我们需要学习的。
app/index.html
<!doctype html>
<html lang="en" ng-app>
<head>
<meta charset="utf-8">
<title>My HTML File</title>
<link rel="stylesheet" href="css/app.css">
<link rel="stylesheet" href="css/bootstrap.css">
<script src="lib/angular/angular.js"></script>
</head>
<body>
<p>Nothing here {{'yet' + '!'}}</p>
</body>
</html>
代码在做什么呢?
ng-app
指令:
<html lang="en" ng-app>
ng-app
指令标记了AngularJS脚本的作用域,在<html>
中添加ng-app
属性即说明整个<html>
都是AngularJS脚本作用域。开发者也可以在局部使用ng-app
指令,如<div ng-app>
,则AngularJS脚本仅在该<div>
中运行。
AngularJS脚本标签:
<script src="lib/angular/angular.js"></script>
这行代码载入angular.js脚本,当浏览器将整个HTML页面载入完毕后将会执行该angular.js脚本,angular.js脚本运行后将会寻找含有ng-app
指令的HTML标签,该标签即定义了AngularJS应用的作用域。
双大括号绑定的表达式:
<p>Nothing here {{'yet' + '!'}}</p>
这行代码演示了AngularJS模板的核心功能——绑定,这个绑定由双大括号{{}}
和表达式'yet' + '!'
组成。
这个绑定告诉AngularJS需要运算其中的表达式并将结果插入DOM中,接下来的步骤我们将看到,DOM可以随着表达式运算结果的改变而实时更新。
AngularJS表达式Angular expression是一种类似于JavaScript的代码片段,AngularJS表达式仅在AngularJS的作用域中运行,而不是在整个DOM中运行。
引导AngularJS应用
通过ngApp指令来自动引导AngularJS应用是一种简洁的方式,适合大多数情况。在高级开发中,例如使用脚本装载应用,您也可以使用bootstrap手动引导AngularJS应用。
AngularJS应用引导过程有3个重要点:
- 注入器(injector)将用于创建此应用程序的依赖注入(dependency injection);
- 注入器将会创建根作用域作为我们应用模型的范围;
- AngularJS将会链接根作用域中的DOM,从用ngApp标记的HTML标签开始,逐步处理DOM中指令和绑定。
一旦AngularJS应用引导完毕,它将继续侦听浏览器的HTML触发事件,如鼠标点击事件、按键事件、HTTP传入响应等改变DOM模型的事件。这类事件一旦发生,AngularJS将会自动检测变化,并作出相应的处理及更新。
上面这个应用的结构非常简单。该模板包仅含一个指令和一个静态绑定,其中的模型也是空的。下一步我们尝试稍复杂的应用!
我工作目录中这些文件是干什么的?
上面的应用来自于AngularJS种子项目,我们通常可以使用AngularJS种子项目来创建新项目。种子项目包括最新的AngularJS代码库、测试库、脚本和一个简单的应用程序示例,它包含了开发一个典型的web应用程序所需的基本配置。
对于本教程,我们对AngularJS种子项目进行了下列更改:
- 删除示例应用程序;
- 添加手机图像到app/img/phones/;
- 添加手机数据文件(JSON)到app/phones/;
- 添加Twitter Bootstrap文件到app/css/ 和app/img/。
练习
试试把关于数学运算的新表达式添加到index.html:
<p>1 + 2 = {{ 1 + 2 }}</p>
总结
现在让我们转到步骤1,将一些内容添加到web应用程序。
原文:http://www.angularjs.cn/A003
[转载]AngularJS入门教程00:引导程序的更多相关文章
- Angular系列----AngularJS入门教程00:引导程序(转载)
我们现在开始准备编写AngularJS应用——phonecat.这一步骤(步骤0),您将会熟悉重要的源代码文件,学习启动包含AngularJS种子项目的开发环境,并在浏览器端运行应用. 进入angul ...
- [转载]AngularJS入门教程02:AngularJS模板
是时候给这些网页来点动态特性了——用AngularJS!我们这里为后面要加入的控制器添加了一个测试. 一个应用的代码架构有很多种.对于AngularJS应用,我们鼓励使用模型-视图-控制器(MVC)模 ...
- [转载]AngularJS入门教程04:双向绑定
在这一步你会增加一个让用户控制手机列表显示顺序的特性.动态排序可以这样实现,添加一个新的模型属性,把它和迭代器集成起来,然后让数据绑定完成剩下的事情. 请重置工作目录: git checkout -f ...
- [转载]AngularJS入门教程03:迭代器
我们在上一步做了很多基础性的训练,所以现在我们可以来做一些简单的事情喽.我们要加入全文检索功能(没错,这个真的非常简单!).同时,我们也会写一个端到端测试,因为一个好的端到端测试可以帮上很大忙.它监视 ...
- [转载]AngularJS入门教程01:静态模板
为了说明angularJS如何增强了标准HTML,我们先将创建一个静态HTML页面模板,然后把这个静态HTML页面模板转换成能动态显示的AngularJS模板. 在本步骤中,我们往HTML页面中添加两 ...
- 【转载】图灵AngularJS入门教程
摘自图灵的AngularJS入门教程:http://www.ituring.com.cn/article/13471 感觉非常不错,所以推荐到首页一下! (一)Hello World! 开始学习Ang ...
- AngularJS入门教程:日期格式化
AngularJS入门教程:日期格式化[转载] 本地化日期格式化: ({{ today | date:'medium' }})Nov 24, 2015 2:19:24 PM ({{ today | d ...
- 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)模 ...
随机推荐
- win10外接显示器时有些应用和里面的字体显示比较模糊
打开系统设置 - 选择显示 - 选中外接的显示器 - 点击 "高级缩放设置" 进去后将 "允许 Windows 尝试修改应用,使其不模糊"打开,然后关闭应用再 ...
- 为什么MOBA和吃鸡类游戏不推荐用tcp协议 延迟不利于实时游戏
http://news.gamedog.cn/a/20171221/2287418.html 我们知道,不同类型的游戏因为玩法.竞技程度不一样,采用的同步算法不一样,对网络延迟的要求也不一样.例如,M ...
- -bash: ./bak_1.py: /usr/bin/python^M: bad interpreter: 没有那个文件或目录
在Windows的PyCharm中编写了一个Python文件,然后上传至CentOS中,已经添加执行权限,但是仍然会报如下的错误: 代码如下: #!/usr/bin/python # -*- codi ...
- centos 7.X关闭防火墙和selinux
一.关闭防火墙 centos从7开始默认用的是firewalld,这个是基于iptables的,虽然有iptables的核心,但是iptables的服务是没安装的. 所以你只要停止firewalld服 ...
- mysql中group by分组
为了测试group by语句,我们首先创建一个表: 然后向表内添加数据: 然后我们查看一下表的内容 接着我们分别按照性别和年龄对这个表进行分组; 我们可以看到表内的数据没有原表的多了,原因就是分组有去 ...
- TOMCAT热部署 catalina.home catalina.base
catalina.home 一台机器通常只有一个, 指向Tomcat的安装目录 catalina.base 一台机器可以启动多个Context, 每个Context对应一个catalina.base ...
- eslint规则 中文备注
{ "ecmaFeatures": {}, "rules": { "no-alert": 0,//禁止使用alert confirm pro ...
- string去空格方法
String str = " asd "; String ntr = ("A" + str).trim().substring(1);//将头部加一个字符再用t ...
- 偶遇bash 的while read line 的问题
自己开发的过程中,我从数据库里读出来一个值,写入某个临时文件,再让脚本做 cat tmp.log |while read line 的时候 readline每次都是少一行, 最后发现,是换行符的问题 ...
- android 开发DatePickerDialog/TimePickerDialog对话框的实现
AndroidAPI提供了Dialog对话框控件,DatePickerDialog/TimePickerDialog均是AlertDialog的子类,通过DatePickerDialog/TimePi ...