ANGULAR的核心思想是什麼？怎麼體如今代碼裏？
這裏是修真院前端小課堂，每篇分享文從html
【背景介紹】【知識剖析】【常見問題】【解決方案】【編碼實戰】【擴展思考】【更多討論】【參考文獻】前端
八個方面深度解析前端知識/技能，本篇分享的是：程序員
【ANGULAR的核心思想是什麼？怎麼體如今代碼裏？】angularjs
你們好，我是 IT 修真院上海分院第八期的學員何嶽，一枚正直純潔善良的web程序員web
今天給你們分享一下，修真院官網 JS任務七，深度思考中的知識點——ANGULAR的核心思想是什麼？怎麼體如今代碼裏？數據庫
1. 背景介紹設計模式
AngularJS是什麼？服務器
它是谷歌公司動態web應用設計的一個js框架，是爲了克服html在構建應用上的不足而設計的架構
2. 知識剖析mvc
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層」。
感謝觀看, 若有出錯, 懇請指正
- 1. ANGULAR的核心思想是什麼？怎麼體現在代碼裏？
- 2. Vue的核心思想是什麼..........
- 3. 什麼是OO，OOP的核心思想是什麼？
- 4. 用戶體驗的核心是什麼？
- 5. SEO的核心是什麼
- 6. Spring 核心編程思想：定義Bean、什麼是BeanDefinition？
- 7. 條碼是什麼，條碼具體是怎麼分類的
- 8. Hibernate-什麼是orm思想
- 9. 什麼是IPFS？具體怎麼做的
- 10. Spring核心是什麼
- 更多相關文章...
- • Hibernate是什麼 - Hibernate教程
- • MyBatis是什麼 - MyBatis教程
- • IntelliJ IDEA代碼格式化設置
- • IntelliJ IDEA安裝代碼格式化插件
-
每一个你不满意的现在，都有一个你没有努力的曾经。