[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 ...
随机推荐
- [code]字母重排
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 3 ...
- windows加固方案
1 账号管理.认证授权.... 1 1.1 账号... 1 1.2 口令... 1 1.3 授权... 2 2 日志配置操作.... 3 3 IP ...
- filters
http://www.cloudera.com/content/cloudera/en/documentation/core/latest/topics/admin_hbase_filtering.h ...
- ubuntu14.04英文环境下安装中文输入法
ubuntu14.04英文环境下安装中文输入法 发表于1年前(2014-07-12 20:12) 阅读(4478) | 评论(0) 3人收藏此文章, 我要收藏 赞1 9月19日成都 OSC 源创会 ...
- php生成html 伪静态？？
先建一个网页模板文件,命名为tmp.html,内容如下: <!DOCTYPE html> <html> <head> <title&g ...
- [iOS]Objective-C 第一节课
Objective-C 第一节课 本节课的主要内容 创建Objective-C的第一个工程 HelloWorld Objective-C中的字符串 创建Objective-C的第一个工程 打开Xcod ...
- windows服务器下IIS7 安装URL Rewrite（URL重写）模块
URL Rewrite Module是一个基于规则的URL重写引擎,用于在URL被Web服务器处理之前改变请求的URL.对于动态Web应用程序,它可以为用户和seo/seo.html" ta ...
- IBATIS事务处理 - - 博客频道 - CSDN.NET
body { font-family: "Microsoft YaHei UI","Microsoft YaHei",SimSun,"Segoe UI ...
- 外网主机访问虚拟机下的Web服务器_服务器应用_Linux公社-Linux系统门户网站
body{ font-family: "Microsoft YaHei UI","Microsoft YaHei",SimSun,"Segoe UI& ...
- ASer Python学习笔记
最近又开始学习python了,希望自己能坚持下去. 我看的书是thinkingpython,是在豆瓣的python学习组看到的. 连续看了3,4天左右,然后尝试着写了个小程序,复制文件的,代码如下: ...