angular 入門教程1

時間 2019-12-06

原文原文鏈接

使用angularjs也有一年之久了。從初識angularjs時的激動和興奮到如今淡定的使用，這其中也是有很多的心酸（剛用的時候和各類js插件的配合使用快把我弄瘋了）。html

細想起來。用MVVM的這種js框架也有3年之久了。從最初的knockout到如今的angularjs，對於前端框架的使用確實可以提交開發效率，更能提高用戶體系。全部的交互都經過異步來交互。對於如今的移動互聯網，尤爲須要這些。有了這些框架咱們能夠更輕鬆的開發webapp和H5的各種應用。而angular 更是其中的佼佼者。前端

下面來簡單介紹一下基本的概念和基本的使用場景和方法程序員

1：angular是什麼(其實這個我不必寫，大家百度就行，但爲了承上啓下仍是寫上吧)angularjs

用一句話總結介紹：angular是一個由google研發的。MVVM的前端js框架。支持雙向綁定和依賴注入，後臺程序員是否是很熟悉，沒有錯它就是專門爲後端程序員而生的前端框架。因此若是你是後端程序員那麼大家對於思路上的大家很容易就能切入進去。前端的程序員也別慌。就是一堆js並且。很容易就能看懂。下面開始正式開說。web

2：雙向綁定後端

這個應該是最實用的效果了（以前knockout教程裏面也有寫到過）簡單來講就是咱們能夠經過雙向綁定來動態的更新頁面上的數據。能夠實現局部刷新（可能以前你是拼的html來實現的）這樣你就能夠很簡單得實現整個頁面都是異步的進行加載。對於雙向綁定原來性的東西。你們能夠去官網查看源碼來了解。我這裏呢主要是在使用方面進行講解。前端框架

廢話很少說先上代碼。app

<ANY
  ng-bind="">
...
</ANY>

這個就是進行雙向綁定的語法。ng-bind 是angular 內置的 directive 後面我會講到什麼是directive 如今大家只要知道我經過這個語法能夠對數據進行綁定。框架

<script>
  angular.module('bindExample', [])
    .controller('ExampleController', ['$scope', function($scope) {
      $scope.name = 'Whirled';
    }]);
</script>
<div ng-controller="ExampleController">
  Enter name: <input type="text" ng-model="name"><br>
  Hello <span ng-bind="name"></span>!
</div>

上面的代碼是angular js部分的。大概意思建立一個叫作bindexample 的模塊在建立一個叫作exampleController 的控制器。在控制器裏面賦值了一個變量webapp

html的部分的結構從上到的意思是。經過ng-controller來肯定控制器的做用域。在這裏做用域以內呢。咱們可使用angular對於的控制器裏的變量和方法。

看到這，後端的程序員是否是以爲怎麼像是MVC框架的控制器。那有model嗎？答案呢是確定的。固然有啦。在上面的html代碼中就有一個angular 命令（對應directive後文中以命令來代替）ng-model用來綁定數據模型。你就能夠把他理解爲MVC 的model。由於在這裏他們的做用和語義上確實是大同小異的。至於view固然就是對應的頁面了。對於angular 的語法你能夠參考官網。最簡單的controller定義就是如上面的那種形式了。這也是最標準的寫法。除此以外你還能夠這樣寫

<script>
var app=angular.module('bindExample', [])
app.controller('ExampleController',function($scope) {
      $scope.name = 'Whirled';
    });
</script>

這樣看起來是是否是容易理解點。可是要注意。這種寫法是不支持js壓縮的也就是說若是你的項目比較大最好仍是按照標準的寫法來寫。

在實際的項目使用當中來講。每每不會直接把控制器的定義和app模塊的定義都放到一個js裏面。通常來講是這種結構。

templates/
    _login.html
    _feed.html
app/
    app.js
    controllers/
        LoginController.js
        FeedController.js
    directives/
        FeedEntryDirective.js
    services/
        LoginService.js
        FeedService.js
    filters/
        CapatalizeFilter.js

