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延时重复执行函数 lLoopRun.js
Jun 29 Javascript
基于jquery的仿百度的鼠标移入图片抖动效果
Sep 17 Javascript
jQuery select表单提交省市区城市三级联动核心代码
Jun 09 Javascript
控制台报错object is not a function的解决方法
Aug 24 Javascript
JavaScript实现从数组中选出和等于固定值的n个数
Sep 03 Javascript
5种处理js跨域问题方法汇总
Dec 04 Javascript
快速学习jQuery插件 Form表单插件使用方法
Dec 01 Javascript
使用jQuery在移动页面上添加按钮和给按钮添加图标
Dec 04 Javascript
Extjs表单输入框异步校验的插件实现方法
Mar 20 Javascript
详解如何在vue中使用sass
Jun 21 Javascript
关闭Vue计算属性自带的缓存功能方法
Mar 02 Javascript
AngularJS $http post 传递参数数据的方法
Oct 09 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实现首页链接查询 友情链接检查的代码
2010/01/05 PHP
php实现压缩多个CSS与JS文件的方法
2014/11/11 PHP
php数组键值用法实例分析
2015/02/27 PHP
PHP载入图像imagecreatefrom_gif_jpeg_png系列函数用法分析
2016/11/14 PHP
禁用JavaScript控制台调试的方法
2014/03/07 Javascript
一个获取第n个元素节点的js函数
2014/09/02 Javascript
判断访客终端类型集锦
2015/06/05 Javascript
javascript处理a标签超链接默认事件的方法
2015/06/29 Javascript
easyui window refresh 刷新两次的解决方法(推荐)
2016/05/18 Javascript
基于Bootstrap的Metronic框架实现条码和二维码的生成及打印处理操作
2016/08/29 Javascript
BootStrap组件之进度条的基本用法
2017/01/19 Javascript
jquery.flot.js简单绘制折线图用法示例
2017/03/13 Javascript
使用淘宝镜像cnpm安装Vue.js的图文教程
2018/05/17 Javascript
ES6中的迭代器、Generator函数及Generator函数的异步操作方法
2019/05/12 Javascript
微信小程序加载机制及运行机制图解
2019/11/27 Javascript
[01:00:10]完美世界DOTA2联赛PWL S2 FTD vs Inki 第二场 11.21
2020/11/24 DOTA
讲解python参数和作用域的使用
2013/11/01 Python
Pythont特殊语法filter,map,reduce,apply使用方法
2016/02/27 Python
python编写简单爬虫资料汇总
2016/03/22 Python
python timestamp和datetime之间转换详解
2017/12/11 Python
python用pandas数据加载、存储与文件格式的实例
2018/12/07 Python
pandas DataFrame 警告(SettingWithCopyWarning)的解决
2019/07/23 Python
CSS3中引入多种自定义字体font-face
2020/06/12 HTML / CSS
AmazeUI 加载进度条的实现示例
2020/08/20 HTML / CSS
求职自荐书范文
2013/12/04 职场文书
大跃进口号
2014/06/16 职场文书
党课培训心得体会
2014/09/02 职场文书
处级领导班子全部召开专题民主生活会情况汇报
2014/09/27 职场文书
安全生产工作汇报材料
2014/10/28 职场文书
2015年幼儿园大班工作总结
2015/04/25 职场文书
大学升旗仪式主持词
2015/07/04 职场文书
2015年物流客服工作总结
2015/07/27 职场文书
情况说明书怎么写
2015/10/08 职场文书
MySQL中in和exists区别详解
2021/06/03 MySQL
解决SpringBoot跨域的三种方式
2021/06/26 Java/Android
Win10 和 Win11可以共存吗? win10/11产品生命周期/服务更新介绍
2021/11/21 数码科技