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

本文简单讲述了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页面。

<!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页面，可以看到我们通过表达式输出的文字。

上面提到的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程序设计有所帮助。

赞 (0)

相关推荐

  • .Net Core+Angular Cli/Angular4开发环境搭建教程

    .Net Core+Angular Cli/Angular4开发环境搭建教程

    一.基础环境配置 1.安装VS 2017 v15.3或以上版本 2.安装VS Code最新版本 3.安装Node.js v6.9以上版本 4.重置全局npm源,修正为 淘宝的 NPM 镜像: npm install -g cnpm --registry=https://registry.npm.taobao.org 5.安装TypeScript cnpm install -g typescript typings 6.安装 AngularJS CLI cnpm install -g @angul

  • 详解.Net Core + Angular2 环境搭建

    本文介绍了.Net Core + Angular2 环境搭建,具体如下: 环境搭建: 1)node.js版本>5.0,NPM版本>3.0,TypeScript版本>2.0(全装最新版就好了) 2)安装NTVS 1.2(node tools for vs),TSVS dev 1.4(TS for VS) 3)构建package.json,tsconfig.json,gulp.js文件 1.package.json { "name": "template.ang

  • 详解Angular 开发环境搭建

    Angular 是一款开源 JavaScript 框架,由Google 维护,用来协助单一页面应用程序运行的.它的目标是增强基于浏览器的应用,使开发和测试变得更加容易.目前最新的 Angular 版本是 v4.2.3 开始搭建 Angular 开发环境 搭建 Angular 开发环境需要的步骤: Node.js 配置 npm Angular CLI 安装 Node.js 下载安装Node.js,下载最新的 LTS 版本即可,目前最新的版本是 v6.11.0 LTS 配置 npm 安装好 Node

  • AngularJS入门教程之学习环境搭建

    学习AngularJS的一个好方法是逐步完成本教程,它将引导您构建一个完整的AngularJS web应用程序. 该web应用是一个Android设备清单的目录列表,您可以筛选列表以便查看您感兴趣的设备,然后查看设备的详细信息. 本教程将向您展示AngularJS怎样使得web应用更智能更灵活,而且不需要各种扩展程序或插件. 通过本教程的学习,您将: 1.阅读示例学习怎样使用AngularJS的客户端数据绑定和依赖注入功能来建立可立即响应用户操作的动态数据视图. 2.学习如何使用AngularJ

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

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

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

  • Android 基础入门教程——开发环境搭建

    Android 基础入门教程——开发环境搭建

    现在主流的Android开发环境有: Eclipse + ADT + SDK Android Studio + SDK IntelliJ IDEA + SDK 现在国内大部分开发人员还是使用的Eclipse,而谷歌宣布不再更新ADT后,并且官网也去掉了集成Android开发环境的Eclipse下载链接,各种现象都表示开发者最后都终将过渡到Android Studio,当然这段过渡时间会很长,但如果你是刚学Android的话建议直接冲Android Studio着手:而且很多优秀的开源项目都是基于

  • AngularJS入门教程之多视图切换用法示例

    AngularJS入门教程之多视图切换用法示例

    本文实例讲述了AngularJS多视图切换用法.分享给大家供大家参考,具体如下: 在AngularJS应用中,我们可以將html碎片写在一个单独的文件中,然后在其他页面中將该段碎片加载进来.如果有多个碎片文件,我们还可以在控制器中根据用户的操作动态的加载不同的碎片,从而达到切换视图的效果. 先来看看笔者写好的一个案例吧: 这两首词实际上是两个html碎片,分别写在page1.html和page2.html.下面是这两个文件的内容: <!--page1.html内容--> <div>

  • AngularJS入门教程之表单校验用法示例

    AngularJS入门教程之表单校验用法示例

    本文实例讲述了AngularJS表单校验用法.分享给大家供大家参考,具体如下: 表单数据的校验对于提高WEB安全性意义不大,因为服务器接收到的请求不一定来自我们的前端页面,有可能来自别的站点,黑客可以自己做一个表单,把数据提交到我们的服务器(即跨站伪造请求),这样就绕过了前端页面的校验.如果对HTTP协议比较熟,甚至还可以在程序中手动构造一段HTTP请求发到服务器,所以服务器端的数据校验绝对是必不可少的. WEB前端数据校验的意义在于改善用户体验,用户不用等到將数据提交到服务器后才知道哪些数据是

  • Python从入门到精通之环境搭建教程图解

    本章内容: 一.下载python安装包 下载地址:https://www.python.org/downloads/ 二.选择适合自己系统的文件,进行下载 Windows环境安装(Windows 10) 三.Python解释器的安装 双击python-3.7.4-amd64.exe文件,勾选Add Python 3.7 to PATH,点击自定义安装 点击Next 选择自定义路径,点击Install即可 安装成功 右键此电脑属性,查看环境变量是否配置 选择环境变量,查看path 查看python

  • Mybatis 入门之MyBatis环境搭建(第一篇)

    Mybatis 入门之MyBatis环境搭建(第一篇)

    Mybatis简介 MyBatis的前身叫iBatis,本是apache的一个开源项目, 2010年这个项目由apache software foundation 迁移到了google code,并且改名为MyBatis. MyBatis是支持普通SQL查询,存储过程和高级映射的优秀持久层框架.MyBatis消除了几乎所有的JDBC代码和参数的手工设置以及结果集的检索.MyBatis使用简单的XML或注解用于配置和原始映射,将接口和Java的POJOs(Plan Old Java Objects

  • Qt MQTT开发环境搭建的实现示例

    Qt MQTT开发环境搭建的实现示例

    目录 1.概述 2.下载地址 3.编译 4.编译examples下的客户端 5.客户端运行界面 1.概述 由于MQTT的库没有加入到Qt的标准里面,所以,我们需要自己去下载MQTT的源码进行编译. Qt版本:5.10 编译器:mingw 在QtCreator上进行编译 2.下载地址 https://github.com/qt/qtmqtt​​​​​​​ 这里选择5.12的版本就行编译. 3.编译 下载完成后,解压文件,目录如下图所示. 双击qtmqtt.pro,在qtcreator中打开项目工程

  • AngularJS入门教程二：在路由中传递参数的方法分析

    本文实例讲述了AngularJS在路由中传递参数的方法.分享给大家供大家参考,具体如下: 我们不仅可以在控制器中直接定义属性的值,比如: app.controller('listController',function($scope){ $scope.name="ROSE"; }); AngularJS还提供了传递参数的功能,目前我接触到的一种方式是从视图中传参: <!--首页html--> <li><a href="#/user/18"

  • AngularJS入门教程之路由机制ngRoute实例分析

    AngularJS入门教程之路由机制ngRoute实例分析

    本文实例讲述了AngularJS路由机制ngRoute.分享给大家供大家参考,具体如下: 引言 在我们介绍路由之前我们首先谈一下SPA,所以SPA就是我们现在经常说的单页应用single page APP,为了实现无刷新的视图切换我们之前的做法就是利用AJAX从后取出数据然后渲染在前台页面HTML中,但是AJAX有一个致命的缺点就是不能实现浏览器的后退按钮失效,为了解决这个问题我们通常使用hash,监听hashchange事件来进行视图切换,另一个方法是用HTML5的history API,通过

  • AngularJS入门教程之服务(Service)

    AngularJS 服务(Service) AngularJS 中你可以创建自己的服务,或使用内建服务. 什么是服务? 在 AngularJS 中,服务是一个函数或对象,可在你的 AngularJS 应用中使用. AngularJS 内建了30 多个服务. 有个 $location 服务,它可以返回当前页面的 URL 地址. 实例 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> &

随机推荐