angular js 初學

時間 2019-12-10

標籤 angular 初學欄目 AngularJS 简体版

原文原文鏈接

1 angularJS的一些概念

AngularJS 經過新的屬性和表達式擴展了 HTML。html

AngularJS 是一個 JavaScript 框架，它是一個以Javascript編寫的庫，它可經過 <script> 標籤添加到 HTML 頁面。java

Angular Js是一個Javascript框架，git

AngularJS 能夠構建一個單一頁面應用程序（SPAs：Single Page Applications）。angularjs

注：咱們建議把腳本放在 <body> 元素的底部。這會提升網頁加載速度，由於 HTML 加載不受制於腳本加載。github

各個 angular.js 版本下載： https://github.com/angular/angular.js/releasesexpress

2 angularJS的歷史

AngularJS 是比較新的技術，版本 1.0 是在 2012 年發佈的。bootstrap

AngularJS 是由 Google 的員工 Miško Hevery 從 2009 年開始着手開發。數組

該項目目前已由 Google 正式支持，有一個全職的開發團隊繼續開發和維護這個庫。app

3 什麼是angular

AngularJS 使得開發現代的單一頁面應用程序（SPAs：Single Page Applications）變得更加容易。框架

AngularJS 把應用程序數據綁定到 HTML 元素。
AngularJS 能夠克隆和重複 HTML 元素。
AngularJS 能夠隱藏和顯示 HTML 元素。
AngularJS 能夠在 HTML 元素"背後"添加代碼。
AngularJS 支持輸入驗證。

4 angularJS 配置

AngularJS 經過 ng-directives 擴展了 HTML。

AngularJS 表達式寫在雙大括號內：{{ expression }}。

ng-app 指令定義一個 AngularJS 應用程序。

ng-model 指令把元素值（好比輸入域的值）綁定到應用程序。

ng-bind 指令把應用程序數據綁定到 HTML 視圖。

<div ng-app="">
     <p>名字 : <input type="text" ng-model="name"></p>
     <h1>Hello {{name}}</h1>    // 此處爲angular表達式用雙大括號包裹  
</div>
   
  注意： 須要引入angularjs插件庫 經過javascrit的src屬性引入

1.ng-app是一個特殊的指令，一個HTML文檔只出現一次，如出現屢次也只有第一個起做用；ng-app能夠出如今html文檔的任何一個元素上。

2.ng-app做用：告訴子元素指令是屬於angularJs。

3.ng-app的值能夠爲空（練習），項目中必定要賦值，後面所說的模塊。

      一個頁面裏建立多個 ng-app 手動加載便可:
   var app1 = angular.module("app1", []); //自動加載

   var app2 = angular.module("app2", []); //手動加載

// 頁面加載完成後,再加載模塊
  angular.element(document).ready(function() {

      //手動加載myApp2 ng-app

    angular.bootstrap(document.getElementById("myApp2"), ['myApp2'])

  })

5 angularJS 表達式

　 AngularJS 表達式寫在雙大括號內：{{ expression }}。

AngularJS 表達式把數據綁定到 HTML，這與 ng-bind 指令有殊途同歸之妙。

AngularJS 將在表達式書寫的位置"輸出"數據。

AngularJS 表達式 很像 JavaScript 表達式：它們能夠包含文字、運算符和變量。

實例 {{ 5 + 5 }} 或 {{ firstName + " " + lastName }}

5.1 AngularJS 數字

<div ng-app="" ng-init="quantity=1;cost=5">
 
    <p>總價： {{ quantity * cost }}</p>
 
</div>

　　5.2 AngularJS 字符串

<div ng-app="" ng-init="firstName='John';lastName='Doe'">
 
    <p>姓名： {{ firstName + " " + lastName }}</p>
 
</div>

　5.3 AngularJS 對象

<div ng-app="" ng-init="person={firstName:'John',lastName:'Doe'}">
 
     <p>姓爲 {{ person.lastName }}</p>
 
</div>

　5.4 AngularJS 數組

<div ng-app="" ng-init="points=[1,15,19,2,40]">
 
    <p>第三個值爲 {{ points[2] }}</p>
 
