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 onpropertychange输入框 事件获取属性
Mar 26 Javascript
使用js显示当前时间示例
Mar 02 Javascript
JavaScript动态创建link标签到head里的方法
Dec 22 Javascript
jQuery中outerHeight()方法用法实例
Jan 19 Javascript
JavaScript基本数据类型及值类型和引用类型
Aug 25 Javascript
浏览器环境下JavaScript脚本加载与执行探析之defer与async特性
Jan 14 Javascript
javascript下使用Promise封装FileReader
Feb 19 Javascript
JS实现六位字符密码输入器功能
Aug 19 Javascript
用Vue编写抽象组件的方法
May 06 Javascript
Vue.js递归组件实现组织架构树和选人功能案例分析
Jul 03 Javascript
微信小程序一周时间表功能实现
Oct 17 Javascript
解决antd datepicker 获取时间默认少8个小时的问题
Oct 29 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
PHP如何透过ODBC来存取数据库
2006/10/09 PHP
mongodb和php的用法详解
2019/03/25 PHP
详解Laravel设置多态关系模型别名的方式
2019/10/17 PHP
解决jquery中美元符号命名冲突问题
2014/01/08 Javascript
jquery ajax请求方式与提示用户正在处理请稍等
2014/09/01 Javascript
复制网页内容,粘贴之后自动加上网址的实现方法(脚本之家特别整理)
2014/10/16 Javascript
coffeescript使用的方式汇总
2015/08/05 Javascript
谈谈我对JavaScript原型和闭包系列理解(随手笔记9)
2015/12/24 Javascript
js确认框confirm()用法实例详解
2016/01/07 Javascript
JS获取当前页面名称的简单实例
2016/08/19 Javascript
AngularJS 2.0入门权威指南
2016/10/08 Javascript
原生JavaScript制作计算器
2016/10/16 Javascript
详谈js使用in和hasOwnProperty获取对象属性的区别
2017/04/25 Javascript
vue自定义指令的创建和使用方法实例分析
2018/12/04 Javascript
微信小程序实现的一键拨号功能示例
2019/04/24 Javascript
element el-table表格的二次封装实现(附表格高度自适应)
2021/01/19 Javascript
[01:07:19]DOTA2-DPC中国联赛 正赛 CDEC vs XG BO3 第一场 1月19日
2021/03/11 DOTA
Python linecache.getline()读取文件中特定一行的脚本
2008/09/06 Python
Python查询Mysql时返回字典结构的代码
2012/06/18 Python
Django自定义用户认证示例详解
2018/03/14 Python
使用Python实现在Windows下安装Django
2018/10/17 Python
Python基于smtplib协议实现发送邮件
2020/06/03 Python
如何向scrapy中的spider传递参数的几种方法
2020/11/18 Python
Python 求向量的余弦值操作
2021/03/04 Python
使用CSS3来制作消息提醒框
2015/07/12 HTML / CSS
HTML5 input placeholder 颜色修改示例
2014/05/30 HTML / CSS
写好自荐信的几个要点
2013/12/26 职场文书
幼儿园大班开学教师寄语
2014/04/03 职场文书
环境保护标语
2014/06/20 职场文书
十八大宣传标语
2014/10/09 职场文书
2014教师年度工作总结
2014/11/10 职场文书
全国爱牙日活动总结
2015/02/05 职场文书
高校教师个人总结
2015/02/10 职场文书
2016年基层党支部书记公开承诺书
2016/03/25 职场文书
2019年最新借条范本!
2019/07/08 职场文书
Go语言带缓冲的通道实现
2021/04/26 Golang