怎么快速上手angular.js

本篇內(nèi)容介紹了“怎么快速上手angular.js”的有關(guān)知識，在實際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧！希望大家仔細(xì)閱讀，能夠?qū)W有所成！

什么是 angular.js

angular.js 準(zhǔn)確的來說，應(yīng)該不是一個框架，是一個 js 庫，一個依賴于 jQuery 的進(jìn)一步封裝，去除繁瑣的 DOM 操作，使用數(shù)據(jù)驅(qū)動的 MVC 模塊化庫。

這里扯到 MVC 這個詞語，也不是很清楚，我自己的理解 M 其實就是 Module 模塊，一個 .html 就是一個模塊， V 其實就是我們 .html 里面那些 DOM 元素， C 就是我們用來操作 V 那些 js 腳本。

我大概畫了一個簡單的草圖：

不知道對不對，如果不對，懇請各位大佬，提出寶貴的建議，讓我有更大的提升，謝謝。

為什么要使用 angular.js

額，我必須要吐槽一下，為毛還要使用 angular.js，為毛不使用 angular2，好歹讓我入門 ts 也好啊，好了，既來之，則安之。

用這個 js 庫的一個關(guān)鍵原因就是因為可以去除繁瑣的 DOM 操作。
使用數(shù)據(jù)驅(qū)動視圖的方式，進(jìn)行開發(fā)，非常高效。

如何使用 angular.js

• ng-app 加載一個入口應(yīng)用模塊

	var app = angular.module('ngApp', []);

有點類似，Vue 項目的 let app = new Vue();

• ng-init 初始化數(shù)據(jù)，

	<div ng-app="ngApp" ng-init="message='hello world'"></div>

有點類似 Vue 中的 data() 屬性。

• ng-controller 控制器

	<div ng-app="ngApp" ng-init="message='hello world'" ng-controller="ngController"></div>
	 
	<script type="text/javascript">
	var app = angular.module('ngApp', [])
	var controller app.controller('ngController', function($scopr) {})
	</script>

• ng-bind 數(shù)據(jù)綁定
  有點類似 Vue 中的 v-bind

• ng-model 數(shù)據(jù)雙向綁定
  有點類似 Vue 中的 v-model

	<input type="text" ng-model="message">

• ng-repeat 數(shù)據(jù)循環(huán)
  有點類似 Vue 中的 v-for

	<div ng-app="" ng-init="names=['Jani','Hege','Kai']">
	  <p>使用 ng-repeat 來循環(huán)數(shù)組</p>
	  <ul>
	    <li ng-repeat="x in names">
	      {{ x }}
	    </li>
	  </ul>
	</div>

• ng-if 為HTML增加選擇功能，只有在表達(dá)式值為true時，當(dāng)前元素才添加到DOM樹
  有點類似 Vue 中的 v-if

• ng-show 有點類似 v-show

• ng-src 有點類似 :src

• ng-click 有點類似 @click

• ng-style 有點類似 :style

• ng-class 有點類似 :class

• ng-show/ng-hide 有點類似 jq 的中 show(),hide()

• ng-disabled 有點類似 :disabled

• ng-checked 有點類似 :checked

• $scope 有點類似 Vue 中的 data() 屬性

• filter 過濾器，有點類似 Vue 中的 filter

• $scope.$watch 有點類似 Vue 中的 watch 屬性

“怎么快速上手angular.js”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識可以關(guān)注億速云網(wǎng)站，小編將為大家輸出更多高質(zhì)量的實用文章！