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 jQuery插件练习
Dec 24 Javascript
Jquery 学习笔记(一)
Oct 13 Javascript
谈谈JavaScript中的函数与闭包
Apr 14 Javascript
JS实现文字向下滚动完整实例
Feb 06 Javascript
javascript中call,apply,bind的用法对比分析
Feb 12 Javascript
JS敏感词过滤代码
Dec 23 Javascript
js 单引号替换成双引号,双引号替换成单引号的实现方法
Feb 16 Javascript
强大的 Angular 表单验证功能详细介绍
May 23 Javascript
微信小程序时间选择插件使用详解
Dec 28 Javascript
vue实现倒计时获取验证码效果
Apr 17 Javascript
node.js中 redis 的安装和基本操作示例
Feb 10 Javascript
vue 中this.$set 动态绑定数据的案例讲解
Jan 29 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
php数组函数序列之krsort()- 对数组的元素键名进行降序排序,保持索引关系
2011/11/02 PHP
PHP图片裁剪函数(保持图像不变形)
2014/05/04 PHP
PHP之图片上传类实例代码(加了缩略图)
2016/06/30 PHP
php读取出一个文件夹及其子文件夹下所有文件的方法示例
2017/06/15 PHP
[企业公众号]升级到[企业微信]之后发送消息失败的解决方法
2017/06/30 PHP
PHP使用gearman进行异步的邮件或短信发送操作详解
2020/02/27 PHP
js 模拟实现类似c#下的hashtable的简单功能代码
2010/01/24 Javascript
js 禁止选择功能实现代码(兼容IE/Firefox)
2010/04/23 Javascript
简略的前端架构心得&amp;&amp;基于editor为例子的编码小技巧
2010/11/25 Javascript
六款帮助你实现惊艳视差滚动效果的jQuery插件
2012/09/14 Javascript
从数据结构的角度分析 for each in 比 for in 快的多
2013/07/07 Javascript
JavaScript实现找出数组中最长的连续数字序列
2014/09/03 Javascript
JavaScript中的getMilliseconds()方法使用详解
2015/06/10 Javascript
jQuery form 表单验证插件(fieldValue)校验表单
2016/01/24 Javascript
基于javascript实现动态显示当前系统时间
2016/01/28 Javascript
JavaScript函数节流概念与用法实例详解
2016/06/20 Javascript
Vuex之理解Store的用法
2017/04/19 Javascript
详解微信小程序 通过控制CSS实现view隐藏与显示
2017/05/24 Javascript
在vue-cli项目中使用bootstrap的方法示例
2018/04/21 Javascript
JS面向对象编程基础篇(一) 对象和构造函数实例详解
2020/03/03 Javascript
JavaScript, select标签元素左右移动功能实现
2020/05/14 Javascript
在Vue 中实现循环渲染多个相同echarts图表
2020/07/20 Javascript
[08:53]DOTA2-DPC中国联赛 正赛 PSG.LGD vs LBZS 选手采访
2021/03/11 DOTA
python的正则表达式re模块的常用方法
2013/03/09 Python
每天迁移MySQL历史数据到历史库Python脚本
2018/04/13 Python
详解mac python+selenium+Chrome 简单案例
2019/11/08 Python
Python自动化测试中yaml文件读取操作
2020/08/20 Python
浅谈python 类方法/静态方法
2020/09/18 Python
用CSS3的box-reflect设置文字倒影效果的方法讲解
2016/03/07 HTML / CSS
法国购买二手电子产品网站:Asgoodasnew
2020/03/27 全球购物
技术总监的工作职责
2013/11/13 职场文书
拓展培训心得体会
2014/01/04 职场文书
邀请函模板
2015/02/02 职场文书
少先队中队工作总结2015
2015/07/23 职场文书
大学生社会实践感想
2015/08/11 职场文书
Pytorch 实现变量类型转换
2021/05/17 Python