我们现在准备编写AngularJS应用程序——phonecat。在这一步(第0步)，您将熟悉重要的源代码文件，学习启动包含AngularJS种子项目的开发环境，并在浏览器端运行应用程序。

输入angular-phonecat目录并运行以下命令：

git结账-f步骤-0

此命令将重置phonecat项目的工作目录。建议您在每个学习步骤中运行此命令，并将命令中的数字更改为与您的学习步骤相对应的数字。此命令将清除您在工作目录中所做的任何更改。

运行以下命令：

节点脚本/web-server.js

要启动服务器，命令行终端会在启动后提示http服务器运行在http://localhost :8000。请不要关闭终端，这会关闭服务器。在浏览器中输入http://localhost 33608000/app/index . html即可访问我们的phonecat应用程序。

现在，您应该已经在浏览器中看到了我们的初始应用程序，它非常简单，但是它显示我们的项目已经准备好运行了。

“这里还什么都没有！”显示在应用程序中它是由下面的HTML代码构建的，其中包含了AngularJS的关键元素，这正是我们需要学习的。

app/index.html

！doctype HTML HTML lang=' en ' ng-app head meta charset=' utf-8 ' title my HTML File/title link rel='样式表' href='css/app.css' link rel='样式表' href=' CSS/bootstrap . CSS ' script src=' http : lib/angular/angular . js '/script/headsdypnnothing在此{ '还没有'！'}}/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脚本标记：

脚本src=' http : lib/angular/angular . js '/脚本

这一行代码被加载到angular.js脚本中，该脚本将在浏览器完成整个HTML页面的加载时执行。angular.js脚本运行后，它将寻找包含ng-app指令的HTML标记，该标记定义了AngularJS应用程序的范围。

双大括号绑定表达式：

这里没有{{ '还没有'！'}}/p

这一行代码演示了AngularJS模板——绑定的核心功能，它由双大括号{{}}和表达式“还没到”！”组成作文。

这个绑定告诉AngularJS它需要计算表达式并将结果插入到DOM中。在下一步中，我们将看到DOM可以随着表达式操作的结果变化而实时更新。

AngularJS表达式AngularJS表达式是一个类似于JavaScript的代码片段。AngularJS表达式只在Angular JS的范围内运行，不在整个DOM中运行。

AngularJS应用指南

通过ngApp指令自动引导AngularJS应用是一种简单的方式，适用于大多数情况。在高级开发中，例如，使用脚本加载应用程序，也可以使用bootstrap手动引导AngularJS应用程序。

AngularJS应用程序启动过程有三个要点：

1.注入器注入依赖注入)；用于创建此应用程序；

2.注入器将创建根范围作为我们的应用模型的范围；

3.AngularJS将在根作用域中链接DOM，并从标记有ngApp的HTML标签中逐步处理DOM中的指令和绑定。一旦AngularJS应用程序启动，它将继续监听浏览器的HTML触发事件，如鼠标点击事件、按键事件、HTTP传入响应等改变DOM模型的事件。一旦发生这种事件，AngularJS会自动检测到变化并做出相应的处理和更新。

上述应用程序的结构非常简单。模板包只包含一条指令和一个静态绑定，其中的模型也是空的。接下来，我们将尝试一个稍微复杂一些的应用程序！

我工作目录中的这些文件是干什么用的？

上述应用程序来自AngularJS种子项目，我们通常可以使用AngularJS种子项目来创建新项目。Seed项目包括最新的AngularJS代码库、测试库、脚本和一个简单的应用程序示例，其中包含开发典型web应用程序所需的基本配置。

在本教程中，我们对AngularJS种子项目进行了以下更改：

删除示例应用程序；

将手机图像添加到app/img/phones/；将手机数据文件(JSON)添加到app/phones/；将Twitter Bootstrap文件添加到app/css/和app/img/。练习

尝试向index.html添加关于数学运算的新表达式：

p1 2={{ 1 2 }}/p

摘要

现在让我们转到步骤1，向web应用程序添加一些内容。

以上是AngularJS引导程序的数据整理，后续继续补充相关数据。感谢您对本网站的支持！