ANGULAR的核心思想是什麼？怎麼體現在程式碼裡？
這裡是修真院前端小課堂，每篇分享文從
【背景介紹】【知識剖析】【常見問題】【解決方案】【編碼實戰】【擴充套件思考】【更多討論】【參考文獻】
八個方面深度解析前端知識/技能，本篇分享的是：
【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/smyhvae/p/8485028.html
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層”。
感謝觀看, 如有出錯, 懇請指正
今天的分享就到這裡啦，歡迎大家點贊、轉發、留言、拍磚~
更多內容，可以加入IT交流群565734203與大家一起討論交流
這裡是技能樹·IT修真院：https://www.jnshu.com，初學者轉行到網際網路的聚集地