欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2022-06-02 10:25:10
本文简单讲述了angularjs环境搭建+创建应用的方法。分享给大家供大家参考,具体如下: 概述 angularjs是google工程师研发的一款js框架,官方文档中对...

本文简单讲述了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入门教程之环境搭建+创建应用示例

创建第一个应用

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

接下来我们编写第一个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程序设计有所帮助。