0-启动

现在,你准备建一个AngularJS的phonecat应用,在这一步,你将与大多数源码相熟,学习在一个angular-seed中启动开发服务器,在浏览器中运行程序。 在angular-phonecat目录中,运行命令

git checkout -f step-0

这样会重置你的工作区间到程序app的第0步。 你必须重复教程中的每一个步骤,并逐步修改步号,这将造成你在工作目录中所做修改丢失。 如果你还没有准备好,你必须安装依赖:

npm install

在浏览器中观看应用运行,打开一个特定的终端或命令行窗口,运行npm start 去启动web服务器,现在给应用你打开浏览器窗口,导航到 http://localhost:8000/app/ 你能看见页面,虽然不是让人十分的兴奋,但是还好。 使用下面的HTML代码构造一个显示“Nothing here yet!”的HTML页面,代码中包含了一些Angular的关键元素,我们将会处理。

<!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给客户端使用下划线命名法,用驼峰命名法代表实现他们的命令)。这个命令用来标识这个html元素Angular将认为是我们程序的根元素,这就给程序开发者自由,告诉Angular把整个html页面或者一部分看成Angular应用。 AngularJS脚本标签

<script src="bower_components/angular/angular.js">

这个代码下载angular.js脚本并注册一个回调,当包含他的HTML被下载完全,他会被浏览器执行。当回调被执行,Angular查找ngApp命令,如果Angular找到了命令,他就会从命令定义ngAPp所代表的应用DOM元素处启动程序。 双括号数据绑定的表达式

Nothing here {{'yet' + '!'}}

这行展示了Angular模式的两个核心要点:

  • 一个绑定,用双括号表示 {{}}

  • 这个绑定中一个简单的表达式'yet' + '!'

绑定告诉Angular,他必须计算表达式,然后将结果替换到绑定的位置,相对于一次提交,我们将会在下步看到,无论表达式计算出任何改变,绑定都会有效持续的提交。 Angular表达式是一个类JavaScript的代码片段,由Angular在当前模型范围环境中计算,而还是在全局范围内的环境。 像期盼的一样,当Angular处理了这个模板之后,页面包含了文本:“Nothing here yet!”

启动AngularJS应用

在大多数情况下,用ngApp命令自动启动Angular应用是很容易舒适的,更进一步,像使用脚本读取,你能用 imperative /manual way 去启动应用。 当应用启动的时候,这有三件时发生:

  1. 用于依赖注入的注册器创建了。

  2. 注册器将会创建一个根范围,他会变成我们程序模型的上下文环境。

  3. Angular 会编译从ngApp开始的DOM根元素,处理在这过程中遇到的每一个命令和数据绑定。

当应用启动之后,他会等待浏览器的事件(像是鼠标点击,键盘按下,来了HTTP响应)可能会改变模型。当事件发生,Angular探测他是否引发任何模型改变,如果改变被发现,Angular将会影响绑定去更新视图来反应他们。 当前我们的应用机构还很简单,模板只包含一个命令和一个静态绑定,我们的模型是空的,很快就会改变。

这些文件在我的工作目录中是什么?

我们工作目录中的大多数文件来自 angular-seed项目,他是典型用来启动Angular项目,这个种子项目是预配置好的angular框架(通过bower 在 app/bower_components/目录)和开发典型网络应用的工具(通过npm) 因为这个教程的目的,我们修改了angular-seed项目如下:

  • 移开例子应用

  • 增加电话图片(app/img/phones)

  • 增加了电话数据文件(JSON)到 app/phones/

  • 在bower.json文件中增加了Bootstrap的依赖

试验

尝试增加一个新的表达式到index.html,那会做一些数学:

<p>1 + 2 = {{ 1 + 2 }}</p>

总结

现在我们去 第一步 并增加一些内容到web应用。 原文地址: https://docs.angularjs.org/tutorial/step_00

你可能感兴趣的:(0-启动)