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拥有真实的交互性。这个功能让我们可以创建更多有价值的插件进行开源共享，也可以解决项目中代码冗余的情况。
网友评论