AngularJs轻松入门（一）创建第一个应用

岚之山 2024-10-01 15:40:54 原文

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

开发环境搭建

俗话说“巧妇难为无米之炊”，我们要使用AngularJs开发Web应用首先要做的就是获取AngularJs开发库，AngularJs官网（ https://angularjs.org/）有提供下载，鉴于官网经常打不开，笔者上传了一份到CSDN。

下载地址：http://download.csdn.net/detail/rongbo_j/8612479

获取到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轻松入门（一）创建第一个应用的更多相关文章

AngularJs轻松入门
AngularJs轻松入门系列博文:http://blog.csdn.net/column/details/angular.html AngularJs轻松入门(一)创建第一个应用 AngularJs ...
AngularJs轻松入门（四）模块化
在前面几节教程中,代码比较少,为了方便说明问题笔者將控制器代码都写在了HTML页面中,实际上这并不是什么好的编程习惯,而且可维护性差.通常的做法都是將处理业务逻辑的代码写在一个单独的JS文件中,然后在 ...
AngularJs轻松入门（九）与服务器交互
AngularJs从Web服务器请求资源都是通过Ajax来完成,所有的操作封装在$http服务中,$http服务是只能接收一个参数的函数,这个参数是一个对象,用来完成HTTP请求的一些配置,函数返回一 ...
AngularJs轻松入门（八）Cookies读写
虽然使用JavaScript创建和获取Cookie很简单,AngularJs还是把它作为一个单独的模块进行了封装,模块名为ngCookies,和前面的教程中做法一样,先引入angular-cookie ...
AngularJs轻松入门（五）过滤器
在前面几节里我们已经接触过AngularJs的表达式,表达式的作用是向视图中输出字面量或$scope对象中的属性值.在输出之前我们可以通过过滤器来格式化输出的数据. 过滤器的使用非常简单,我们看一下下 ...
BootStrap入门_创建第一个例子
一.选择合适的IDE 一般前端开发选用的都是WebStorm.Brackets等,因为本人对VS比较熟悉,索性就拿VS进行练习了,而且VS练习有些好处,就是通过nuget方式获取BootStrap可以 ...
AngularJs轻松入门（七）多视图切换
在AngularJs应用中,我们可以將html碎片写在一个单独的文件中,然后在其他页面中將该段碎片加载进来.如果有多个碎片文件,我们还可以在控制器中根据用户的操作动态的加载不同的碎片,从而达到切换视图 ...
AngularJs轻松入门（六）表单校验
表单数据的校验对于提高WEB安全性意义不大,因为服务器接收到的请求不一定来自我们的前端页面,有可能来自别的站点,黑客可以自己做一个表单,把数据提交到我们的服务器(即跨站伪造请求),这样就绕过了前端页面 ...
AngularJs轻松入门（三）MVC架构
MVC应用程序架构最早于1970年起源于Smalltalk语言,后来在桌面应用程序开发中使用较为广泛,如今在WEB开发中也非常流行.MVC的核心思想是將数据的管理(Model).业务逻辑控制(Cont ...

随机推荐

Bootstrap全局CSS样式之表单
.form-control--将单独的表单控件赋予一些全局样式,如默认宽度width:100%. .form-group--包裹表单控件,获得最好的排列: .form-inline--将表单设置为内联 ...
postMan模拟get和post请求，支持局域网和外网
chrome应用postMan,可以安装一下,非常方便. 可以FQ下载安装. post参数要在body中设置 get参数直接在url中
vue中router-link的click事件失效的解决办法
title: vue中router-link的click事件失效的解决办法 toc: false date: 2018-12-04 16:28:49 categories: Web tags: vue ...
android adb command
一.adb启动activity: $ adb shell$ am start -n {包(package)名}/{包名}.{活动(activity)名称} 如:启动浏览器 # am start -n ...
POJ 1064 Cable master 【二分答案】
和杭电那一题一样,只不过G++交不能通过,C++能过 wa了好多好多好多次----------------------------------------- #include<iostream& ...
ActiveMQ学习笔记（17）----Message高级特性（一）
1. Messaage Properties ActiveMQ支持很多消息属性,具体可以参考 http://activemq.apache.org/activemq-message-propertie ...
linux系统利用GPU跑数据（tensorflow）
https://blog.csdn.net/qq_26591517/article/details/82469680 查看机器上GPU情况命令: nvidia-smi 功能:显示机器上gpu的情况 ...
常见Json字符串反序列化处理方式总结
常用来处理Json字符串序列化反序列化组件:Newtonsoft.Json (https://www.newtonsoft.com/json) 参考资料https://www.cnblogs.com ...
MingW和cygwin的区别（转）
个人总结:读完这段文字需要5分钟总结: MingW https://zh.wikipedia.org/wiki/MinGW Cygwin https://zh.wikipedia.org/wiki/ ...
npm install报错类似于npm WARN tar ENOENT: no such file or directory, open '***\node_modules\.staging\***
报错类似于如下图解决方法: 删除文件 package-lock.json,再重新执行npm i或者npm install