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

在我们之前学习的前端代码编写过程中,总是通过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. BZOJ3674:可持久化并查集加强版

    浅谈主席树:https://www.cnblogs.com/AKMer/p/9956734.html 题目传送门:https://www.lydsy.com/JudgeOnline/problem.p ...

  2. CodeForces 1131G. Most Dangerous Shark

    题目简述:从左到右依次有$n \leq 10^7$个Domino骨牌,高度为$h_i$,手动推倒他的花费为$c_i$.每个骨牌之间的距离为$1$.一个骨牌可以被向左或者向右推倒.当第$i$个骨牌被推倒 ...

  3. 《Java多线程编程核心技术》读后感(十六)

    线程组 线程组的作用是,可以批量的管理线程或线程组对象,有效地对线程或线程组对象进行组织 线程对象关联线程组:1级关联 package Seven; public class ThreadA exte ...

  4. linux下libphenom的测试代码

    使用说明:测试使用libphenom库的字符串追加函数,效率是strcat的60多倍.所以在进行大量的字符串累加的时候可以考虑使用libphenom库  依赖库: ck-.tar.gz cmake-. ...

  5. solr--搭建全文搜索服务器

    1.下载http://www-eu.apache.org/dist/lucene/solr/6.5.0/ 2.新建: 云模式 3.打开浏览器: 简单的中文分词,暂时是一个一个的分词:

  6. HDU - 3001 Travelling(三进制状压dp)

    Travelling After coding so many days,Mr Acmer wants to have a good rest.So travelling is the best ch ...

  7. tp5 搜索之后保留分页

    当接收到参数是执行搜索 public function index($name=null){ if (isset($_REQUEST['username'])) { $name = $_REQUEST ...

  8. AI决策算法 之 GOAP (三)

    源码地址:http://pan.baidu.com/s/1dFwzmfB 这篇我们使用上篇文章写的GOAP框架来完成一个实例: 实例内容: AI有10HP, 需要去站岗,站岗完成扣5HP 当HP< ...

  9. python 模拟事件触发机制

    EventManager.py # -*- encoding: UTF-8 -*- # 系统模块 from queue import Queue, Empty from threading impor ...

  10. Node.js 内置模块fs的readdir方法 查看某个文件夹里面包含的文件内容

    fs.readdir(path[, options], callback) 例: "use strict"; const fs = require("fs"); ...