在前端也進行業務和邏輯分層。方便管理和維護。在上面呢我經過雙向綁定來引出了angular具體的使用方式和一些基本的語法。可能有些你還不太理解。先不要着急

先這麼用。至於爲何這麼用我會在後面進行講解。固然在使用的過程當中可能大家本身也就頓悟了哈哈。

3：控制器

接着上面的說在上面的例子中屢次使用了controller 關於控制器是什麼我先給出比較官方的解釋:"控制器是一個Javascript函數（類型/類），用來加強除了根做用域意外的做用域實例的。當你或者AngularJS自己經過scope.$new倆建立一個新的子做用域對象時，有一個選項能讓你將它當作參數傳遞給控制器。這能使AngularjS將控制器和這個做用域聯繫起來，加強做用域的行爲。" 是否是看完仍是雲裏霧裏的。那我用大白話來給你們解釋下什麼是控制器。

其實說白了就是一個普通js函數對象。它是有做用域的，它的做用域呢是經過聲明的方法來指定的。它有面向對象的特性支持控制器之間的繼承。繼承的子控制器能夠取到父控制器的方法和對象。

先看看普通的控制器是什麼樣的

<body ng-controller="SpicyCtrl">
 <button ng-click="chiliSpicy()">Chili</button>
 <button ng-click="jalapenoSpicy()">Jalapeño</button>
 <p>The food is {{spice}} spicy!</p>
</body>

function SpicyCtrl($scope) {
 $scope.spice = 'very';
 $scope.chiliSpicy = function() {
   $scope.spice = 'chili';
 }
 $scope.jalapenoSpicy = function() {
  $scope.spice = 'jalapeño';
 }
}

上面的代碼呢我先用大白話解釋一下就是定義了一個叫SpicyCtrl（命名規範是控制器名稱+Ctrl）的控制器。裏面定義了兩個方法。而後經過ng-click內置指令來調用，點擊按鈕進行雙向綁定，「{{}}」這種語法也是綁定寫法的一種可是我不推薦這麼寫。緣由呢留給大家去思考。很容易就會得出結論。

對於上面代碼需求注意的幾點是。

ngController指令是用來（隱式地）爲模板建立做用域的。而且使用命令中指定的spicyCtrl控制器來加強這個做用域。
spicyCtrl只是一個純Javascript函數。使用了駝峯式命名法（可選）命名並以Ctrl或者Controller結尾。
對做用域對象賦予一個新的屬性會建立或者更新模型。
控制器方法可以直接經過賦格做用域對象這個方式建立（如例子中的chiliSpicy方法）。
控制器中的所用方法都能在模板中調用（在body元素或者子元素中）

接來下繼續講解關於控制器方法傳參的問題。

<body ng-controller="SpicyCtrl">
 <input ng-model="customSpice" value="wasabi">
 <button ng-click="spicy('chili')">Chili</button>
 <button ng-click="spicy(customSpice)">Custom spice</button>
 <p>The food is {{spice}} spicy!</p>
</body>

function SpicyCtrl($scope) {
 $scope.spice = 'very';
 $scope.spicy = function(spice) {
   $scope.spice = spice;
 }
}

SpicyCtrl控制器只定義了一個叫spicy的方法，它接受一個叫作spice的參數。和這個控制器相關的模板在第一個按鈕事件中傳遞了一個chili常量給控制器方法，在第二個按鈕中傳遞一個模型屬性。（能夠理解爲model的一個字段）

最後呢是關於控制器繼承的例子.

<body ng-controller="MainCtrl">
 <p>Good {{timeOfDay}}, {{name}}!</p>
 <div ng-controller="ChildCtrl">
   <p>Good {{timeOfDay}}, {{name}}!</p>
   <p ng-controller="BabyCtrl">Good {{timeOfDay}}, {{name}}!</p>
</body>

function MainCtrl($scope) {
 $scope.timeOfDay = 'morning';
 $scope.name = 'Nikki';
}

function ChildCtrl($scope) {
 $scope.name = 'Mattie';
}

function BabyCtrl($scope) {
 $scope.timeOfDay = 'evening';
 $scope.name = 'Gingerbreak Baby';
}