[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 ...
随机推荐
- win10系统安装oracle11g时遇到INS-13001环境不满足最低要求
升级win10系统之后,需要重新安装Oracle,因为在安装Oralce11g时,使用64位的会出现各种不兼容问题,我每次安装都是使用32位的数据库. 在安装时点击setup.exe之后,出现了:[I ...
- Javascript模块化编程：AMD规范及require.js用法【转】 - loheonly的笔记 - 前端网（W3Cfuns）
http://www.w3cfuns.com/blog-5425789-5399326.html
- sqlserver2008用bat脚本备份时报错因为库名有中横杠【原创】
提示原因是数据库名字有中横岗“-” 解决方法:用中括号把名字括起来就可以了 call :backupone [数据库名-new] 完整备份脚本如下 @ECHO ON set DATE=%date:/= ...
- C# 经典入门15章 RichTextBox
aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAsEAAAIRCAIAAAAk7fcMAAAgAElEQVR4nOy9+SOU3/////pHuswYyz
- UIView的alpha、hidden、opaque 深入
转载自:http://blog.csdn.net/wzzvictory/article/details/10076323 UIView的这几个属性让我困惑了好一阵子,通过翻看官方文档和stackove ...
- npm install含义 及vue安装启动项目时报错解决及vue建项目时各文件间的依赖关系
全局安装vue-cli,使用命令npm install -g vue-cli. 下载模板代码,使用命令vue init webpack my-project,之后会有一些询问,按需填写即可. 最后会看 ...
- Transport layer and Network layer
http://stackoverflow.com/questions/13333794/networking-difference-between-transport-layer-and-networ ...
- Highcharts选项配置详细说明文档
Highcharts提供大量的选项配置参数,您可以轻松定制符合用户要求的图表,目前官网只提供英文版的开发配置说明文档,而中文版的文档网上甚少,且零散不全.这里,我把Highcharts常用的最核心的参 ...
- 【BZOJ3524/2223】[Poi2014]Couriers 主席树
[BZOJ3524][Poi2014]Couriers Description 给一个长度为n的序列a.1≤a[i]≤n.m组询问,每次询问一个区间[l,r],是否存在一个数在[l,r]中出现的次数大 ...
- 添加<!doctype html>后造成JS写的定位失效
今天同事找了一个悬浮广告的插件,但是一放入页面中就失效了,也没有报错,后来通过原文件对比,发现是加了<!doctype html>. 这样子定位并不起效果: document.getEle ...