这里是修真院前端小课堂，每篇分享文从
【背景介绍】【知识剖析】【常见问题】【解决方案】【编码实战】【扩展思考】【更多讨论】【参考文献】
八个方面深度解析前端知识/技能，本篇分享的是：
【ANGULAR的核心思想是什么？怎么体现在代码里？】
大家好，我是 IT 修真院上海分院第八期的学员何岳，一枚正直纯洁善良的web程序员
今天给大家分享一下，修真院官网 JS任务七，深度思考中的知识点——ANGULAR的核心思想是什么？怎么体现在代码里？
1. 背景介绍
AngularJS是什么？
它是谷歌公司动态web应用设计的一个js框架，是为了克服html在构建应用上的不足而设计的
2. 知识剖析
AngularJS的四个核心思想
1）MVC
2）依赖注入
3）模块化
4）双向绑定
一.MVC
1.M代表model，对应的是数据库
2.V代表view，视图，对应的是html页面
3.C代表controller，控制器，处理用户交互的部分
eg：
<body ng-app="hh">
<div ng-controller="yy"> <!--这个div就是v-->
<input type="text" ng-model="msg"> <!--当添加一个input标签时，用ng-model也能获取到msg信息-->
<h1>{{msg}}</h1>
</div>
<script src="../js6/min/angular.js"></script>
<script>
angular.module("hh", []) //首先用module创建了一个angular的模块，那么这个模块里面每一个controller就是一个简单最小化的MVC
.controller("yy", function ($scope) { //其中yy就是controller，就是mvc的c；$scope里面就是模型，就是m
$scope.msg = "lalala"; //通过双向绑定，把model绑定到view上面
})
</script>
</body>
通过上面的代码可以看到
首先用module创建了一个angular的模块，那么这个模块里面每一个controller就是一个简单最小化的MVC
其中yy就是controller，就是mvc的c；$scope里面就是模型，就是m
通过双向绑定，把model绑定到view上面
例子中的div就是v
二.依赖注入
wiki上的解释是：依赖注入（Dependency Injection，简称DI）是一种软件设计模式，在这种模式下，一个或更多的依赖（或服务）被注入（或者通过引用传递）到一个独立的对象（或客户端）中，然后成为了该客户端状态的一部分
AngularJS的依赖注入只是简单的获取它所需要的东西，而不需要创建那些他们所依赖的东西
有一些核心组件来作为依赖注入：value,constant,factory,service
eg：
.value(“名字”,”赋予名字的值”) —>value的值是可以改变的
.constant(“名字”,”赋予名字的值”)—>constant的值不可以改变，这个可以用作以后服务器的网址
.factory(“data”,function(){
})
.service("user",function(){
})
eg：
html代码：
<body ng-app="app">
<div ng-controller="ctrl">
<h1 ng-bind="msg"></h1>
<h1 ng-bind="name"></h1>
<h1 ng-bind="http"></h1>
<h1 ng-bind="data.msg"></h1>
<h1 ng-bind="user.getName()"></h1>
</div>
<script src="../js6/min/angular.js"></script>
<script src="./angular5.js"></script>
</body>
JS代码：
angular.module("app",[])
.value("name","hh")
.value("name","yy") //-->value的值是可以改变的
.constant("http","www.xxx.com") //-->constant的值不可以改变，即是有多个也以第一个为准
.factory("data",function(){
return{
msg:"are you ok",
setMsg:function(){
this.msg="ok"
}
}
})
.service("user",function(){
this.fistname="scofield";
this.lastname=" he";
this.getName=function(){
return this.fistname+this.lastname;
}
})
.controller("ctrl",function($scope,name,http,data,user){ //—>controller中使用services
$scope.msg="hello";
$scope.name=name;
$scope.http=http;
$scope.data=data;
data.setMsg();
$scope.user=user;
})
三.模块化
高内聚低耦合
官方提供的模块:ng、ngRoute、ngAnimate、ngTouch
自定义的模块:angular.module('模块名',[ ])
四.双向绑定
AngularJS中只需要将DOM中的元素与js的某个属性绑定，js属性值变化会同步到DOM元素上，同样的，DOM元素值得变化也会映射到js的属性上。
3. 常见的问题
AngularJS的优点
4. 解决方案
可以通过核心思想中的依赖注入和双向绑定，不需要写大量的代码实现复杂的功能
可以不需要像jQuery一样操作复杂的dom代码，只需要改变模型就行了
5. 编码实战
6. 扩展思考
MVC与MVVM区别？
7. 参考文献
https://www.cnblogs.com/smyhv...
8.讨论问题：
问： 1.MVC与MVVM区别？
答：MVVM是Model-View-ViewModel的简写。微软的WPF带来了新的技术体验，如Silverlight、音频、视频、3D、动画……，这导致了软件UI层更加细节化、可定制化。同时，在技术层面，WPF也带来了 诸如Binding、Dependency Property、Routed Events、Command、DataTemplate、ControlTemplate等新特性。MVVM（Model-View-ViewModel）框架的由来便是MVP（Model-View-Presenter）模式与WPF结合的应用方式时发展演变过来的一种新型架构框架。它立足于原有MVP框架并且把WPF的新特性糅合进去，以应对客户日益复杂的需求变化。
问：2.controller与factory，service是什么关系？
答：controller 专注于业务场景，即为特定的场景服务，所以不要重用controller，推荐通过小范围划分controller，使用父子作用域来满足业务场景。factory 提供一些公共的方法函数，推荐抽象，重用factory。service 类似factory，会被实例化，可以保存数据，作为controller之间的通讯工具，推荐重用。
问：3.angular和jQuery的区别？
答：在jQuery中，你首先设计了一个page，然后再去动态修改它的内容，这是因为jQuery被设计用来进行扩展并在这个前提下大幅度地增加和修改内容，但是在angularjs中，你必须在心中先设计好你的架构，从一开始，你就要摒弃“我拥有一个DOM元素并且想让它去做某件事”，代之为“我需要完成什么任务，然后接着设计你的应用，最后再去设计你的视图view层”。
感谢观看, 如有出错, 恳请指正
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。