最近学习了一下关于AngularJs的知识，发现和Vue还是有非常相似的东西。所以对于学过Vue的自己来说，还是比较好理解的
特点：双向数据绑定，单页面应用
控制器：
AngularJs控制器可以控制网页上的DOM元素，也可以响应网页上的单击事件，这一切源于$scope,它是模型(ng-model)于视图(View)
的数据通道。其中$scope起到了一个数据传递作用。
而要实现控制器必须在DOM元素上加上ng-controller( Angular的一个指令), Controller于View是绑定在一起的。当Angluar加载时，它就会加载
读取ng-controller的参数。
模块：
AngularJs的一个非常重要的概念--Module,对于一个Angular应用来说，是由多个模块组成的。同时模块是存在可复用性，可在多个地方被调用。
模板：
这个地方是Angular比较重要的地方，（同时Vue中也是有的），对于一个项目模板是一个很重要的部分。它能动态的展示不同的视图（页面）。其中
要是使用模块这个功能就必须用到ng-template这个指令;同时使用模块这个一般和ng-view(管理视图）的指令一起使用
路由：
路由是什么，就是我们在应用上要实现页面的跳转，要实现这样的功能就需要使用路由来进行管理。在这里说明一下AngularJs1.2版本之后ngRoute被单独剥离出来，
需要进行重新引用。AngularJS的$route所提供的$routeProvider声明路由
工厂方法：
这个和java中的工厂方法有点类似，毕竟设计模式这样。就是如果一个对象$scope.xxx要在多个地方调用，就需要去把这个对象个做成单例对象。而在AngularJs里面实现
这种最简单的方式就是调用factory();通过factory()来返回对应的属性方法。
提供一个案例来供分析：
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<title> Hello World in AngularJs </title>
<script src="js/angular.min.js"></script>
<script src="js/angular-route.js"></script>
<!--
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
<script src="http://apps.bdimg.com/libs/angular-route/1.3.13/angular-route.js"></script>
c‘f
-->
</head>
<body>
<div ng-view></div>
<script type="text/ng-template" id="/todos.html">
<ul>
<li ng-repeat="todo in todos">
<input type="checkbox" ng-model="todo.completed">
<a href="#/{{ $index }}"> ID{{ id }}</a>
</li>
</ul>
</script>
<script type="text/ng-template" id="/todoDetails.html">
<h1>{{ todo.name }}</h1>
completed: <input type="checkbox" ng-model="todo.completed">
note: <textarea>{{todo.note}} </textarea>
</script>
<script> // 创建模块
var app = angular.module(‘myApp‘, [‘ngRoute‘]);
// 创建工厂方法 实例一个公用对象
app.factory(‘Todos‘, function () {
return [
{ name: ‘掌握 HTML/CSS/Javascript‘, completed: true },
{ name: ‘学习 AngularJS‘, completed: false },
{ name: ‘熟悉 NodeJS ‘, completed: true },
{ name: ‘接触 ExpressJS‘, completed: false },
{ name: ‘搭建 MongoDB database‘, completed: false },
]
}) // 路由配置
app.config([‘$routeProvider‘, function ($routeProvider) {
$routeProvider
.when(‘/‘, {
templateUrl: ‘/todos.html‘,
controller: ‘TodoController‘
})
.when(‘/:id‘, {
templateUrl: ‘/todoDetails.html‘,
controller: ‘TodoDetailContrl‘
})
}])
app.controller(‘TodoController‘, [‘$scope‘, ‘Todos‘, function($scope, Todos) {
console.log(‘llll‘);
$scope.todos = Todos
}])
app.controller(‘TodoDetailContrl‘, [‘$scope‘, ‘$routeParams‘, ‘Todos‘, function($scope, $routeParams, Todos) {
console.log(‘xxx‘);
$scope.todo = Todos[$routeParams.id]
}])
</script>
</body>
</html>
原文地址：https://www.cnblogs.com/yaobolove/p/8506798.html