AngularJs入门教程之环境搭建+创建应用示例

 更新时间:2016年11月01日 14:24:23   作者:Rongbo_J  
这篇文章主要介绍了AngularJs入门教程之环境搭建+创建应用的方法,较为详细的分析了AngularJS的功能、下载及应用创建方法,需要的朋友可以参考下

GPT4.0+Midjourney绘画+国内大模型 会员永久免费使用!
如果你想靠AI翻身,你先需要一个靠谱的工具!

本文简单讲述了AngularJs环境搭建+创建应用的方法。分享给大家供大家参考,具体如下:

概述

AngularJS是Google工程师研发的一款JS框架,官方文档中对它的描述是,它是完全使用JavaScript编写的客户端技术,同其他历史悠久的Web技术(HTML,CSS等)配合使用,使得Web开发变得更简单、更高效。它是笔者用过的比较有特色的一款框架,以HTML作为模版语言并扩展HTML属性,使得应用组件开发保持高度的清晰和一致。本系列文章將以实际的案例简单的介绍AngularJs的特性和用法。

开发环境搭建

俗话说"巧妇难为无米之炊",我们要使用AngularJs开发Web应用首先要做的就是获取AngularJs开发库,AngularJs官网( https://angularjs.org/)有提供下载。或者点击此处本站下载

获取到AngularJs库文件我们就可以开始了,但是为了提高工作效率,一款好的集成开发工具是必备可少的,这里笔者使用的是WebStorm。Chrome和Firefox提供的开发人员工具非常方便代码调试,笔者使用的是Chrome,这里也推荐大家使用。下图是WebStorm的工作界面,读者也可以根据喜好自行选择。

创建第一个应用

新建一个工程,將AngularJs库文件夹拷贝的工程中。

接下来我们编写第一个HTML5页面。

1
2
3
4
5
6
7
8
9
10
11
12
<!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可以看到最后有这样几行代码:

1
2
3
jqLite(document).ready(function() {
  angularInit(document, bootstrap);
});

在页面加载时调用angularInit方法,也就是说我们引入angular.js文件后页面加载时也就启动了AngularJs。

<html>标签中定义了一个属性ng-app,它是AngularJs的内置指令,用来告诉AngularJs该标签之后的所有DOM元素都由AngularJs来管理。

"{{内容}}"这种形式为AngularJs的表达式,用来向HTML页面中输出内容。

在浏览器中运行该HTML页面,可以看到我们通过表达式输出的文字。

上面提到的ng-app指令可以出现在页面中的任何标签的属性中,例如我们可以把它放在第二个div标签中:

1
2
3
4
5
6
7
8
9
10
11
12
<!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程序设计有所帮助。

蓄力AI

微信公众号搜索 “ 脚本之家 ” ,选择关注

程序猿的那些事、送书等活动等着你

相关文章

  • 详解Angular路由之子路由

    详解Angular路由之子路由

    本文将介绍Angular子路由的用法,对此感兴趣的同学,可以参考下
    2021-05-05
  • Angular.js如何从PHP读取后台数据

    Angular.js如何从PHP读取后台数据

    这篇文章主要为大家简单介绍了Angular.js如何从PHP读取后台数据,本文将Angular和PHP相结合,从后台读取数据,感兴趣的小伙伴们可以参考一下
    2016-03-03
  • 如何编写一个完整的Angular4 FormText 组件

    如何编写一个完整的Angular4 FormText 组件

    本篇文章主要介绍了如何编写一个完整的Angular4 FormText 组件,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-11-11
  • Angular2环境搭建具体操作步骤(推荐)

    Angular2环境搭建具体操作步骤(推荐)

    下面小编就为大家带来一篇Angular2环境搭建具体操作步骤(推荐)。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-08-08
  • AngularJS控制器详解及示例代码

    AngularJS控制器详解及示例代码

    本文主要介绍AngularJS控制器,这里整理了控制器的相关资料和提供示例代码及实例效果图,有需要的小伙伴可以参考下
    2016-08-08
  • 浅谈angularJs函数的使用方法(大小写转换,拷贝,扩充对象)

    浅谈angularJs函数的使用方法(大小写转换,拷贝,扩充对象)

    今天小编就为大家分享一篇浅谈angularJs函数的使用方法(大小写转换,拷贝,扩充对象),具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-10-10
  • Angular-Touch库用法示例

    Angular-Touch库用法示例

    这篇文章主要介绍了Angular-Touch库用法,结合触屏滑动事件的实现为例分析了Angular-Touch库的相关使用技巧,需要的朋友可以参考下
    2016-12-12
  • angularjs 的数据绑定实现原理

    angularjs 的数据绑定实现原理

    本篇文章主要介绍了angularjs 的数据绑定实现原理,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-07-07
  • 详谈angularjs中路由页面强制更新的问题

    详谈angularjs中路由页面强制更新的问题

    下面小编就为大家带来一篇详谈angularjs中路由页面强制更新的问题。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-04-04
  • AngularJS动态生成div的ID源码解析

    AngularJS动态生成div的ID源码解析

    这篇文章主要介绍了基于AngularJS动态生成div的ID,本文介绍的非常详细,具有参考借鉴价值,对angularjs动态生成div的id相关知识感兴趣的朋友一起学习吧
    2016-08-08

最新评论