AngularJS入门教程引导程序


Posted in Javascript onAugust 18, 2016

我们现在开始准备编写AngularJS应用——phonecat。这一步骤(步骤0),您将会熟悉重要的源代码文件,学习启动包含AngularJS种子项目的开发环境,并在浏览器端运行应用。

进入angular-phonecat目录,运行如下命令:

git checkout -f step-0

该命令将重置phonecat项目的工作目录,建议您在每一学习步骤运行此命令,将命令中的数字改成您学习步骤对应的数字,该命令将清除您在工作目录内做的任何更改。

运行以下命令:

node scripts/web-server.js

来启动服务器,启动后命令行终端将会提示Http Server running at http://localhost:8000,请不要关闭该终端,关闭该终端即关闭了服务器。在浏览器中输入http://localhost:8000/app/index.html来访问我们的phonecat应用。

现在,在浏览器中您应该已经看到了我们的初始应用,很简单,但说明我们的项目已经可以运行了。

应用中显示的“Nothing here yet!”是由如下HTML代码构建而成,代码中包含了AngularJS的关键元素,正是我们需要学习的。

app/index.html

<!doctype html>
<html lang="en" ng-app>
<head>
  <meta charset="utf-8">
  <title>My HTML File</title>
  <link rel="stylesheet" href="css/app.css">
  <link rel="stylesheet" href="css/bootstrap.css">
  <script src="lib/angular/angular.js"></script>
</head>
<body>
<p>Nothing here {{'yet' + '!'}}</p>
</body>
</html>

 代码在做什么呢?

ng-app指令:

<html lang="en" ng-app>

ng-app指令标记了AngularJS脚本的作用域,在<html>中添加ng-app属性即说明整个<html>都是AngularJS脚本作用域。开发者也可以在局部使用ng-app指令,如<div ng-app>,则AngularJS脚本仅在该<div>中运行。

AngularJS脚本标签:

<script src="lib/angular/angular.js"></script>

这行代码载入angular.js脚本,当浏览器将整个HTML页面载入完毕后将会执行该angular.js脚本,angular.js脚本运行后将会寻找含有ng-app指令的HTML标签,该标签即定义了AngularJS应用的作用域。

双大括号绑定的表达式:

<p>Nothing here {{'yet' + '!'}}</p>

这行代码演示了AngularJS模板的核心功能——绑定,这个绑定由双大括号{{}}和表达式'yet' + '!'组成。

这个绑定告诉AngularJS需要运算其中的表达式并将结果插入DOM中,接下来的步骤我们将看到,DOM可以随着表达式运算结果的改变而实时更新。

AngularJS表达式Angular expression是一种类似于JavaScript的代码片段,AngularJS表达式仅在AngularJS的作用域中运行,而不是在整个DOM中运行。

引导AngularJS应用

通过ngApp指令来自动引导AngularJS应用是一种简洁的方式,适合大多数情况。在高级开发中,例如使用脚本装载应用,您也可以使用bootstrap手动引导AngularJS应用。

AngularJS应用引导过程有3个重要点:

1.注入器(injector)将用于创建此应用程序的依赖注入(dependency injection);

2.注入器将会创建根作用域作为我们应用模型的范围;

3.AngularJS将会链接根作用域中的DOM,从用ngApp标记的HTML标签开始,逐步处理DOM中指令和绑定。
一旦AngularJS应用引导完毕,它将继续侦听浏览器的HTML触发事件,如鼠标点击事件、按键事件、HTTP传入响应等改变DOM模型的事件。这类事件一旦发生,AngularJS将会自动检测变化,并作出相应的处理及更新。

上面这个应用的结构非常简单。该模板包仅含一个指令和一个静态绑定,其中的模型也是空的。下一步我们尝试稍复杂的应用!

 AngularJS入门教程引导程序

 我工作目录中这些文件是干什么的?

上面的应用来自于AngularJS种子项目,我们通常可以使用AngularJS种子项目来创建新项目。种子项目包括最新的AngularJS代码库、测试库、脚本和一个简单的应用程序示例,它包含了开发一个典型的web应用程序所需的基本配置。

对于本教程,我们对AngularJS种子项目进行了下列更改:

删除示例应用程序;

  1. 添加手机图像到app/img/phones/;
  2. 添加手机数据文件(JSON)到app/phones/;
  3. 添加Twitter Bootstrap文件到app/css/ 和app/img/。

练习

试试把关于数学运算的新表达式添加到index.html:

<p>1 + 2 = {{ 1 + 2 }}</p>

