AngularJS（一）：概述

最新推荐文章于 2022-06-01 20:01:26 发布

转载最新推荐文章于 2022-06-01 20:01:26 发布 · 210 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/mysky7511/p/6617261.html

文章标签：

#javascript #前端 #ViewUI

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

在我们之前学习的前端代码编写过程中，总是通过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

转载于:https://www.cnblogs.com/mysky7511/p/6617261.html