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 相关文章推荐
用js遍历 table的脚本
Jul 23 Javascript
ASP.NET jQuery 实例9  通过控件hyperlink实现返回顶部效果
Feb 03 Javascript
获取内联和链接中的样式(js代码)
Apr 11 Javascript
js中小数转换整数的方法
Jan 26 Javascript
JavaScript fontcolor方法入门实例(按照指定的颜色来显示字符串)
Oct 17 Javascript
jquery获取checkbox的值并post提交
Jan 14 Javascript
AngularJS单选框及多选框实现双向动态绑定
Jan 13 Javascript
CSS3 3D 技术手把手教你玩转
Sep 02 Javascript
js实现移动端编辑添加地址【模仿京东】
Apr 28 Javascript
JavaScript编写棋盘覆盖代码详解
Aug 28 Javascript
Nginx 配置多站点vhost 的方法
Jan 07 Javascript
深入浅析React中diff算法
May 19 Javascript
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
40年前的这部特摄片恐龙特级克塞号80后的共同回忆
2020/03/08 日漫
[FAQ]PHP中的一些常识:类篇
2006/10/09 PHP
php下清空字符串中的HTML标签的代码
2010/09/06 PHP
CI(CodeIgniter)框架介绍
2014/06/09 PHP
CodeIgniter实现从网站抓取图片并自动下载到文件夹里的方法
2015/06/17 PHP
javascript 限制输入和粘贴(IE,firefox测试通过)
2008/11/14 Javascript
JS+XML 省份和城市之间的联动实现代码
2009/10/14 Javascript
『JavaScript』限制Input只能输入数字实现思路及代码
2013/04/22 Javascript
JSON+HTML实现国家省市联动选择效果
2014/05/18 Javascript
JS 打印功能代码可实现打印预览、打印设置等
2014/10/31 Javascript
jquery实现简洁文件上传表单样式
2015/11/02 Javascript
jquery遍历table的tr获取td的值实现方法
2016/05/19 Javascript
Javascript 实现匿名递归的实例代码
2017/05/25 Javascript
浅谈vue中慎用style的scoped属性
2017/11/28 Javascript
浅谈webpack 自动刷新与解析
2018/04/09 Javascript
vue安装和使用scss及sass与scss的区别详解
2018/10/15 Javascript
JavaScript学习笔记之基于定时器实现图片无缝滚动功能详解
2019/01/09 Javascript
echarts实现词云自定义形状的示例代码
2019/02/20 Javascript
Jquery动态列功能完整实例
2019/08/30 jQuery
jQuery HTML css()方法与css类实例详解
2020/05/20 jQuery
[42:23]完美世界DOTA2联赛PWL S3 Forest vs Rebirth 第二场 12.10
2020/12/13 DOTA
在Python中操作字符串之replace()方法的使用
2015/05/19 Python
python opencv实现图片旋转矩形分割
2018/07/26 Python
python 二维数组90度旋转的方法
2019/01/28 Python
Python操作excel的方法总结(xlrd、xlwt、openpyxl)
2019/09/02 Python
python Dijkstra算法实现最短路径问题的方法
2019/09/19 Python
python DataFrame转dict字典过程详解
2019/12/26 Python
K近邻法(KNN)相关知识总结以及如何用python实现
2021/01/28 Python
森海塞尔美国官网:Sennheiser耳机与耳麦
2017/07/19 全球购物
Origins加拿大官网:雅诗兰黛集团高端植物护肤品牌
2017/11/19 全球购物
印度最好的在线药品订购网站:PharmEasy
2018/11/30 全球购物
Ootori在线按摩椅店:一家专业的按摩椅制造商
2019/04/10 全球购物
C++面试题:关于链表和指针
2013/06/05 面试题
微型企业创业投资计划书
2014/01/10 职场文书
师范生免费教育协议书范本
2014/10/09 职场文书
2015年暑假生活总结
2015/07/13 职场文书