AngularJS（一）：概述
本文也同步发表在我的公众号“我的天空”
在我们之前学习的前端代码编写过程中，总是通过HTML与CSS来进行页面布局，而使用JS来控制页面逻辑，因此，我们习惯于在JS中来操作页面元素，如以下代码，我们希望在页面加载完毕后，更改DIV内的内容：
<body>
<div id="div"></div>
</body>
<script>
document.getElementById("div").innerHTML="你好，AngularJS";
</script>
在这段代码中通过document.getElementById("div")来获取要更改的html元素，随后修改其内容，对于这样的写法我们已经习以为常。如果由于某种原因，要将原来在DIV内显示内容改成在一个文本框内显示内容，那么我们将做如下代码的修改：
<body>
<input type="text" id="textbox">
</body>
<script>
document.getElementById("textbox").value="你好，AngularJS";
</script>
在这种情况下，我们发现页面元素的更改会影响到相关的JS控制代码，也就是说页面的HTML与JS代码之间的是强耦合的，我们既要改动HTML，也要去修改相应的JS代码。而在实际的复杂项目中，HTML与JS往往是不同的人员或小组来开发维护的，那么我们总是希望不同的模块之间的耦合度能够尽量低，最好是无耦合，这样的话对于一个模块的更改不会影响到其他。而AnjuarJS则能很好的解决该问题，使用AngularJS来重写以上代码：
<head>
<script src="Angular.js"></script>
</head>
<body ng-app="myApp" ng-controller="myCtrl">
<div>{{test}}</div>
</body>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.test= "你好，AngularJS";
});
</script>
以上代码的细节我们目前不用深究，在后面将详细学习。如果我们要像之前那样，将原来在DIV内显示内容改成在一个文本框内显示内容，则将如下修改：
<head>
<script src="Angular.js"></script>
</head>
<body ng-app="myApp" ng-controller="myCtrl">
<input type="text" ng-model="test">
</body>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.test= "你好，AngularJS";
});
</script>
比较前后的代码，我们仅仅是在更改了HTML部分,将DIV元素改成了input元素（代码黑体部分），而JS部分无需变动，而这个正好是之前我们所期望的。
当然，AngularJS的功能远远不止以上提及的这点，其支持双向绑定、表单验证、依赖注入等等，可以完全将页面的表现层（HTML、CSS）与控制层（JS）分离，使之能更好的复用与管理。
AngularJS是一个JS框架，其以Javascript文件形式发布，可通过script标签添加到网页中。AngularJS的各个版本可以从https://github.com/angular/angular.js/releases来下载。需要注意的是，本系列是基于1.x版本来讲解的，而目前AngularJS已有2.x及更高版本，而之间有比较大的差异。
后面的章节我们将开始正式学习AngularJS。
该系列的示例代码
https://github.com/panyongwow/angularJS
AngularJS（一）：概述的更多相关文章
- AngularJS概念概述和第一个使用例子
点击查看AngularJS系列目录 转载请注明出处:http://www.cnblogs.com/leosx/ 概念概述 本节使用一个简单的例子简要介绍了AngularJS的重要组成部分. 概念 描述 ...
- AngularJS快速入门指南19：示例代码
本文给出的大部分示例都可以直接运行,通过点击运行按钮来查看结果,同时支持在线编辑代码. <div ng-app=""> <p>Name: <input ...
- AngularJS概述&指令
AngularJS 指令 AngularJS 应用组成如下: View(视图), 即 HTML. Model(模型), 当前视图中可用的数据. Controller(控制器), 即 JavaScrip ...
- AngularJs概述
- AngularJS概述-3D
最近工作需要用到,接触的比较多,在此系统学习一下. angular.js 是新一代web MVC开发框架,对应 模型,视图,控制器.,相比 jquery 模式,这种新玩意竟然不需要开发者直接去操作do ...
- 模拟AngularJS之依赖注入
一.概述 AngularJS有一经典之处就是依赖注入,对于什么是依赖注入,熟悉spring的同学应该都非常了解了,但,对于前端而言,还是比较新颖的. 依赖注入,简而言之,就是解除硬编码,达到解偶的目的 ...
- AngularJS Scope(作用域)
1. AngularJS Scope(作用域) Scope(作用域) 是应用在 HTML (视图) 和 JavaScript (控制器)之间的纽带. Scope 是一个对象,有可用的方法和属性. Sc ...
- Angularjs学习---官方phonecat实例学习angularjs step0 step1
接下来一系列的文章都是学习https://docs.angularjs.org/tutorial的笔记,主要学习的angular-phonecat项目的实现,来介绍angularjs的使用. 1.下载 ...
- [译]用AngularJS构建大型ASP.NET单页应用（一）
原文地址:http://www.codeproject.com/Articles/808213/Developing-a-Large-Scale-Application-with-a-Single 渣 ...
随机推荐
- 字典树Trie的使用
1. Trie树介绍 Trie,又称单词查找树.前缀树,是一种多叉树结构.如下图所示: 上图是一棵Trie树,表示了关键字集合{“a”, “to”, “tea”, “ted”, “ten”, “i”, ...
- check_MK安装部署（nagios4版本）
概述: 操作系统版本:CentOS release 6.3 (Final) 64位 nagios版本:Nagios Core 4.0.6 pnp4nagios版本:pnp4nagios-0.6.22 ...
- SpringMVC之六：Controller详细介绍
一.简介 在SpringMVC 中,控制器Controller 负责处理由DispatcherServlet 分发的请求,它把用户请求的数据经过业务处理层处理之后封装成一个Model ,然后再把该Mo ...
- web.xml中<security-constraint>安全认证标签说明
1.security-constraint元素 部署描述符中的<security-constraint>元素允许不通过编程就可以限制对某个资源的访问. <security-con ...
- 将eclipse java程序打包成jar的总结（包括工程中没有引用外部jar包和有引用外部jar包两种情况）
一.当eclispe java工程中没有引用外部jar包时: 选中工程---->右键,Export...--->Java--->JAR file--->next-->填写 ...
- wpf窗口禁止最大化但允许调整大小
wpf中窗口禁止最大化可以通过属性ResizeMode来设置,但是ResizeMode有一个问题就是如果ResizeMode设置为NoResize的话,是可以禁止最大化的,但是这样同时也就不能拖动调整 ...
- Jquery.ajax 详细解释 通过Http请求加载远程数据
首先请看一个Jquery.ajax的例子 $.ajax({ type: "GET", url: "/api/SearchApi/GetResults", dat ...
- 安装VMware-tools出现initctl: Job failed to start
安装VMware-tools中出现: ******* Creating a new initrd boot image for the kernel.update-initramfs: Generat ...
- Java集合Set、Map、HashSet、HashMap、TreeSet、TreeMap等
1.Set和Map的关系: Set代表一种集合元素无序.不可重复的集合,Map代表一种由多个key-value对组成的集合. Set的集合继承体系: Map关系集合 Map集合的key特征:所有key ...
- 利用C++创建DLL并C#调用
日期:2018年11月26日 环境:window 10,VS2015 community 一.利用C++创建DLL 1.新建项目: 2.打开CreateDLL.cpp文件,并输入测试代码 #inclu ...