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 相关文章推荐
javascript 函数声明与函数表达式的区别介绍
Oct 05 Javascript
JS实现静止元素自动移动示例
Apr 14 Javascript
JavaScript动态修改弹出窗口大小的方法
Apr 06 Javascript
js鼠标点击按钮切换图片-图片自动切换-点击左右按钮切换特效代码
Sep 02 Javascript
两种JavaScript的AES加密方式(可与Java相互加解密)
Aug 02 Javascript
javascript滚轮控制模拟滚动条
Oct 19 Javascript
微信小程序 radio单选框组件详解及实例代码
Jan 10 Javascript
vue中使用input[type=&quot;file&quot;]实现文件上传功能
Sep 10 Javascript
js如何获取图片url的Blob值并预览示例代码
Mar 07 Javascript
深入理解JS异步编程-Promise
Jun 03 Javascript
Vue2.0 实现页面缓存和不缓存的方式
Nov 12 Javascript
vue elementui tree 任意级别拖拽功能代码
Aug 31 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
discuz安全提问算法
2007/06/06 PHP
PHP的mysqli_query参数MYSQLI_STORE_RESULT和MYSQLI_USE_RESULT的区别
2014/09/29 PHP
PHP+HTML+JavaScript+Css实现简单爬虫开发
2016/03/28 PHP
PHP实现链式操作的三种方法详解
2017/11/16 PHP
BOOM vs RR BO5 第四场 2.14
2021/03/10 DOTA
IE和Firefox下event事件杂谈
2009/12/18 Javascript
理解javascript定时器中的单线程
2016/02/23 Javascript
Bootstrap学习笔记之js组件(4)
2016/06/12 Javascript
jQuery事件委托之Safari
2016/07/05 Javascript
js获取指定字符前/后的字符串简单实例
2016/10/27 Javascript
JavaScript实现分页效果
2017/03/28 Javascript
使用Bootstrap打造特色进度条效果
2017/05/02 Javascript
vue上传图片组件编写代码
2017/07/26 Javascript
使用JQ完成表格隔行换色的简单实例
2017/08/25 Javascript
关于单文件组件.vue的使用
2018/09/20 Javascript
浅谈Vue 性能优化之深挖数组
2018/12/11 Javascript
VUE+elementui组件在table-cell单元格中绘制微型echarts图
2020/04/20 Javascript
Postman参数化实现过程及原理解析
2020/08/13 Javascript
Vue 电商后台管理项目阶段性总结(推荐)
2020/08/22 Javascript
[08:47]DOTA2每周TOP10 精彩击杀集锦vol.6
2014/06/25 DOTA
[01:23:59]2018DOTA2亚洲邀请赛 4.1 小组赛 B组 VP vs Secret
2018/04/03 DOTA
介绍Python中几个常用的类方法
2015/04/08 Python
Python NumPy库安装使用笔记
2015/05/18 Python
Python smallseg分词用法实例分析
2015/05/28 Python
python模拟登录并且保持cookie的方法详解
2017/04/04 Python
Python微信企业号开发之回调模式接收微信端客户端发送消息及被动返回消息示例
2017/08/21 Python
Django中的文件的上传的几种方式
2018/07/23 Python
python如何以表格形式打印输出的方法示例
2019/06/21 Python
使用python实现男神女神颜值打分系统(推荐)
2019/10/31 Python
使用keras和tensorflow保存为可部署的pb格式
2020/05/25 Python
python能否java成为主流语言吗
2020/06/22 Python
Python如何实现远程方法调用
2020/08/07 Python
Html5基于canvas实现电子签名并生成PDF文档
2020/12/07 HTML / CSS
关爱老人标语
2014/06/21 职场文书
电话营销开场白
2015/05/29 职场文书
太行山上观后感
2015/06/05 职场文书