angularjs 1.3.x入门教程 2 Bootstrapping

经过第一步的环境安装,现在你已经可以构建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,并执行其中所有的指令


你可能感兴趣的:(AngularJS,入门指南,入门教程)