Angularjs 有以下几个关键的特性:
- MVC
- 数据双向绑定
- 依赖注入
- 指令
接下来,将给以上的特性进行简单的介绍:
MVC
MVC 大家应该都比较熟悉了,M即模型model,V即视图view,C即控制器controller。这背后的核心理念是:
把管理数据的代码(model),应用逻辑代码(controller),以及向用户展示数据的代码(view)清晰的分离开。
在 Angular 应用中,视图就是 Document Object Model (DOM,文档对象模型),控制器就是 javascript 类,而模型数据则被存储在对象的属性中。
如以下简单的 App,
视图代码:
<!DOCTYPE html>
<html ng-app="firstApp">
<head>
<meta charset="utf-8" />
<title>first app</title>
<link rel="stylesheet" href="style.css" />
<script data-require="angular.js@1.4.x" src="https://code.angularjs.org/1.4.2/angular.js" data-semver="1.4.2"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<input ng-model="name">
<p>Hello {{name}}!</p>
</body>
</html>
控制层:
var app = angular.module('firstApp', []);
app.controller('MainCtrl', function($scope) {
$scope.name = 'World';
});
模型层:
即控制器里的 $scope.name
即 name 便是模型,这只是一个简单的模型。
Angular 中有一个插件 js-data,可以为每一个对象定义一个相应的 factory,就像 java 中得持久层对象一样。然后可以进行注入,并可以进行数据的获取。
数据双向绑定
Angular实现了双向绑定机制。所谓的双向绑定,是从界面的操作能实时反映到数据,数据的变更能实时展现到界面。
一个最简单的示例就是这样:
<body ng-controller="MainCtrl">
<label>名称:</label>
<input ng-model="name" name="name" id="name">
<p>Hello {{name}}!</p>
</body>
app.controller('MainCtrl', function($scope) {
$scope.name = 'World';
});
这个实例便是在名称的输入框中,无论输入什么,下面的 p 标签便会动态的显示输入的内容。
依赖注入
依赖注入是一种软件设计模式,用来处理代码的依赖关系。
简单说说依赖注入
一般来说有三种方法让函数获得它的需要的依赖:
- 它的依赖是能被创建的,一般用new操作符就行
- 能够通过全局变量查找依赖
- 依赖能在需要时被导入
前两种方式都不是很好,因为它们需要对依赖硬编码,使得修改依赖的时候变得困难。特别是在测试的时候不好办,因为对某个部分进行孤立的测试常常需要模拟它的依赖。
第三种方式是最好的,因为它不必在组件中去主动需找和获取依赖,而是由外界将依赖传入。
function helloCtrl($scope) {
var vm = $scope;
}
如上例所示,只需要把 $scope 对象放在 helloCtrl 的构造函数里面,然后就可以后去它。
其他的 angular 的 service 如:$location,$http,$local 等也是可以通过放在构造函数里获得。同时,你自定义的 service、factory,也可以通过依赖注入获得。
指令
指令是所有AngularJS 应用最重要的部分。指令是DOM元素上的标记,使元素拥有特定的行为。Angularjs 内置了一些指令,比如 ng-mode, ng-repeat, ng-show等。这些指令都赋予DOM元素特定的行为。例如,ng-repeat 重复特定的元素,ng-show 有条件地显示一个元素。
你可以通过自定义一个指令,来实现自己想要达到的效果。例如你想让一个元素支持拖拽,你可以创建一个指令来实现它;你也可以创建一个指令显示时间选择器。
指令背后基本的想法很简单。它通过对元素绑定事件监听或者改变DOM而使HTML拥有真实的交互性。这个功能让我们可以创建更多有价值的插件进行开源共享,也可以解决项目中代码冗余的情况。