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 相关文章推荐
基于jquery的页面划词搜索JS
Sep 14 Javascript
javascritp添加url参数将参数加入到url中
Sep 25 Javascript
javascript实现瀑布流自适应遇到的问题及解决方案
Jan 28 Javascript
jquery实现动态操作select选中
Feb 11 Javascript
提高jQuery性能优化的技巧
Aug 03 Javascript
js实现小窗口拖拽效果
Dec 03 Javascript
微信小程序methods中定义的方法互相调用的实例代码
Aug 07 Javascript
Vue.js 通过jQuery ajax获取数据实现更新后重新渲染页面的方法
Aug 09 jQuery
Vue项目报错:Uncaught SyntaxError: Unexpected token
Nov 10 Javascript
JS实现页面数据懒加载
Feb 13 Javascript
Javascript前端下载后台传来的文件流代码实例
Aug 18 Javascript
JavaScript实现通讯录功能
Dec 27 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
dedecms模板标签代码官方参考
2007/03/17 PHP
深入PHP nl2br()格式化输出的详解
2013/06/05 PHP
PHP中基本HTTP认证技巧分析
2015/03/16 PHP
php使用Imagick生成图片的方法
2015/07/31 PHP
php实现的二叉树遍历算法示例
2017/06/15 PHP
JavaScript 学习 - 提高篇
2007/02/02 Javascript
利用js获取服务器时间的两个简单方法
2010/01/08 Javascript
基于json的jquery地区联动效果代码
2011/07/06 Javascript
js+数组实现网页上显示时间/星期几的实用方法
2013/01/18 Javascript
基于JavaScript实现 获取鼠标点击位置坐标的方法
2013/04/12 Javascript
js数组操作常用方法
2014/05/08 Javascript
scrollWidth,clientWidth,offsetWidth的区别
2015/01/13 Javascript
JavaScript实现向OL列表内动态添加LI元素的方法
2015/03/21 Javascript
JS实现CheckBox复选框全选全不选功能
2015/05/06 Javascript
提高jQuery性能优化的技巧
2015/08/03 Javascript
jquery性能优化高级技巧
2015/08/24 Javascript
jQuery对象的链式操作用法分析
2016/05/10 Javascript
JavaScript中for循环的几种写法与效率总结
2017/02/03 Javascript
vue.js 左侧二级菜单显示与隐藏切换的实例代码
2017/05/23 Javascript
vue项目中v-model父子组件通信的实现详解
2017/12/10 Javascript
AnglarJs中的上拉加载实现代码
2018/02/08 Javascript
js实现点击按钮复制文本功能
2020/07/20 Javascript
如何通过Proxy实现JSBridge模块化封装
2020/10/22 Javascript
Linux系统上Nginx+Python的web.py与Django框架环境
2015/12/25 Python
如何运行.ipynb文件的图文讲解
2019/06/27 Python
python错误调试及单元文档测试过程解析
2019/12/19 Python
Python 格式化输出_String Formatting_控制小数点位数的实例详解
2020/02/04 Python
python实现猜拳游戏项目
2020/11/30 Python
美国户外生活方式品牌:Eddie Bauer
2016/12/28 全球购物
泰国Robinson百货官网:购买知名品牌的商品
2020/02/08 全球购物
留学经费担保书
2014/05/12 职场文书
做一个有道德的人活动实施方案
2014/08/23 职场文书
童年读书笔记
2015/06/26 职场文书
详解MySQL的Seconds_Behind_Master
2021/05/18 MySQL
德劲DE1107指针试高灵敏度全波段收音机机评
2022/04/05 无线电
使用Python解决图表与画布的间距问题
2022/04/11 Python