本文也同步发表在我的公众号“我的天空”

在我们之前学习的前端代码编写过程中，总是通过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（一）：概述的更多相关文章

  1. AngularJS概念概述和第一个使用例子

    点击查看AngularJS系列目录 转载请注明出处:http://www.cnblogs.com/leosx/ 概念概述 本节使用一个简单的例子简要介绍了AngularJS的重要组成部分. 概念 描述 ...

  2. AngularJS快速入门指南19：示例代码

    本文给出的大部分示例都可以直接运行,通过点击运行按钮来查看结果,同时支持在线编辑代码. <div ng-app=""> <p>Name: <input ...

  3. AngularJS概述&指令

    AngularJS 指令 AngularJS 应用组成如下: View(视图), 即 HTML. Model(模型), 当前视图中可用的数据. Controller(控制器), 即 JavaScrip ...

  4. AngularJs概述

  5. AngularJS概述-3D

    最近工作需要用到,接触的比较多,在此系统学习一下. angular.js 是新一代web MVC开发框架,对应 模型,视图,控制器.,相比 jquery 模式,这种新玩意竟然不需要开发者直接去操作do ...

  6. 模拟AngularJS之依赖注入

    一.概述 AngularJS有一经典之处就是依赖注入,对于什么是依赖注入,熟悉spring的同学应该都非常了解了,但,对于前端而言,还是比较新颖的. 依赖注入,简而言之,就是解除硬编码,达到解偶的目的 ...

  7. AngularJS Scope(作用域)

    1. AngularJS Scope(作用域) Scope(作用域) 是应用在 HTML (视图) 和 JavaScript (控制器)之间的纽带. Scope 是一个对象,有可用的方法和属性. Sc ...

  8. Angularjs学习---官方phonecat实例学习angularjs step0 step1

    接下来一系列的文章都是学习https://docs.angularjs.org/tutorial的笔记,主要学习的angular-phonecat项目的实现,来介绍angularjs的使用. 1.下载 ...

  9. [译]用AngularJS构建大型ASP.NET单页应用（一）

    原文地址:http://www.codeproject.com/Articles/808213/Developing-a-Large-Scale-Application-with-a-Single 渣 ...

随机推荐

  1. 11g dataguard 类型、保护模式、服务

    一. Dataguard中的备库分为物理备库和逻辑备库及快照备库 备库是主库的一致性拷贝,使用一个主库的备份可以创建多到30个备库,将其加入到dataguard环境中,创建成功后,dataguard通 ...

  2. poj3422K方格取数——最大费用最大流

    题目:http://poj.org/problem?id=3422 最大费用最大流: 拆点,在自点之间连两条边,一条容量为1,边权为数字:一条容量为k-1,边权为0:表示可以走k次,只有一次能取到数字 ...

  3. mysql两主多从

    1.实现目标 目标清单: 1)Master(192.168.31.230)为正常运行环境下的主库,为两个Slave(192.168.31.231和192.168.31.232)提供“主-从”复制功能: ...

  4. struts2的method=&quot;{1}&quot;

    这里的{1}表示接收前面action里通过通配符传来的值,例如你配置的是 ,然后调用***/editCrud.action,则method里获得的值是edit,将会调用这个action里面的 edit ...

  5. IIS7启用GZip压缩

    本文转载自 http://www.cnblogs.com/kissdodog/p/6252129.html GZip压缩通常会达到70%以上的压缩率,如果是手机Web这无疑会使网站的访问速度大大增加, ...

  6. Trigonometric Function - Base

    虽然三角函数是初中知识,比较简单,却也因为是初中知识,距现在比较久,难免忘掉一些,所以复习一下. 三角函数英文单词 正弦:sine 余弦:cosine 正切:tangent 余切:contangent ...

  7. c/c++ 获取mysql数据库以blob类型储存的图片

    简单的code如下: #include <iostream> #include <fstream> #include <sstream> #include < ...

  8. 从头开始学Web开发—CSS_01

    CSS导入使用及引用的两种方法: 外部引用 外部引用的方式,我们直接可以通过link标签来引用我们写好的一个CSS文件: 在link 标签中,我们通过rel = "stylesheet&qu ...

  9. 每次移1px的无缝轮播图

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  10. solidity 学习笔记（3） 函数修饰符/继承

    修饰符: 函数修饰符有 constant  view pure 其中 constant和view的功能是一样的  不会消耗gas 也就是说不会做任何存储   constant在5.0以后的版本中被废弃 ...