[Angular Tutorial] 0-Bootstraping
在这一节的tutorial中，您将会逐渐熟悉AngularJS phonecat app的最重要的源代码文件。您也将学到如何将开发服务器与angular-seed绑定到一起，并且在浏览器中运行应用。
在您继续之前，请确保您已经搭建好您的开发环境并且安装了所有必要的依赖，像这里描述的那样。
在angular-phonecat目录下，运行这条指令：
git checkout -f step-0
这将使您工作空间的tutorial应用重置到step 0。
您必须在将来的每一步中重复这条指令并将步骤指向您所在的步骤，同时这么做会导致您在工作空间所做的任何修改丢失。
如果您还没有这么做，您需要安装所有依赖通过运行这条指令：
npm install
为了看到在浏览器中运行着的app，请打开一个独立的终端，然后运行npm start来启动web 服务器，现在，打开浏览器并访问http://localhost:8000/index.html
如果您已经在master分支运行过先于step-0的版本，这时您可能会看到已被缓存的app的版本，刷新一下页面即可。
您现在可以在在浏览器中看到您的页面了，这不是非常酷，但还行。
这个显示“Nothing here yet!”的HTML页面是被下面的代码所生成的，这些代码包含一些Angular中我们需要进一步深入探讨的关键元素。
app/index.html:
<!doctype html>
<html lang="en" ng-app>
<head>
<meta charset="utf-8">
<title>My HTML File</title>
<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css">
<link rel="stylesheet" href="css/app.css">
<script src="bower_components/angular/angular.js"></script>
</head>
<body> <p>Nothing here {{'yet' + '!'}}</p> </body>
</html>
这些代码在做什么？
ng-app指令：
<html ng-app>
ng-app代表了一条名为ngApp的Angular指令（Angular使用spinal-case命名法来作为其自定属性（custom attributes）并且使用camelCase命名法表示对应实现它们的指令）。这条指令用来示意html元素Angular应该被认为是我们应用的根元素。这给应用开发者带来了自由，可以指定整个html页面还是仅仅是部分的页面应该被视作Angular应用。
AngularJS script tag:
<script src="bower_components/angular/angular.js">
这行代码加载了angular.js脚本，这会在整个html页面加载的过程中，使浏览器注册一个回调（register a callback）。当这个回调被执行，Angular会寻找ngApp指令。如果Angular找到了这条指令，它会在DOM中ngApp被定义的作用域引导整个应用。
关于更多引导您的应用的细节，请参考开发者指导的这部分。
双花括号绑定表达式：
Nothing here {{'yet' + '!'}}
这行代码展示了Angular temolating capabilities的两个核心特点：
·一个绑定，通过双花括号{{}}表示；
·一个简单的表达式'yet' + '!'用于这个绑定；
此处绑定告诉Angular应该评判一个表达式并且将其嵌入DOM中的地方，而不仅仅是一次的嵌入。正如我们将在接下来的步骤中看到的那样，无论何时表达式的结果发生改变时，一处绑定可以产生高效而持续的更新。
Angular表达式是一种类似于JavaScript的代码片段，它只会在当前的数据模型范围内被Angular识别，而不是在全局的环境下。
正如期望的那样，一旦这个模板被Angular处理过，html页面中就会包含这样的内容：
Nothing here yet!
引导AngularJS应用：
在大多数情况下，通过使用ngApp指令来自动引导AngularJS应用是非常容易和合适的。在一些更高级的情况下，像使用脚本加载器，您可以使用人工方法来引导应用。
在引导过程中，发生了以下三件非常重要的事情：
1.将被用于依赖注入的注射器被创建了；
2.注射器将会创建以后被用于我们应用中的数据模型的环境的根作用域（root scope）；
3.Angular将会从ngApp根元素“编译”DOM树，并且处理在这个过程中发现的任何指令和数据绑定。
一旦一个引用被引导了，它将会等待那些可能改变数据模型的浏览器事件（像鼠标点击，按键和HTTP请求）。一旦这样的事件发生了，Angular会检查是否这会导致任何数据模型的改变，一旦这样的改变被发现，Anglular通过更新所有被影响的绑定来在视图层表现它们。
我们当前应用的结构是非常简单的。模板中仅仅包含一条指令和一条静态绑定，我们的数据模型还是空的。这会很快改变的！
我的工作空间现在包含了哪些文件？
您工作空间的大部分文件来自angular-seed-project，这是一个典型的被用于引导一个新的Angular项目的结构。这个种子项目被预先配置了，以便来安装angular的框架（通过bower产生app/bower_components/文件夹）并且通过工具来建立一个典型的web应用（通过npm）。
为了达到这篇tutorial的目的，我们更改了angular-seed中的以下配置:
·删除了范例应用。
·删除了用不到的依赖。
·在app/img/phones/目录下添加了电话图片。
·在app/phones/目录下添加了电话数据文件(JSON）。
·在bower.json文件中添加Bootstrap依赖。
实验
尝试在index.html中添加下面这个表达式（这将会产生数学运算）：
<p>1 + 2 = {{ 1 + 2 }}</p>
总结
让我们进入下一步来在我们的web应用中添加一些内容吧！
[Angular Tutorial] 0-Bootstraping的更多相关文章
- Angular 2.0 的设计方法和原则
转载自:Angular 2.0 的设计方法和原则 在开始实现Angular 2.0版本之际,我们认为应该着手写一些东西,告诉大家我们在设计上的考虑,以及为什么做这样的改变.现在把这些和大家一起分享,从 ...
- Angular从0到1：function（下）
1.前言 2.function(下) 2.13.angular.isArray(★★) angular.isArray用于判断对象是不是数组,等价于Array.isArray console.log( ...
- [转贴]有关Angular 2.0的一切
对Angular 2.0的策略有疑问吗?就在这里提吧.在接下来的这篇文章里,我会解释Angular 2.0的主要特性区域,以及每个变化背后的动机.每个部分之后,我将提供自己在设计过程中的意见和见解,包 ...
- Angular 2.0 从0到1：Rx--隐藏在Angular 2.x中利剑
第一节:Angular 2.0 从0到1 (一)第二节:Angular 2.0 从0到1 (二)第三节:Angular 2.0 从0到1 (三)第四节:Angular 2.0 从0到1 (四)第五节: ...
- Angular 2.0 从0到1 （七）
第一节:Angular 2.0 从0到1 (一)第二节:Angular 2.0 从0到1 (二)第三节:Angular 2.0 从0到1 (三)第四节:Angular 2.0 从0到1 (四)第五节: ...
- Angular 2.0 从0到1 （六）
第一节:Angular 2.0 从0到1 (一)第二节:Angular 2.0 从0到1 (二)第三节:Angular 2.0 从0到1 (三)第四节:Angular 2.0 从0到1 (四)第五节: ...
- Angular 2.0 从0到1 （四）
第一节:Angular 2.0 从0到1 (一)第二节:Angular 2.0 从0到1 (二)第三节:Angular 2.0 从0到1 (三)第四节:Angular 2.0 从0到1 (四)第五节: ...
- Angular 2.0 从0到1 （五）
第一节:Angular 2.0 从0到1 (一)第二节:Angular 2.0 从0到1 (二)第三节:Angular 2.0 从0到1 (三)第四节:Angular 2.0 从0到1 (四)第五节: ...
- [Angular Tutorial]PhoneCat Tutorial App
(注:曾经在<不敢止步>一书中看到学到一个观点,作者认为学习一门技术最好的方法就是翻译某部领域书籍.这里我决定做一次尝试,接下来花1个月左右时间,将Angular Tutorial Pho ...
- 基于ZKWeb + Angular 4.0的开源管理后台Demo
这是一套基于ZKWeb网页框架和Angular 4.0编写的开源管理后台Demo,实现了前后端分离和模块化开发, 地址是: https://github.com/zkweb-framework/ZKW ...
随机推荐
- psy & obv
PSY和OBV 1,PSY心理线是投资者对股市涨跌产生心理波动的情绪指标.相反,当PSY曲线向下跌破PSYMA曲线后,为卖出时机..当PSY曲线向上突破PSYMA曲线后,开始向下回调至PSYMA曲线, ...
- zf-监察系统的左侧菜单树的表
Sys_Right 这个表
- 转: 两个 Shell 网站: explainshell 和 shellcheck
今天向大家介绍两个有意思的 Shell 网站,一个是 explainshell.com,另一个是 shellcheck.net. explainshell 先说 explainshell.explai ...
- 自定义View常处理的回调函数
自定义View常处理的回调函数 onFinishInflate() 当View中所有的子控件均被映射成xml后触发 onMeasure(int, int) 确定所有子元素的大小 onLayout(bo ...
- photoshop基础教程视频-贺叶铭-传智播客-笔记
界面构成 1.菜单栏 2.工具箱 3.工具属性栏 4.悬浮面板 5.画布 ctrl+n 新建对话框 (新建画布) 画布200*200大小,是指以毫米为单位,当不说单位,默认是毫米. 打开对话框:ctr ...
- 虚拟机安装tools for Ubuntu
1.启动虚拟机,进入虚拟机 2.选定菜单中的虚拟机按钮,点击安装VMware Tools 3.此时虚拟机上会弹出一些文件, 复制VMwareTools-XXX-XX.tar.gz到桌面,鼠标右键可 ...
- FOJ 2206 函数求解
水题 /* *********************************************** Author :Zhou Zhentao Email :774388357@qq.com C ...
- JAVA基础--toString, equals方法
==比较的是地址 equals比较的是内容. 所以要重写object的equals方法. public class TestEquals { public static void main(Strin ...
- 《JavaScript语言精髓与编程实践》读书笔记
JavaScript语言精髓与编程实践读书笔记 function v1(v1){ v1 = 100; alert('v1:'+v1); } function v2(name){ v1.apply(th ...
- IO口输入输出模式理解
1.IO输入输出模式 2.有上拉,下拉,弱上拉,推挽,开漏输出:不同的单片机有不同的输出模式 3.以最简单的51单片机为例 P0:开漏型双向IO口,通常需要添加外部上拉电阻 P1~P3:准双向IO口, ...