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 相关文章推荐
跨浏览器开发经验总结(三)   警惕“IE依赖综合症”
May 13 Javascript
JavaScript中的undefined学习总结
Nov 30 Javascript
CSS3,HTML5和jQuery搜索框集锦
Dec 02 Javascript
详解JavaScript的Polymer框架中的通知交互
Jul 29 Javascript
jQuery实现点击按钮弹出可关闭层的浮动层插件
Sep 19 Javascript
Jquery和JS获取ul中li标签的实现方法
Jun 02 Javascript
jQuery ajax请求struts action实现异步刷新
Apr 19 jQuery
js原生代码实现轮播图的实例讲解
Jul 28 Javascript
Angular实现表单验证功能
Nov 13 Javascript
iconfont的三种使用方式详解
Aug 05 Javascript
谈谈JavaScript中的垃圾回收机制
Sep 17 Javascript
解决vue中provide inject的响应式监听
Apr 19 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
深入了解 register_globals (附register_globals=off 网站打不开的解决方法)
2012/06/27 PHP
浅谈PHP eval()函数定义和用法
2016/06/21 PHP
php多线程并发实现方法
2016/09/30 PHP
关于php开启错误提示的总结
2019/09/24 PHP
PHP手机号码及邮箱正则表达式实例解析
2020/07/11 PHP
JS location几个方法小姐
2008/07/09 Javascript
JavaScript 高级篇之DOM文档,简单封装及调用、动态添加、删除样式(六)
2012/04/07 Javascript
抛弃Nginx使用nodejs做反向代理服务器
2014/07/17 NodeJs
AngularJS解决ng-if中的ng-model值无效的问题
2017/06/21 Javascript
VUE利用vuex模拟实现新闻点赞功能实例
2017/06/28 Javascript
快速掌握jquery分页插件jqPaginator的使用方法
2017/08/09 jQuery
在Vue 中使用Typescript的示例代码
2018/09/10 Javascript
微信小程序ibeacon三点定位详解
2018/10/31 Javascript
通过vue手动封装on、emit、off的代码详解
2019/05/29 Javascript
前端Electron新手入门教程详解
2019/06/21 Javascript
node.js中Buffer缓冲器的原理与使用方法分析
2019/11/23 Javascript
[01:21]DOTA2新纪元-7.0新版本即将开启!
2016/12/11 DOTA
Python中的二叉树查找算法模块使用指南
2014/07/04 Python
python smtplib模块发送SSL/TLS安全邮件实例
2015/04/08 Python
python中virtualenvwrapper安装与使用
2018/05/20 Python
python Flask 装饰器顺序问题解决
2018/08/08 Python
Python字符串通过'+'和join函数拼接新字符串的性能测试比较
2019/03/05 Python
python多线程分块读取文件
2019/08/29 Python
PyCharm汉化安装及永久激活详细教程(靠谱)
2020/01/16 Python
Keras自定义IOU方式
2020/06/10 Python
CSS 3.0文字悬停跳动特效代码
2020/10/26 HTML / CSS
巴西Mr. Cat在线商店:购买包包和鞋子
2019/09/08 全球购物
Discard Protocol抛弃协议的作用是什么
2015/10/10 面试题
外贸学院会计专业应届生求职信
2013/11/14 职场文书
课改先进个人汇报材料
2014/01/26 职场文书
《走一步再走一步》教学反思
2014/02/15 职场文书
实训报告范文大全
2014/11/04 职场文书
2015年党员公开承诺书范文
2015/01/22 职场文书
史上最全书信经典范文大全(建议收藏)
2019/07/10 职场文书
python如何获取网络数据
2021/04/11 Python
阿里面试Nacos配置中心交互模型是push还是pull原理解析
2022/07/23 Java/Android