前端初識angularJS的基本概念

時間 2019-11-30

原文原文鏈接

DEMO1演示地址： http://webenh.chinacloudsites.cn/default/demo1

今天在這裏分享分享我我的學習angular的知識點總結。在尚未接觸到angular的時候，還真的不知道它到底有什麼做用，直到我開始學習它，而且運用到它的時候，才知道angular這麼強大。做爲一個前端開發人員，咱們要對新知識不斷地學習，不斷的充電，對待新知識不斷地渴望，學習新技術是咱們每一位程序員的必備功課，這樣咱們纔不會被潮流淘汰掉。但願從此的日子裏，能和各位博友和大神們在技術上共勉！

什麼是angularJS？

它是一個用於設計動態web應用的結構框架，首先它是一個框架，不是像Query這樣的什麼類庫，它與jQuery不一樣之處在於，前者致力於MVC代碼解耦，採用的是model，controller以及view方式組織代碼，然後者是給你提供了不少的APi函數。那麼什麼是動態web應用呢，官方的解釋是擴展HTML添加動態特性，和傳統的web系統不一樣的是，web應用能爲用戶提供豐富的操做，可以隨用戶操做不斷更新視圖而不進行url跳轉，也就是咱們所說的單頁面應用程序 (Single Page Application)，angular使得開發現代的單一頁面應用程序變得更加容易，你們能夠去看看網易音樂 http://music.163.com/#，它其實就是一個單頁面操做的。在這裏我本身也寫了一個頁面，也是實現的是單頁面的，託管到了Github上面了，你們有興趣的話能夠下載來看看： https://github.com/blackManbaZhu/doubanApp/tree/master

效果地址： https://blackmanbazhu.github.io/doubanApp/#/in_theaters

angularJS的特色特性：

一、MVC架構模式，然而，要說angularJS它是MVC模式，倒不如說它更像是MVVM模式，由於它採用了MVC的基本思想，而又不徹底是MVC。讓咱們來看看MVC的概念：

M: model 模型

一、存儲數據

V: view 視圖

一、展示數據給用戶

二、與用戶交互

C: Controller 控制器調度者

一、請求數據（ajax操做）

二、將數據存儲到model中

三、將模型中的數據交給視圖顯示（經過$scope對象）

四、監視模型的變化，作出相應的動做

二、angular了裏面還有一個就是雙向數據綁定，經過雙向數據綁定來消除DOM操做，在任什麼時候候當模型改變時視圖都會獲得更新。

三、模塊化與依賴注入，也就是代碼模塊化，每一個模塊的代碼都獨立擁有本身的做用域scope，模型model，控制器controller，而後每一個模塊之間能夠相互依賴，這樣大大的提升了代碼的重用性和靈活性，它還有一個比較好的模式是，它能夠把一些操做放到客戶端去操做，服務端只提供數據來源，和其餘客戶端不能完成的操做，這樣儘量的減小服務端的負擔。

實踐：

接下來的話就讓咱們用實踐去一步一步的去學習angular，我我的以爲寫一些demo練習，比理解理論概念要學習的快一些，畢竟實踐是檢驗真理的惟一標準。經過一些小demo，讓咱們更好的理解angularJS。在此，我申明一下，我寫的博客並非教程，只是在學習過程當中的知識點總結，可能在其中有不少不足的地方，畢竟個人知識和理解能力也是有限的，但願你們能把不足指正出來，咱們一塊兒共同進步和學習。

在使用以前，咱們須要下載angularJS，而後把它引入到咱們的項目中：

官方下載地址： https://angularjs.org/

使用npm下載：打開命令窗口，輸入命令npm install angular 直接下載到咱們的項目中去。

首先讓咱們先來看看angularJS的基本寫法：

先看代碼，代碼以下：

<!DOCTYPE html> <html ng-app="appModule"> <head lang="en"> <meta charset="UTF-8"> <title></title> <script src="../angular.js"></script> </head> <body ng-controller="AppController"> <p></p> </body> <script> //定義一個模塊 var app=angular.module('appModule',[]); //在這個模塊中添加一個控制器  app.controller('AppController',['$scope',function($scope){ }]); </script> </html>

咱們來一點點的分析，首先是引入咱們下載好的angularJS文件。

一、定義一個模塊，第一個參數appModule是模塊的名字，第二個參數是個數組，數組中的值咱們能夠先不填，它裏面的值是當前模塊須要依賴的模塊，後續再說詳細的做用。

二、給這個模塊中添加一個控制器，第一個參數是控制器的名稱，第二個參數也是一個數組，數組中的$scope是咱們注入的做用域，這個做用域只做用於當前這個控制器，後面寫的是一個方法，方法中要以參數的形式寫出咱們注入的這個做用域（切記，必需要這樣寫，其中還有個坑的說出來，由於我就跳進去了，之後當咱們要注入東西的時候，先後的順序不能變，必定要一一對應）。

