angular.js介绍

最新推荐文章于 2024-09-23 12:13:40 发布

simonwoo的世界

最新推荐文章于 2024-09-23 12:13:40 发布

阅读量1.2k

点赞数

分类专栏： javascript

本文链接：https://blog.youkuaiyun.com/simon_woo_coding/article/details/40744429

版权

javascript 专栏收录该内容

6 篇文章

订阅专栏

1.什么是Angular.js?

Angular.js官方文档给出的定义：完全使用JavaScript编写的客户端技术。同其他历史悠久的Web技术（HTML、CSS和JavaScript）配合使用，使Web应用开发比以往更简单、更快捷。AngularJS使开发Web应用变得非常简单，同时也降低了构建复杂应用的难度。它提供了开发者在现代Web应用中经常要用到的一系列高级功能，例如：解耦应用逻辑、数据模型和视图；——Ajax服务；——依赖注入；——浏览历史（使书签和前进、后退按钮能够像在普通Web应用中一样工作）；——测试；——更多功能。

2.一个简单的例子:hello world

<!DOCTYPE html>
<html ng-app>
<head>  
<title>Simple app</title>  
<script    src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.13/angular.js"></script>
</head>
<body>  
<input ng-model="name" type="text" placeholder="Your name">  
<h1>Hello {{ name }}</h1>
</body>
</html>

这个例子展示了angular.js最基本的功能：数据绑定。

使用angular.js的方式：在HTML页面中引用angular.js，并在某个DOM元素上明确设置ng-app属性即可。ng-app属性声明所有被其包含的内容都属于这个AngularJS应用，这也是我们可以在Web应用中嵌套AngularJS应用的原因。只有被具有ng-app属性的DOM元素包含的元素才会受Angu-larJS影响。

数据模型对象（model object）是指$scope对象。$scope对象是一个简单的JavaScript对象，其中的属性可以被视图访问，也可以同控制器进行交互。

双向数据绑定（bi-directional）意味着如果视图改变了某个值，数据模型会通过脏检查观察到这个变化，而如果数据模型改变了某个值，视图也会依据变化重新渲染。

在输入字段上使用ng-model指令来实现数据绑定。

如下所示：

<input ng-model="person.name" type="text" placeholder="Yourname">
<h1>Hello{{ person.name }}</h1>

这样绑定就设置好了。我们可以观察一下视图是如何更新数据模型的。当输入字段中的值发生变化时，person.name会被更新，而视图将反映出这个更新。我们仅通过视图就实现了一个双向数据绑定。

正如ng-app声明所有被它包含的元素都属于AngularJS应用一样，DOM元素上的ng-controller声明所有被它包含的元素都属于某个控制器。为了解释这个概念，我们将前面的例子修改成如下的样子：

<div ng-controller='MyController'>    
<input ng-model="person.name" type="text" placeholder="Your name">    
<h1>Hello {{ person.name }}</h1>
</div>

3.一个稍微复杂一点的例子

我们创建一个每秒钟走一步的时钟（时钟通常都是这样的），并更新clock变量上的数据：在这个例子中，MyController函数接受两个参数，即该DOM元素的$scope和$timeout。

<!doctype html>
<html ng-app>
  <head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0-rc.2/angular.js"></script>
  </head>
  <body>
    <div ng-controller="MyController">
      <h1>Hello {{ clock }}!</h1>
    </div>
    <script type="text/javascript">
      function MyController($scope) {
        $scope.clock = new Date();
        var updateClock = function() {
          $scope.clock = new Date();
        };
        setInterval(function() {
          $scope.$apply(updateClock);
        }, 1000);
        updateClock();
      };
    </script>
  </body>
</html>

实现js代码的分离：
尽管我们可以将所有代码都写在一个文件中，但由于需要将不同的组件分开开发，将代码写在一个文件中会使协同工作变得非常困难。通常情况下，更好的选择是将JavaScript放在单独的文件中，而不是index.html中。我们将script部分放入一个叫app.js中。由于JavaScript自身的特点，以及它在传递值和引用时的不同处理方式，通常认为，在视图中通过对象的属性而非对象本身来进行引用绑定，是Angular中的最佳实践。如果把这个最佳实践应用到上面时钟的例子中，需要把视图中的代码改写成下面这样：

<h1>Hello {{ clock.now }}!</h1>

在app.js中：

function MyController($scope, $timeout) {    
	var updateClock = function() {        
		$scope.clock = {            
			now: new Date()        
		};        
		$timeout(function() {          
			updateClock();        
		}, 1000);    
	};    
	updateClock();
};

将所有绑定都通过这样的形式放在视图中，是个非常好的主意。