</div>
 
 使用 ng-bind 也能夠實現一樣的效果

<div ng-app="" ng-init="points=[1,15,19,2,40]"> 
 
 <p>第三個值爲 <span ng-bind="points[2]"></span></p>
 
</div>

拓展：AngularJS 表達式 vs JavaScript 表達式

JavaScript 表達式與AngularJS 表達式同樣能夠包含字母，操做符，變量。

AngularJS 表達式能夠寫在 HTML 中。jascript表達式只能寫在script標籤中

AngularJS 表達式不支持條件判斷，循環及異常。JavaScript 表達式支持if判斷及for循環

AngularJS 表達式支持過濾器，JavaScript 表達式支持正則過濾

6 angularJS 應用

AngularJS 模塊（Module） 定義了 AngularJS 應用。

AngularJS 控制器（Controller） 用於控制 AngularJS 應用。

ng-app指令指明瞭應用, ng-controller 指明瞭控制器。

AngularJS 應用程序由 ng-app 定義。應用程序在 <div> 內運行。

ng-controller="myCtrl" 屬性是一個 AngularJS 指令。用於定義一個控制器。

myCtrl 函數是一個 JavaScript 函數。

AngularJS 使用$scope 對象來調用控制器。

在 AngularJS 中， $scope 是一個應用對象(屬於應用變量和函數)。

控制器的 $scope （至關於做用域、控制範圍）用來保存AngularJS Model(模型)的對象。

控制器在做用域中建立了兩個屬性 (firstName 和 lastName)。

ng-model 指令綁定輸入域到控制器的屬性（firstName 和 lastName）。

基本配置以下：

<div ng-app="myApp" ng-controller="myCtrl">   <！-- 此處myApp指向模塊應用  ng-controller 指令來添加應用的。控制器model中能夠有多個controller: -->
 
   名: <input type="text" ng-model="firstName"><br>
   姓: <input type="text" ng-model="lastName"><br>
   <br>
   姓名: {{firstName + " " + lastName}}
 
</div>
<script>
var app = angular.module('myApp', []);   //  此處代碼標明建立了一個模塊，定義應用爲app myApp指向視圖層 
　　　　　　　　　　　　　　　　　　　　　　 // 在模塊定義中 [] 參數用於定義模塊的依賴關係。
　　　　　　　　　　　　　　　　　　　　　　 // 中括號[]表示該模塊沒有依賴，若是有依賴的話會在中括號寫上依賴的模塊名字。

app.controller('myCtrl', function($scope) {   // 給定義的模塊綁定控制器 myCtrl
                                              // $scope (至關於做用域、控制範圍 )用來保存AngularJS Model(模型)的對象。
    $scope.firstName= "John";
    $scope.lastName= "Doe";
});
</script>

　　拓展關於 controller 中做用域的問題：

說明： controller 中，若是局部 $scope 和全局 $rootScope 都存在，且有相同名字的變量，{{變量名}} 指局部變量而不是全局變量，做用域只有當前 controller；{{$root.變量名}} 是全局變量，在 ng-app="" 下任何一個 controller 中都能使用。若是沒有 $scope, 只有 $rootScope，那麼 {{變量名}} 和 {{$root.變量名}} 就沒區別了。

<body ng-app="myApp">
<div ng-controller="myCtrl">       //輸出結果
    {{first}}<br>                 //ctrl局部first
    {{$root.first}}<br>           //全局first
    {{second}}<br>                //全局second
    {{$root.second}}<br>          //全局second
</div>
<br>
<br>
<div ng-controller="myCtrl2">
    {{first}}<br>                //全局first
    {{$root.first}}<br>          //全局first
    {{second}}<br>              //ctrl2局部second 
    {{$root.second}}            //全局second
</div>
<script>    
var app = angular.module('myApp', []);    
app.controller('myCtrl', function ($scope,$rootScope) {
        $scope.first = 'ctrl局部first';
        $rootScope.first = '全局first';
    });    
app.controller('myCtrl2', function ($scope,$rootScope) {
        $scope.second = 'ctrl2局部second';
        $rootScope.second = '全局second';    
});
</script>