行如風 Angular初識

時間 2020-02-15

原文原文鏈接

本人接觸前端代碼時間並不長，其中css 、html、js以及jquery庫是前端知識的基礎，其餘一些人可能還接觸過php,java等後臺的代碼，這裏就很少廢話進入正題：）php

你們可能剛開始接觸前端知識的時候尤爲對jquery庫有了先入爲主的概念（特別是剛開始就學習的jquery而不是angular、vue等其餘前端框架的童鞋），這樣的話可能會致使你們在學習Angular框架的時候，思惟模式難以轉變：css

Jquery主要是獲取DOM節點（是非模塊化的），而後對節點進行操做，以下：html

修改一個類名爲abc的div標籤節點的內容$(‘div.abc’).html(「hello world!」)前端

你們都會以爲這語法如此簡單，並且容易上手，的確是這樣，可是有一個問題（敲黑板，這是重點），若是在整個<body>標籤裏有若干個類名class爲abc的標籤，則對應標籤裏的內容都會改變，在大型項目裏，會有成百個class和id,不免會有重複名稱,並且當某一天根據需求的變化，前端的代碼須要改變了，如：上面的div以及類名abc發生了變化，樣式還好改變能夠在css裏處理可是div裏的數據內容不會跟着變化，由於已經找不到$(‘div.abc’)，還須要開發人員修改代碼，不利於代碼的維護性（耦合性問題出現，雖然都會避免問題的出現，但不表明不會出現）。vue

2. Angular是模塊化的思惟模式，這是與Jquery的區別之一。模塊化你們應該都明白java

，簡單明瞭的說就是各幹各的，互不影響。AngularJS 經過被稱爲指令的新屬性來擴展 HTML，上例子，以下：jquery

<div ng-app="myApp" ng-controller="myCtrl">
名字: <input ng-model="name">
</div>

<script>
varapp = angular.module('myApp', []);
app.controller('myCtrl',function($scope) {
$scope.name = "John Doe";
});
</script>前端框架

ng-app是初始化一個應用程序的指令，模塊化必需的指令；app

ng-controller是控制器指令，數據的修改必須用到；框架

ng-model指令實現數據的綁定。

你們如今可能以爲，這個Angular爲何這麼麻煩，徹底沒有Jquery簡單，不就是修改個內容嗎，還寫這麼多，一點都不省事。其實偏偏相反，當代碼模塊化處理的時候，各司其職，互相之間不影響，耦合性低，無論HTML裏的標籤會變成什麼樣子，標籤裏的數據不會發生改變。當前端的內容逐漸豐富，功能愈來愈多的時候，代碼模塊化是最佳的選擇，並且Augular最大的一個優勢就是數據的雙向綁定，數據的處理很是簡單，開發更容易。我也在逐漸學習Angular和你們一塊兒成長，對於數據的處理，後續會娓娓道來，這篇就先到這裏。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。