通过上一章的学习，我们现在已经成功的安装了nodejs，并使用npm安装了bower，同时，还学会了使用bower来下载angularjs。当然了，更重要的，我们还有一个超级厉害的工具：http-server，它使得我们可以在任何路径中，提供http服务。
下面，让我们使用它们来开发第一个程序。
## 建立文件
我们在任意位置新建一个文件夹做为我们本次开发的根目录，然后打开`git bash`，使用cd命令进入这个文件夹下。
然后，我们新建第一个`index.html`文件：
~~~
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Hello Yunzhier</title>
</head>
<body>
Hello Yunzhier.
</body>
</html>
~~~
## 启动http-server
如果此时，http-server还在另一个`git bash`中启动，那么会报一个启动错误：
这个原因，是由于http-server默认启动在8080端口，由于在8080端口提供服务的只能有一个，所以产生了端口被占用的错误。解决的方法也很简单，终止掉前面那个http-server就可以了，然后再重新启动。
成功启动后：
### 排错
js的语法错误，会出现在`控制台`：
未成功引用文件的网络错误，会出现在`网络`：
在这里，我们除了需要观察name的颜色外，更多还需要注意status（状态码）。例如，如果有需要引入的文件未找到：
200 OK 成功
304 Not Modified 文件未修改 直接加载了缓存文件。
404 Not Found 页面不存在
页面不存在，大多是由于链接地址错误引起的，这时候，我们需要查看Request URL中的地址，是否是我们预期的地址，地址的书写是否存在错误。
## 下载angularjs
下面，我们再打开一个git bash。然后在这个窗口中，使用bower来下载angularjs。
`bower install angularjs#1.5.7 `
成功下载后，目录结构如下：
~~~
├── bower_components
│ └── angular
│ ├── LICENSE.md
│ ├── README.md
│ ├── angular-csp.css
│ ├── angular.js
│ ├── angular.min.js
│ ├── angular.min.js.gzip
│ ├── angular.min.js.map
│ ├── bower.json
│ ├── index.js
│ └── package.json
└── index.html
~~~
我们需要引用的是`angular.js`，在程序开发时，我们推荐引入未压缩的版本，这样报错看源代码时，不至于凌乱，出现错误时，看出错代码的位置也会感觉更友好。
## 引用angularjs并使用
使用`<script src`引入angularjs后，我们对文件进行如下改写：
`index.html`
~~~
- <html lang="en" >
+ <html lang="en" ng-app>
- Hello Yunzhier.
+ {{'Hi' + ' Yunzhier'}}
~~~
以后，我们的代码修改，大多会以上述形式出现，`-`：删除代码；`+`：增加代码。
保存后进行测试：
我们引入angularjs后，对文档进行了两处修改。
1. 在`html`标签处增加了`ng-app`，意思是说`<html></html>`中的内容全部交给angularjs管理，规定了angularjs生效的边界。当然了，我们还可以把它放到`<body>`标签中。
2. 增加了``{{}}``，这是angularjs在html中输出内容（数据绑定）的标准写法。``{{}}``中可以放置js语句，也可以输出后面我们要学到的变量。
`'Hi' + ' Yunzhier'`是js语句，意思是两个字符串的拼接，我们还可以使用其它运算符，比如：
`3 * 5 = {{3*5}}`
`index.html`
~~~
<!DOCTYPE html>
<html lang="en" ng-app>
<head>
<meta charset="UTF-8">
<title>Hello Yunzhier</title>
<script src="bower_components/angular/angular.js"></script>
</head>
<body>
{{'Hi ' + 'Yunzhier'}}
</body>
</html>
~~~
为了更好的理解`ng-app`的作用，我们给出以下示例：
~~~
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>hello</title>
<script src="bower_components/angular/angular.js"></script>
</head>
<body>
<div ng-app>
{{2*5}}
<div>
{{3*8}}
</div>
</div>
<div>
{{2*5}}
</div>
</body>
</html>
~~~
我们将ng-app由html标签中删除，然后在BODY中增加两个DIV，其中一个加入ng-app。
效果如下：
没错，正如我们上面讲的，np-app规定了angularjs的边界，边界内的属于angularjs管理，边界外的就不属于angularjs管理。
一般来讲，我们会把html全部交给angularjs来管理。
【注意】：
在开发过程中，你需要首先进行以下设置，并保持控制台处于打开状态，以防止因文件缓存带来的不必要的困扰。
- 前言
- 第一章：准备知识
- 第一节：GIT
- 第二节：Node.js
- 第三节：http-server
- 第四节：bower
- 第五节：firefox+chrome
- 第二章：官方示例教程
- 第零节：Hello Yunzhier
- 第一节：静态模板
- 第二节：MVC
- 回调函数
- 第三节：组件
- 第四节：重构组件
- 2.4.1 调用组件
- 2.4.2 规划目录结构
- 2.4.3 剥离V层
- 2.4.4 大话测试
- 第五节：循环过滤器
- 第六节：双向数据绑定
- 第七节：XHR与依赖注入
- 第八节：添加缩略图
- 第九节：模拟页面跳转
- 2.9.1 使用bower
- 2.9.2 使用grunt
- 第十节：完善手机详情页
- 第十一节：自定义过滤器
- 第十二节：行为处理
- 第十三节：封装请求
- 第十四节：应用动画
- 第十五节：总结
- 第三章：菜谱管理示例
- 第四章：总结