Angular系列之瞭解（一）
阿新 • • 發佈：2018-12-31
注：本章只是偏重與介紹Angular框架與體驗一下angular的特性，具體知識點會在下篇開始講解。
Angular最為核心的是：MVVW（Model-View-ViewModel）、模組化、自動化雙向資料繫結、語義化標籤、依賴注入等等；
重要專業術語的解釋：
1.MVVM模式：比之MVC,MVP等模式而言，更為高階一點的前端開發框架模式，就是體現了資料的雙向繫結；當業務邏輯的中的資料發生改變時，前端展示資料的標籤也會自動跟著改變(自動化雙向資料繫結)：
1).View：html頁面，負責頁面的繪製與使用者的互動；
2).Model：實體模型；
3).ViewModel：負責View與Model之間的互動,負責業務邏輯；
2.依賴注入：一句話‘當我需要你的時候，就把你拿過來用，當我用不到你的時候，我就不需要依賴你我也能照樣生存或執行’；
瞭解一下Angular或這是說MVVM模式的雙向資料繫結的特性：
執行一下，就會發現當你在輸入框中改變裡面的值時，輸入框下邊列印的文字也會隨之改變。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Angular資料雙向綁定了解</title> </head> <body> <!-- ng-model 指令把元素值（比如輸入域的值）繫結到應用程式。 ng-app指令指明瞭應用, ng-controller 指明瞭控制器。 --> <div ng-app="myApp" ng-controller="myCtrl"> 名: <input type="text" ng-model="firstName"><br> 姓: <input type="text" ng-model="lastName"><br> <br> 姓名: {{firstName + " " + lastName}} </div> <!-- 在大型的應用程式中，通常是把控制器儲存在外部檔案中。 personController.js --> </body> </html> <script src="https://cdn.bootcss.com/angular.js/1.6.3/angular.min.js"></script> <script type="text/javascript"> //引數一：ng-app指定的應用名 let myApp = angular.module('myApp', []); //AngularJS 模組 //引數一： ng-controller 指明瞭控制器名 $scope是固定的 myApp.controller('myCtrl', function($scope) { //AngularJS 控制器 $scope.firstName= "John"; $scope.lastName= "Doe"; }); </script>