AngularJs入门教程之环境搭建+创建应用示例


Posted in Javascript onNovember 01, 2016

本文简单讲述了AngularJs环境搭建+创建应用的方法。分享给大家供大家参考,具体如下:

概述

AngularJS是Google工程师研发的一款JS框架,官方文档中对它的描述是,它是完全使用JavaScript编写的客户端技术,同其他历史悠久的Web技术(HTML,CSS等)配合使用,使得Web开发变得更简单、更高效。它是笔者用过的比较有特色的一款框架,以HTML作为模版语言并扩展HTML属性,使得应用组件开发保持高度的清晰和一致。本系列文章?⒁允导实陌咐?虻サ慕樯?ngularJs的特性和用法。

开发环境搭建

俗话说"巧妇难为无米之炊",我们要使用AngularJs开发Web应用首先要做的就是获取AngularJs开发库,AngularJs官网( https://angularjs.org/)有提供下载。或者点击此处本站下载

获取到AngularJs库文件我们就可以开始了,但是为了提高工作效率,一款好的集成开发工具是必备可少的,这里笔者使用的是WebStorm。Chrome和Firefox提供的开发人员工具非常方便代码调试,笔者使用的是Chrome,这里也推荐大家使用。下图是WebStorm的工作界面,读者也可以根据喜好自行选择。

AngularJs入门教程之环境搭建+创建应用示例

创建第一个应用

新建一个工程,??ngularJs库文件夹拷贝的工程中。

接下来我们编写第一个HTML5页面。

<!DOCTYPE html>
<html ng-app>
<head lang="en">
  <meta charset="UTF-8">
  <script type="text/javascript" src="angular-1.3.0.14/angular.js"></script>
  <title>tutorial01_1</title>
</head>
<body>
<div> {{"First Angular App!"}}</div>
<div>{{"Anguar"}} </div>
</body>
</html>

我们通过<script>标签引入angular.js文件,用编辑器打开angular.js可以看到最后有这样几行代码:

jqLite(document).ready(function() {
  angularInit(document, bootstrap);
});

在页面加载时调用angularInit方法,也就是说我们引入angular.js文件后页面加载时也就启动了AngularJs。

<html>标签中定义了一个属性ng-app,它是AngularJs的内置指令,用来告诉AngularJs该标签之后的所有DOM元素都由AngularJs来管理。

"{{内容}}"这种形式为AngularJs的表达式,用来向HTML页面中输出内容。

在浏览器中运行该HTML页面,可以看到我们通过表达式输出的文字。

AngularJs入门教程之环境搭建+创建应用示例

上面提到的ng-app指令可以出现在页面中的任何标签的属性中,例如我们可以把它放在第二个div标签中:

<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="UTF-8">
  <script type="text/javascript" src="angular-1.3.0.14/angular.js"></script>
  <title>tutorial01_2</title>
</head>
<body>
<div> {{"First Angular App!"}}</div>
<div ng-app>{{"Anguar"}} </div>
</body>
</html>

再次运行会发现,{{"First Angular App!"}}原样输出,这是因为只有ng-app指令之后的元素才会由AngularJs管理,所以我们通常把该指令放在html标签中,让AngularJs管理整个页面。

AngularJs入门教程之环境搭建+创建应用示例

希望本文所述对大家AngularJS程序设计有所帮助。

Javascript 相关文章推荐
javascript延时重复执行函数 lLoopRun.js
Jun 29 Javascript
Extjs学习笔记之六 面版
Jan 08 Javascript
Jquery中dialog属性小记
Sep 03 Javascript
Javascript 完美运动框架(逐行分析代码,让你轻松了运动的原理)
Jan 23 Javascript
jQuery UI库中dialog对话框功能使用全解析
Apr 23 Javascript
JavaScript获取URL中参数querystring的方法详解
Oct 11 Javascript
详解React中setState回调函数
Jun 14 Javascript
vue解决一个方法同时发送多个请求的问题
Sep 25 Javascript
微信小程序MUI导航栏透明渐变功能示例(通过改变opacity实现)
Jan 24 Javascript
一些手写JavaScript常用的函数汇总
Apr 16 Javascript
微信小程序使用Vant Weapp组件库的方法步骤
Aug 01 Javascript
Vue 实现一个简单的鼠标拖拽滚动效果插件
Dec 10 Vue.js
jQuery双向列表选择器select版
Nov 01 #Javascript
jQuery双向列表选择器DIV模拟版
Nov 01 #Javascript
JS button按钮实现submit按钮提交效果
Nov 01 #Javascript
Javascript 动态改变imput type属性
Nov 01 #Javascript
[原创]JavaScript语法高亮插件highlight.js用法详解【附highlight.js本站下载】
Nov 01 #Javascript
javascript 内置对象及常见API详细介绍
Nov 01 #Javascript
Vue.js组件使用开发实例教程
Nov 01 #Javascript
You might like
基于OpenCV的PHP图像人脸识别技术
2009/10/11 PHP
解析PHP中的unset究竟会不会释放内存
2013/07/18 PHP
php教程之魔术方法的使用示例(php魔术函数)
2014/02/12 PHP
php mailer类调用远程SMTP服务器发送邮件实现方法
2016/03/04 PHP
PHP中的正则表达式实例详解
2017/04/25 PHP
TP5框架实现签到功能的方法分析
2020/04/05 PHP
JavaScript实际应用:innerHTMl和确认提示的使用
2006/06/22 Javascript
Javascript 复制数组实现代码
2009/11/26 Javascript
javascript showModalDialog 多层模态窗口实现页面提交及刷新的代码
2009/11/28 Javascript
基于jquery的实现简单的表格中增加或删除下一行
2010/08/01 Javascript
jQuery插件开发基础简单介绍
2013/01/07 Javascript
jQuery select表单提交省市区城市三级联动核心代码
2014/06/09 Javascript
BootStrap的JS插件之轮播效果案例详解
2016/05/16 Javascript
如何用JavaScript实现动态修改CSS样式表
2016/05/20 Javascript
详解XMLHttpRequest(二)响应属性、二进制数据、监测上传下载进度
2016/09/14 Javascript
JS实现的相册图片左右滚动完整实例
2016/11/23 Javascript
原生JavaScript实现Tooltip浮动提示框特效
2017/03/07 Javascript
解决vue中使用Axios调用接口时出现的ie数据处理问题
2018/08/13 Javascript
如何用RxJS实现Redux Form
2018/12/29 Javascript
使用weixin-java-miniapp配置进行单个小程序的配置详解
2019/03/29 Javascript
JavaScript中callee和caller的区别与用法实例分析
2019/06/28 Javascript
JS实现简单移动端鼠标拖拽
2020/07/23 Javascript
[01:31]DOTA2上海特级锦标赛 SECRET战队完整宣传片
2016/03/16 DOTA
由Python运算π的值深入Python中科学计算的实现
2015/04/17 Python
详解如何用OpenCV + Python 实现人脸识别
2017/10/20 Python
python3.4.3下逐行读入txt文本并去重的方法
2018/04/29 Python
Python列表切片操作实例总结
2019/02/19 Python
Django框架中间件定义与使用方法案例分析
2019/11/28 Python
Python 解码Base64 得到码流格式文本实例
2020/01/09 Python
Python如何将将模块分割成多个文件
2020/08/04 Python
python 如何调用远程接口
2020/09/11 Python
html5教程画矩形代码分享
2013/12/04 HTML / CSS
岳父生日宴会答谢词
2014/01/13 职场文书
自考生自我评价分享
2014/01/18 职场文书
民政局离婚协议书范本
2014/10/20 职场文书
关于办理居住证的介绍信模板
2019/11/27 职场文书