三、如今咱們把模塊和模塊都定義出來了，那咱們要怎麼去和視圖中的HTML創建聯繫呢，你們注意看，我在html標籤中寫了ng-app這個指令，這個就是引入模塊的，也就是說我把我定義出來的appModule的模塊放到了HTML中，至關於這整個HTML頁面我把它當作了是一個模塊，用我定義出來的模塊去管理整個HTML界面，在以後，當前模塊能夠複用到其餘的模塊中去，只須要依賴就能夠。而後在整個模塊中，我把控制器寫到了body標籤中，用ng-controller來引入控制器，這時候，控制器就至關因而在控制整個body界面，去實現咱們想要達到的效果。在這裏我要多囉嗦一點，一個模塊中，能夠有多個控制器，用多個控制器去控制不一樣的區域，實現不一樣的功能，

看看代碼就知道是怎麼實現的:html

<!DOCTYPE html> <html ng-app="appModule"> <head lang="en"> <meta charset="UTF-8"> <title></title> <script src="../angular.js"></script> </head> <body> <div ng-controller="AppController1"> <p>控制器1</p> </div> <div ng-controller="AppController2"> <p>控制器2</p> </div> <div ng-controller="AppController3"> <p>控制器3</p> </div> </body> <script> //定義一個模塊 var app=angular.module('appModule',[]); app.controller('AppController1',['$scope',function($scope){ }]); app.controller('AppController2',['$scope',function($scope){ }]); app.controller('AppController3',['$scope',function($scope){ }]); </script> </html>

以上代碼就能夠看到，我在整個模塊中定義了三個控制器，這個控制器分別管轄着界面中的三個div，而這三個div的獨立分開的，每個控制器值控制着本身的區域，控制不到別人的區域，互不干擾，這樣就把一個一個功能分離開來，這樣有很好的一個好處就是功能的複用性和靈活性！

以上就是angularJS的基本寫法，接下來，用demo來看看angularJS的強大之處

demo1：計數器

界面效果：如圖所示，實現功能：我在輸入框中輸入任意數字，當我點擊增長按鈕的時候，數字會依次往上加1。

咱們先來看看傳統JS是怎麼實現的:

<body> <input type="number" id="txt_value"/> <input type="button" value="增長" id="btn_add"/> </body> <script> (function () { var txt=document.getElementById('txt_value'); var btn=document.getElementById("btn_add"); //監聽按鈕的點擊事件 當我點擊按鈕的時候進行如下操做  btn.addEventListener('click',function(event){ var now=txt.value-0; //這是把字符串強制轉換成數字的一種簡單方法  now=now+1; txt.value=now; }); })(); </script> </html>

咱們再來看看angularJS的實現方法：

<!DOCTYPE html> <html ng-app="appModule"> <head lang="en"> <meta charset="UTF-8"> <title></title> <script src="../angular.js"></script> </head> <body> <div ng-controller="AppController"> <input type="number" ng-model="value"/> <input type="button" value="增長" ng-click="value=value+1"/> </div> </body> <script> var app=angular.module('appModule',[]); app.controller('AppController',['$scope',function($scope){ }]) </script> </html>

你們對比一下，代碼量顯著減小，實現的功能是同樣的。可是，你們不難發現，angular的語法確實有些不同，咱們來詳細分析一下上面的寫法，在第一個input輸入框上面，用ng-model把輸入框的值記錄了下來，而後在第二個按鈕中，給按鈕綁定了一個點擊事件，在綁定事件中，咱們寫的是value=value+1，這樣的意思是告訴angular把上面記錄下來的value值進行相應的運算，而後再把運算的結果賦值給當前輸入框的值。你們能夠想象一下，angular裏面是否是幫咱們作不少的工做，在這裏咱們並無作DOM操做，都是angular幫咱們默默的去作了，這樣實現了讓開發者更多的去作業務邏輯。

demo2：文字同步功能

界面效果：若是所示；實現效果：當我在輸入框中輸入文字的時候，在文本框下面同步我輸入的內容。

你們能夠想象一下，若是用原生的JS來實現這樣的效果，是否是要寫比較多的js代碼，在這裏我就不用原生的寫法寫了，就用angular來寫：

<!DOCTYPE html> <html ng-app="myApp"> <head lang="en"> <meta charset="UTF-8"> <title></title> <script src="../angular.js"></script> </head> <body ng-controller="DemoController"> <div> <input type="text" ng-model="value"/> <h1>{{value}}</h1> </div> </body> <script src="../angular.js"></script> <script> var app=angular.module('myApp',[]); app.controller('DemoController',function(){
 }) </script> </html>