angularjs 1.3.x入门教程 2 Bootstrapping

来源：互联网发布：安卓照片怎么导入mac 编辑：程序博客网时间：2024/05/16 05:32

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

0 0