angular學習筆記系列一

時間 2019-11-26

原文原文鏈接

　　首先咱們要明確一點，angular在web應用的角色，在傳統的多頁面web應用程序中，服務器根據輸出數據和html模板渲染好頁面所需的html輸出到頁面(所謂的服務器裝配程序)，隨着單頁面應用程序和ajax化的流行，頁面應用程序開始利用ajax技術實現局部刷新的頁面體驗和快速響應的效果；可是這一切或是大可能是的html渲染都是服務器來處理（固然也有各類js模板技術實如今客戶端組裝數據），每次發送的html片斷會根據數據量的多少變化。 angular實現了服務器只須要將數據和html模板片斷輸出到客戶端，讓客戶端進行裝配數據，即減小了服務器cpu時間，又及大的下降了單次響應頁面的大小。javascript

再說關於mvc，傳統的mvc被普遍的應用在c++/java/php/net等後端技術，因爲前端技術不斷的發展，js由單一的提交表單到大量應用於校驗、與服務器通信和各類提升體驗等場景的應用而被不斷的完善。它不在是瀏覽器上的一個小特性，而是一門流行的網站腳本語言（固然js也包括服務器開發場景nodejs，只不過咱們熟知的場景多應用於網站開發），所以angular的應用中將前端代碼引入了mvc（固然它不是第一個基於mvc的前端框架，例如ember也採用mvc，相似的基於事件監聽、依賴注入和數據綁定的方式工做），angular中view層是html片斷，Controller則是javascript類（在js中能夠是function的體現也能夠是angular中控制器的實現），model被存儲在($scope)對象的屬性中php

引入三個新詞彙html

　　一、數據綁定：把UI中部分須要變動dom映射到js屬性上，讓他們根據更改自動同步到顯示界面的過程前端

<html ng-app><!--若是須要angular解析應用，必須加入ng-app，不過根據angular須要操做的html片斷能夠選擇寫在其餘標籤內-->
<script src="js/angular.js"></script>
<script>
    function databinding($scope) {
        $scope.say = 'hello';
    }
</script>
<body>
    <div ng-controller="databinding">
        <input type="text" ng-model="say">
        <span>{{say}}, world</span>
    </div>
</body>
</html>