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 渣 ...
随机推荐
- 洛谷 1344 [USACO4.4]追查坏牛奶Pollutant Control——最大流
题目:https://www.luogu.org/problemnew/show/P1344 那个边数的限制,只要把边权乘1001再+1即可.乘1001是因为有1000条边,这样流量小的不会因为边数多 ...
- kindeditor Springmvc 整和解决图片上传问题
1. 在编辑页面引入js <script type="text/javascript" charset="utf-8" src="${baseP ...
- java 发邮件 代码
/** * java发送带附件的邮件 * 周枫 * 2013.8.10 */ package com.dsideal.Util; import javax.mail.*; import javax.m ...
- hadoop2.6.0中自定义分割符
最近在学习hadoop,用的hadoop2.6.0 然后在学习编写mapreduce程序时,发现默认对文件的输入是采用每行进行分割,下面来分析下改变这个分割方式的办法: 来看看默认是怎样实现的:
- hdu2732 Leapin' Lizards (网络流dinic)
D - Leapin' Lizards Time Limit:1000MS Memory Limit:32768KB 64bit IO Format:%I64d & %I64u ...
- 写守护进程时碰到open函数的参数，没记住
今天写一个最简单的守护进程, 要成为一个守护进程,其实很简单了.主要步骤就4步: 1,创建进程. 2,父进程退出. 3,成为会话的头领进程. 4,将工作目录改成根目录,并把标准输入输出重定向到空设备. ...
- socket函数的使用方法（参数详解）
socket函数的使用方法如下: int socket(int domain, int type, int protocol); 在参数表中,domain指定使用何种的地址类型,比较常用的有: PF_ ...
- UVa 11100 The Trip, 2007 (题意+贪心)
题意:有n个包,其中小包可以装到大的包里,包的大小用数字进行表示,求最小的装包数量. 析:这个题的题意不太好理解,主要是有一句话难懂,意思是让每个最大包里的小包数量的最大值尽量小,所以我们就不能随便输 ...
- Halcon 和 C# 联合编程 - 如何使用开源项目 ViewROI
声明 HWndCtrl _viewCtrl; ROIController _roiCtrl; 初始化 _viewCtrl = new HWndCtrl(hWindowControl); _roiCtr ...
- 30个物联网传感器小实验：三行代码点亮LED灯
30个物联网传感器小实验:三行代码点亮LED灯 三行代码点亮LED灯 LED灯闪烁 LED灯调亮度 LED淡入淡出 不写一行代码点亮LED灯 全彩RGB灯 面包板 30个物联网传感器小实验:三行代码点 ...