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入门——事件切换之toggle()方法应用介绍
Feb 05 Javascript
div模拟选择框示例代码
Nov 03 Javascript
js 通过cookie实现刷新不变化树形菜单
Oct 30 Javascript
JavaScript动态添加列的方法
Mar 25 Javascript
直接拿来用的15个jQuery代码片段
Sep 23 Javascript
Jsonp 关键字详解及json和jsonp的区别,ajax和jsonp的区别
Dec 30 Javascript
jQuery qrcode生成二维码的方法
Apr 03 Javascript
javascript实现的猜数小游戏完整实例代码
May 10 Javascript
jQuery 3.0十大新特性
Jul 06 Javascript
jQuery实现ajax的嵌套请求案例分析
Feb 16 jQuery
node.js express框架实现文件上传与下载功能实例详解
Oct 15 Javascript
js实现简单的倒计时
Jan 28 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保留两位小数并且四舍五入及不四舍五入的方法
2013/09/22 PHP
解决file_get_contents无法请求https连接的方法
2013/12/17 PHP
php多个文件及图片上传实例详解
2014/11/10 PHP
PHP实现链表的定义与反转功能示例
2018/06/09 PHP
postman的安装与使用方法(模拟Get和Post请求)
2018/08/06 PHP
Extjs学习笔记之二 初识Extjs之Form
2010/01/07 Javascript
js 回车提交表单两种实现方法
2012/12/31 Javascript
jquery的总体架构分析及实现示例详解
2014/11/08 Javascript
详细解读Jquery各Ajax函数($.get(),$.post(),$.ajax(),$.getJSON())
2016/08/15 Javascript
vue2.0父子组件间传递数据的方法
2018/08/16 Javascript
深入浅析Node.js 事件循环、定时器和process.nextTick()
2018/10/22 Javascript
优雅的处理vue项目异常实战记录
2019/06/05 Javascript
vue+mock.js实现前后端分离
2019/07/24 Javascript
实例讲解Python中的私有属性
2014/08/21 Python
简单介绍Python中的RSS处理
2015/04/13 Python
学习python分支结构
2019/05/17 Python
Django框架使用内置方法实现登录功能详解
2019/06/12 Python
Django模板标签{% for %}循环,获取制定条数据实例
2020/05/14 Python
python爬虫分布式获取数据的实例方法
2020/11/26 Python
html5指南-5.使用web storage存储键值对的数据
2013/01/07 HTML / CSS
简单介绍HTML5中audio标签的使用
2015/09/24 HTML / CSS
VSCode 自定义html5模板的实现
2019/12/05 HTML / CSS
美国著名珠宝品牌之一:Jared The Galleria Of Jewelry
2016/10/01 全球购物
蒂芙尼澳大利亚官方网站:Tiffany&Co. Australia
2017/08/27 全球购物
大学生优秀自荐信范文
2014/02/25 职场文书
幼儿园评语大全
2014/04/17 职场文书
四年级学生期末评语
2014/12/26 职场文书
家长会主持词开场白
2015/05/29 职场文书
小学教师见习总结
2015/06/23 职场文书
小学生纪律委员竞选稿
2015/11/19 职场文书
2019七夕节祝福语36句,快来收藏吧
2019/08/06 职场文书
七年级作文之关于奶奶
2019/10/29 职场文书
pytorch中的numel函数用法说明
2021/05/13 Python
Nginx流量拷贝ngx_http_mirror_module模块使用方法详解
2022/04/07 Servers
Java Lambda表达式常用的函数式接口
2022/04/07 Java/Android
python如何为list实现find方法
2022/05/30 Python