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,并执行其中所有的指令


评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值