最近学习了一下关于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>
AngularJs 学习 （一）
原文地址：https://www.cnblogs.com/yaobolove/p/8506798.html