在这一节的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的更多相关文章

  1. Angular 2.0 的设计方法和原则

    转载自:Angular 2.0 的设计方法和原则 在开始实现Angular 2.0版本之际,我们认为应该着手写一些东西,告诉大家我们在设计上的考虑,以及为什么做这样的改变.现在把这些和大家一起分享,从 ...

  2. Angular从0到1：function（下）

    1.前言 2.function(下) 2.13.angular.isArray(★★) angular.isArray用于判断对象是不是数组,等价于Array.isArray console.log( ...

  3. [转贴]有关Angular 2.0的一切

    对Angular 2.0的策略有疑问吗?就在这里提吧.在接下来的这篇文章里,我会解释Angular 2.0的主要特性区域,以及每个变化背后的动机.每个部分之后,我将提供自己在设计过程中的意见和见解,包 ...

  4. 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 (四)第五节: ...

  5. 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 (四)第五节: ...

  6. 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 (四)第五节: ...

  7. 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 (四)第五节: ...

  8. 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 (四)第五节: ...

  9. [Angular Tutorial]PhoneCat Tutorial App

    (注:曾经在<不敢止步>一书中看到学到一个观点,作者认为学习一门技术最好的方法就是翻译某部领域书籍.这里我决定做一次尝试,接下来花1个月左右时间,将Angular Tutorial Pho ...

  10. 基于ZKWeb + Angular 4.0的开源管理后台Demo

    这是一套基于ZKWeb网页框架和Angular 4.0编写的开源管理后台Demo,实现了前后端分离和模块化开发, 地址是: https://github.com/zkweb-framework/ZKW ...

随机推荐

  1. itext操作PDF文件添加水印

    功能描述:添加图片和文字水印 /** * * [功能描述:添加图片和文字水印] [功能详细描述:功能详细描述] * @param srcFile 待加水印文件 * @param destFile 加水 ...

  2. 利用id来进行树状数组，而不是离散化以后的val HDU 4417 离线+树状数组

    题目大意:给你一个长度为n的数组,问[L,R]之间<=val的个数 思路:就像标题说的那样就行了.树状数组不一定是离散化以后的区间,而可以是id //看看会不会爆int!数组会不会少了一维! / ...

  3. 关于日期条件查询的sql 代码

    daysqhql = "select sum(c.casenum) from domain.Case c where" + " convert(varchar(10),c ...

  4. css背景图片、隐藏、指针、垂直居中、去除下划线、缩进、列表类型

    <html><head lang="en"> <meta charset="UTF-8"> <title>< ...

  5. drawRect & layoutSubviews 调用时间

    首先两个方法都是异步执行.layoutSubviews方便数据计算,drawRect方便视图重绘.   layoutSubviews在以下情况下会被调用: 1.init初始化不会触发layoutSub ...

  6. UISegmentedControl 踩坑

    @interface JLMyContactsViewController () @property (nonatomic, strong)   UIImageView *navImageView; ...

  7. Mac系统中各个文件夹简单介绍（转）

    一.说明: Mac OS X,这是一个基于UNIX核心的系统,增强了系统的稳定性.性能以及响应能力.它能通过对称多处理技术充分发挥双处理器的优势,提供无与伦比的2D.3D和多媒体图形性能以及广泛的字体 ...

  8. MVC和三层架构的区别

    MVC是一种设计模式,Modal,View,Controller,三层分开,解开耦合,方便替换. 三层架构包括 UI层,业务逻辑层,Dao层.UI层负责展示数据,业务逻辑层具体处理数据,Dao层负责和 ...

  9. Ubuntu安装pycharm

    在安装pycharm之前,想看一下需要安装那些软件. 在安装前先下载软件 JDK http://www.oracle.com/technetwork/java/javase/downloads/jdk ...

  10. [zoj解题] 1203

    #include <stdio.h> #include <stdlib.h> #include <math.h> #define MAXN 100 #define ...