总结

现在让我们转到步骤1,将一些内容添加到web应用程序。

 以上就是对AngularJS 引导程序的资料整理,后续继续补充相关资料,谢谢大家对本站的支持!

Javascript 相关文章推荐
浅谈JS闭包中的循环绑定处理程序
Nov 09 Javascript
使用javascript实现Iframe自适应高度
Dec 24 Javascript
详解Bootstrap各式各样的按钮(推荐)
Dec 13 Javascript
详解Vue.js动态绑定class
Dec 20 Javascript
JS给按钮添加跳转功能类似a标签
May 30 Javascript
Angular 4依赖注入学习教程之Injectable装饰器(六)
Jun 04 Javascript
JS开发自己的类库实例分析
Aug 28 Javascript
生成无限制的微信小程序码的示例代码
Sep 20 Javascript
Vue.js计算机属性computed和methods方法详解
Oct 12 Javascript
详解vue中$nextTick和$forceUpdate的用法
Dec 11 Javascript
JavaScript 函数用法详解【函数定义、参数、绑定、作用域、闭包等】
May 12 Javascript
JavaScript设计模式---单例模式详解【四种基本形式】
May 16 Javascript
Bootstrap模态框(modal)垂直居中的实例代码
Aug 18 #Javascript
js 获取站点应用名的简单实例
Aug 18 #Javascript
BootStrap日期控件在模态框中选择时间下拉菜单无效的原因及解决办法(火狐下不能点击)
Aug 18 #Javascript
js修改onclick动作的四种方法(推荐)
Aug 18 #Javascript
AngularJS 整理一些优化的小技巧
Aug 18 #Javascript
BootStrap下拉框在firefox浏览器界面不友好的解决方案
Aug 18 #Javascript
js获取form表单所有数据的简单方法
Aug 18 #Javascript
You might like
基于PHP技术开发客服工单系统
2016/01/06 PHP
Laravel 加载第三方类库的方法
2018/04/20 PHP
php array_map()函数实例用法
2021/03/03 PHP
对联广告js flash激活
2006/10/19 Javascript
javascript笔试题目附答案@20081025_jb51.net
2008/10/26 Javascript
jQuery 可以拖动的div实现代码 脚本之家修正版
2009/06/26 Javascript
Extjs中常用表单介绍与应用
2010/06/07 Javascript
为JS扩展Array.prototype.indexOf引发的问题探讨及解决
2013/04/24 Javascript
JSP中使用JavaScript动态插入删除输入框实现代码
2014/06/13 Javascript
使用JQuery 加载页面时调用JS的实现方法
2016/05/30 Javascript
JavaScript 对象详细整理总结
2016/09/29 Javascript
微信小程序 缓存(本地缓存、异步缓存、同步缓存)详解
2017/01/17 Javascript
bootstrap table 数据表格行内修改的实现代码
2017/02/13 Javascript
ajax +NodeJS 实现图片上传实例
2017/06/06 NodeJs
基于jQuery的左滑出现删除按钮的示例
2017/08/29 jQuery
详解Node全局变量global模块
2017/09/28 Javascript
使用JS获取页面上的所有标签
2018/10/18 Javascript
layui表单提交到后台自动封装到实体类的方法
2019/09/12 Javascript
python基于urllib实现按照百度音乐分类下载mp3的方法
2015/05/25 Python
python绘制条形图方法代码详解
2017/12/19 Python
Python3+PyInstall+Sciter解决报错缺少dll、html等文件问题
2019/07/15 Python
Python中zip()函数的简单用法举例
2019/09/02 Python
python-xpath获取html文档的部分内容
2020/03/06 Python
分布式全文检索引擎ElasticSearch原理及使用实例
2020/11/14 Python
python安装sklearn模块的方法详解
2020/11/28 Python
莫斯科高科技在线商店:KremlinStore
2019/03/13 全球购物
银行实习鉴定
2013/12/13 职场文书
护士自我评价范文
2014/01/25 职场文书
语文教学随笔感言
2014/02/18 职场文书
运动会广播稿20字
2014/02/18 职场文书
领导调研接待方案
2014/02/27 职场文书
党的群众路线教育实践活动对照检查剖析材料
2014/10/09 职场文书
领导走群众路线整改措施思想汇报
2014/10/12 职场文书
投标邀请书范本
2015/02/02 职场文书
教你使用Pandas直接核算Excel中快递费用
2021/05/12 Python
SQL实战演练之网上商城数据库商品类别数据操作
2021/10/24 MySQL