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 相关文章推荐
关于IFRAME 自适应高度的研究
Jul 20 Javascript
红米手机抢购的js代码
Mar 10 Javascript
对js关键字命名的疑问介绍
Apr 25 Javascript
JavaScript iframe数据共享接口实现方法
Jan 06 Javascript
angular2使用简单介绍
Mar 01 Javascript
JS字符串长度判断,超出进行自动截取的实例(支持中文)
Mar 06 Javascript
原生Aajax 和jQuery Ajax 写法个人总结
Mar 24 jQuery
Webpack实现按需打包Lodash的几种方法详解
May 08 Javascript
jQuery访问浏览器本地存储cookie、localStorage和sessionStorage的基本用法
Oct 20 jQuery
小程序实现横向滑动日历效果
Oct 21 Javascript
JS实现拖拽元素时与另一元素碰撞检测
Aug 27 Javascript
vue里使用create, mounted调用方法
Apr 26 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
用php代码限制国内IP访问我们网站
2015/09/26 PHP
Yii列表定义与使用分页方法小结(3种方法)
2016/07/15 PHP
关于PHP中字符串与多进制转换函数的实例代码
2016/11/03 PHP
PHP使用ActiveMQ实例
2018/02/05 PHP
关于 byval 与 byref 的区别分析总结
2007/10/08 Javascript
用showModalDialog弹出页面后,提交表单总是弹出一个新窗口
2009/07/18 Javascript
理解Javascript_01_理解内存分配原理分析
2010/10/11 Javascript
再论Javascript的类继承
2011/03/05 Javascript
在子窗口中关闭父窗口的一句代码
2013/10/21 Javascript
js单独获取一个checkbox看其是否被选中
2014/09/22 Javascript
完美兼容各大浏览器的jQuery仿新浪图文淡入淡出间歇滚动特效
2014/11/12 Javascript
node.js中的fs.mkdirSync方法使用说明
2014/12/17 Javascript
基于javascript实现全屏漂浮广告
2016/03/31 Javascript
基于BootstrapValidator的Form表单验证(24)
2016/12/12 Javascript
vue新vue-cli3环境配置和模拟json数据的实例
2018/09/19 Javascript
vue-cli+axios实现文件上传下载功能(下载接收后台返回文件流)
2019/05/10 Javascript
vue 实现websocket发送消息并实时接收消息
2019/12/09 Javascript
解决微信小程序scroll-view组件无横向滚动的问题
2020/02/04 Javascript
小程序开发之模态框组件封装
2020/04/23 Javascript
vue内置组件keep-alive事件动态缓存实例
2020/10/30 Javascript
vue的$http的get请求要加上params操作
2020/11/12 Javascript
python函数返回多个值的示例方法
2013/12/04 Python
python判断一个集合是否包含了另外一个集合中所有项的方法
2015/06/30 Python
Python 中list ,set,dict的大规模查找效率对比详解
2019/10/11 Python
浅谈tensorflow 中tf.concat()的使用
2020/02/07 Python
python实现磁盘日志清理的示例
2020/11/05 Python
浅析rem和em和px vh vw和% 移动端长度单位
2016/04/28 HTML / CSS
美国最灵活的移动提供商:Tello
2017/07/18 全球购物
教师党性分析材料
2014/02/04 职场文书
《棉鞋里的阳光》教学反思
2014/04/24 职场文书
2015年教师节感恩寄语
2015/03/23 职场文书
2015年社区国庆节活动总结
2015/07/30 职场文书
2019企业文化管理制度范本!
2019/08/06 职场文书
《家》读后感:万惜拯救,冷暖自知
2019/09/25 职场文书
Nginx配置并兼容HTTP实现代码解析
2021/03/31 Servers
Java实现斗地主之洗牌发牌
2021/06/14 Java/Android