经过第一步的环境安装,现在你已经可以构建phone app 这个应用,在这一节中你将会熟悉最重要的代码文件,学习怎样启动与angular-seed 绑定的开发服务器。以及在浏览器中浏览应用。
启动 git-bush
进入angular-phonecat 文件夹,输入命令
git checkout -f step-0
这个命令将你的应用恢复到step-0,同事你在文件夹中所作的所有变更都将丢失
如果你没有安装依赖(第一节中的依赖安装),运行如下命令
npm install
安装完毕后,输入
npm start
启动服务器,在浏览器中输入
http://localhost:8000/app/ 看到Nothing here yet! 表示应用启动成功
打开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>
这些code 做了些什么?
ng-app
指令:
<html ng-app>
ng-app 表示一个名为ngApp 的 angularjs 属性,angularjs 用
spinal
-
case代表它的定制化属性,用驼峰格式camelCase
代表实现属性的指令。即ng-app是属性,起对应的指令是ngApp。这个指令用标记html 元素,以便让angular将其作为
根元素。这个特性可以让开发者指定整个页面或者其中一部分作为angularjs 应用。
<script src="bower_components/angular/angular.js">
这条语句会下载js文件,同事在也面完成的时候执行回调函数,将标记了ng-app的元素进行bootstraping.
表达式中的双向绑定
Nothing here {{'yet' + '!'}}
这条语句中有两个angularjs模版的和核心特性
一个用{{}}表示的绑定
一个简单的表达式'yet'+'!'
绑定包塑angularjs计算表达式的结果,并将其放在dom中绑定所在的位置。注意,这里的绑定是个名词,代表{{}}。
angular表达式,和一个js 代码片段类似,会被angular框架在当前模型作用域上下文中计算结果,而不是在全局上下文中,比如window
在bootstrap app 中,有三件重要的事情
1 injector 被用于创建依赖
2 injector 会创建root scope, 这将会成为应用中model 的上下文。
3 angular 会“编译” ngApp指令标记的DOM,并执行其中所有的指令