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 相关文章推荐
javascript 关闭IE6、IE7
Jun 01 Javascript
jquery获取下拉列表的值为null的解决方法
Mar 18 Javascript
Javascript insertAfter() 实现函数代码
Oct 12 Javascript
js自定义方法通过隐藏iframe实现文件下载
Feb 21 Javascript
js清理Word格式示例代码
Feb 13 Javascript
AngularJS入门(用ng-repeat指令实现循环输出
May 05 Javascript
jQuery中show与hide方法用法示例
Sep 16 Javascript
总结Javascript中数组各种去重的方法
Oct 04 Javascript
weUI应用之JS常用信息提示弹层的封装
Nov 21 Javascript
jQuery如何跳转到另一个网页 就这么简单
Dec 28 Javascript
利用vue + element实现表格分页和前端搜索的方法
Dec 25 Javascript
vue router 跳转后回到顶部的实例
Aug 31 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版(3)
2006/10/09 PHP
简单易用的计数器(数据库)
2006/10/09 PHP
thinkphp3.0输出重复两次的解决方法
2014/12/19 PHP
php根据生日计算年龄的方法
2015/07/13 PHP
Zend Framework教程之请求对象的封装Zend_Controller_Request实例详解
2016/03/07 PHP
PHP获取当前执行php文件名的代码
2017/03/02 PHP
用php定义一个数组最简单的方法
2019/10/04 PHP
再谈Yii Framework框架中的事件event原理与应用
2020/04/07 PHP
php让json_encode不自动转义斜杠“/”的方法
2020/04/27 PHP
JavaScript 事件属性绑定带参数的函数
2009/03/13 Javascript
Javascript实现CheckBox的全选与取消全选的代码
2010/07/20 Javascript
cnblogs中在闪存中屏蔽某人的实现代码
2010/11/14 Javascript
一个关于jqGrid使用的小例子(行按钮)
2011/11/04 Javascript
javascript实现存储hmtl字符串示例
2014/04/25 Javascript
JavaScript通过setTimeout实时显示当前时间的方法
2015/04/16 Javascript
基于jQuery的网页影音播放器jPlayer的基本使用教程
2016/03/08 Javascript
jQuery中的100个技巧汇总
2016/12/15 Javascript
Vue v2.4中新增的$attrs及$listeners属性使用教程
2018/01/08 Javascript
JavaScript设计模式之命令模式实例分析
2019/01/16 Javascript
如何使用webpack打包一个库library的方法步骤
2019/12/18 Javascript
jQuery实现滑动开关效果
2020/08/02 jQuery
在Vue中使用Echarts可视化库的完整步骤记录
2020/11/18 Vue.js
python3安装crypto出错及解决方法
2019/07/30 Python
Python argparse模块应用实例解析
2019/11/15 Python
pytorch模型预测结果与ndarray互转方式
2020/01/15 Python
Python使用Paramiko控制liunx第三方库
2020/05/20 Python
python suds访问webservice服务实现
2020/06/26 Python
详解Sticky Footer 绝对底部的两种套路
2017/11/03 HTML / CSS
年终总结会议主持词
2014/03/17 职场文书
导游个人求职信范文
2014/03/23 职场文书
绿色学校实施方案
2014/03/31 职场文书
电视节目策划方案
2014/05/16 职场文书
党的群众教育实践活动实施方案
2014/06/12 职场文书
组织生活会表态发言材料
2014/10/17 职场文书
签字仪式主持词
2015/07/03 职场文书
2016年领导干部廉政承诺书
2016/03/24 职场文书