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 相关文章推荐
ExtJS Grid使用SimpleStore、多选框的方法
Nov 20 Javascript
JS文本框不能输入空格验证方法
Mar 19 Javascript
javascript右下角弹层及自动隐藏(自己编写)
Nov 20 Javascript
javascript实现图片自动和可控的轮播切换特效
Apr 13 Javascript
javascript新闻跑马灯实例代码
Jul 29 Javascript
Javascript表单特效之十大常用原理性样例代码大总结
Jul 12 Javascript
开源免费天气预报接口API及全国所有地区代码(国家气象局提供)
Dec 26 Javascript
js实现tab切换效果
Feb 16 Javascript
Vue2.0组件间数据传递示例
Mar 07 Javascript
详解如何将 Vue-cli 改造成支持多页面的 history 模式
Nov 20 Javascript
node.js中ws模块创建服务端和客户端,网页WebSocket客户端
Mar 06 Javascript
jQuery实现开关灯效果
Aug 02 jQuery
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
模拟OICQ的实现思路和核心程序(三)
2006/10/09 PHP
php 实现进制转换(二进制、八进制、十六进制)互相转换实现代码
2010/10/22 PHP
ThinkPHP文件上传实例教程
2014/08/22 PHP
百度实时推送api接口应用示例
2014/10/21 PHP
thinkphp视图模型查询提示ERR: 1146:Table 'db.pr_order_view' doesn't exist的解决方法
2014/10/30 PHP
php 中奖概率算法实现代码
2017/01/25 PHP
PHP中phar包的使用教程
2017/06/14 PHP
禁用键盘上的(全局)指定键兼容iE、Chrome、火狐
2013/05/14 Javascript
Jquery实现鼠标移上弹出提示框、移出消失思路及代码
2013/05/19 Javascript
使用JS读秒使用示例
2013/09/21 Javascript
12种不宜使用的Javascript语法整理
2013/11/04 Javascript
JS事件添加和移出的兼容写法示例
2016/06/20 Javascript
jQuery实现的表格展开伸缩效果实例
2016/09/07 Javascript
JavaScript编写一个贪吃蛇游戏
2017/03/09 Javascript
详解如何让Express支持async/await
2017/10/09 Javascript
Angular4学习之Angular CLI的安装与使用教程
2018/01/04 Javascript
详解NodeJs开发微信公众号
2018/05/25 NodeJs
vue 中的keep-alive实例代码
2018/07/20 Javascript
Vue实现底部侧边工具栏的实例代码
2018/09/03 Javascript
vue单页应用在页面刷新时保留状态数据的方法
2018/09/21 Javascript
vue自定义插件封装,实现简易的elementUi的Message和MessageBox的示例
2020/11/20 Vue.js
基于Python中单例模式的几种实现方式及优化详解
2018/01/09 Python
解决nohup执行python程序log文件写入不及时的问题
2019/01/14 Python
关于python多重赋值的小问题
2019/04/17 Python
Ubuntu16.04安装python3.6.5步骤详解
2020/01/10 Python
HTML5 Video标签的属性、方法和事件汇总介绍
2015/04/24 HTML / CSS
美国网上鞋城:Shoeline.com
2016/11/17 全球购物
YSL圣罗兰美妆美国官网:Yves Saint Lauret US
2016/11/21 全球购物
Tommy Hilfiger美国官网:美国高端休闲领导品牌
2019/01/14 全球购物
土木工程专业个人求职信
2013/12/30 职场文书
作弊检讨书1000字
2014/02/01 职场文书
办公室领导干部作风整顿个人整改措施
2014/09/17 职场文书
2014年公务员退休工资改革方案
2014/10/01 职场文书
获奖感言范文
2015/07/31 职场文书
六五普法先进个人主要事迹材料
2015/11/03 职场文书
财务年终工作总结大全
2019/06/20 职场文书