AngularJs學習總結－瞭解基本特性（－）

時間 2019-11-18

原文原文鏈接

如今的前端項目中基本上都會用到angularjs框架，以前並不瞭解這個框架，也是由於最近接手的項目，因此打算好好的學習下它。以前都是搞pc端，如今接手的是移動端的項目，移動端UI框架用的是ionic＋vordova，沒有用bootstrap，主要作的是ios+安卓的app界面，ionic這個框架也不太瞭解，也須要花時間好好熟悉下。angularjs學習小白一枚，歡迎大神指正。javascript

AngularJs是什麼？css

簡單來講，即javascript的一個框架，經過script標籤添加到網頁中。即咱們使用angularjs時，須要引入下面的代碼。html

 <script src="http://code.angularjs.org/angular-1.0.1.min.js"></script>

一般建議把腳本放在<body>元素的底部，做用是：提升網頁加載速度。由於html加載不受制於腳本加載。前端

AngularJs的做用？ java

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

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

像如今移動端基本上使用單頁面的比較，就是利用angular的路由轉換進行的。像咱們如今這個項目也是使用的單頁面。即在主頁面裏面，即跳轉的頁面都在主頁面裏面進行。截圖以下：angularjs

AngularJs表達式 ajax

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

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

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

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

<!doctype html>
<!-- 標記angularjs處理整個html頁並引導應用 -->
<html ng-app>  
     <head>
         <meta charset="utf-8">
         <script src="http://code.angularjs.org/angular-1.0.1.min.js"></script>
     </head>
     <body>
        <p>name:{{"ting"+"feng"}}</p>
        <p>number:{{5+5}}</p>
        <div ng-init="person={name:'tingfeng',age:'13'}">
           <p>name:{{person.name}}&nbsp;age:{{person.age}}</p>
        </div>
    </body>

</html>

AngularJs在html中的應用

主要經過ng-directive擴展html，angularjs指令是以ng做爲前綴的html屬性，包含有四大特性：mvc，模塊化，指令系統（directive），databinding

ng-init:該指令初始化angularjs應用程序變量。好比下面的列子：

<!doctype html>
<!-- 標記angularjs處理整個html頁並引導應用 -->
<html ng-app>  
     <head>
         <meta charset="utf-8">
         <script src="http://code.angularjs.org/angular-1.0.1.min.js"></script>
     </head>
     <body>
        <div ng-init="name='tingfeng'">
             <p>name is:<span ng-bind="name"></span></p>
        </div>
     </body>

</html>

ng-app:該指令表示定義一個angularjs應用程序。一般放在html後面，也能夠在局部使用ng-app指令，好比<div ng-app>則angularjs腳本僅在該div中運行,即代表今後處開始，全部內容均爲angularjs進行管理。

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

ng-bind：該指令是把應用程序數據綁定到html視圖中。使用相應的指令，便可利用angularjs操做html頁面。具體怎麼使用，咱們來看看代碼。

此時利用ng-model綁定到setname模型變量上，當在輸入框中輸入值時，相應的setname也會變化。可自行貼碼測試。

關於$scope解釋

$scope是什麼？有什麼做用？如何使用它？

簡單來講，$scope是一個pojo（plain old javascript object）,相似於一個對象，有屬性和方法，$scope提供了$watch()和$apply()工具方法。angularjs的mvc所有藉助於$scope進行的。

特性：1.是表達式的執行環境（或者做用域）

2.$scope是一個樹型結構，與dom標籤平行，其上含有一個$rootscope處於最頂層。

3.$scope會繼承父$rootscope的屬性和方法。

4.$scope能夠傳播事件，相似於dom，能夠向上傳播也能夠向下。

5.$scope不只是mvc的基礎，也是後面實現雙向綁定的基礎。

AngularJs的組成部分

模板：即編寫的html和css的文件，展示應用的視圖。angularjs能夠在html中構建本身的html標記！
控制器:與ajax不一樣，不須要另外編寫偵聽器或dom控制器，由於它已經內置到angularjs中。好處：便於編寫，測試，維護和理解。

模型數據：模型是從angularjs作用域對象的屬性引伸的。模型的數據多是js對象，數組或基本類型，但都屬於angularjs做用域對象。

如何理解angularjs中的做用域？

即一個做用域能夠視做模板，模型和控制器協同工做的粘接器，angularjs使用做用域，同時還有模板中的信息，數據模型和控制器。這些能夠幫助模型和視圖分離，但他們二者確實時同步的！任何對於模型的更改都會即時反映到視圖上，任何視圖的更改都會被馬上體如今模型中。

視圖：在angularjs中，一個視圖是模型經過html模板渲染以後的映射。即不論模型何時發生變化，angularjs會實時更新結合點，隨之更新視圖。

仍是貼碼來看，更加直觀！

<!doctype html>
<html ng-app="HelloAngular"> 
     <head>
         <meta charset="utf-8">
         <script src="http://code.angularjs.org/angular-1.0.1.min.js"></script>
         <script>
            //模塊化
           var myModule = angular.module("HelloAngular", []); －－控制模板HelloAngular
           myModule.controller("helloAngular", ['$scope',
            function HelloAngular($scope) {
                $scope.value = {
                    name: 'jiangting'
                };
            }
        ]);       
       </script>
     </head>
     <body>
     <!-- mvc看angular-->
        <div ng-controller="helloAngular">  －－控制器爲helloAngular
             <p>{{value.name}},hello!</p>
        </div>
        <!-- angular 模塊化 -->  

     </body>
</html>

咱們來看看controller的應用，即控制器，即控制器經過操做數據，將其進行綁定，展示在html頁面上。

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

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

ng-app指令定義了應用, ng-controller 定義了控制器。咱們用上面的列子來看：

AngularJS模塊定義應用：

 var myModule = angular.module("HelloAngular", []); －－控制模板HelloAngular

angularjs控制器控制應用：

 myModule.controller("helloAngular", ['$scope',
            function HelloAngular($scope) {
                $scope.value = {
                    name: 'jiangting'
                };
            }
        ]);

瞭解前端mvc

關於controller特性：

1.不要試圖去複用controller，一個控制器通常只負責一個小塊視圖
2.不要直接在controller中操做dom，這不是其職責
3.不要在controller裏面作數據過濾的操做,ng有$filter服務
4.不要在controller裏面作數據格式化，ng有很好用的表單控件
5.controller是不會互相調用，控制器之間的交互會經過事件進行，經過$scope進行調用。

下面看下如何自定義指令系統，代碼以下：

<!doctype html>
<html ng-app>
     <head>
         <meta charset="utf-8">
         <script src="http://code.angularjs.org/angular-1.0.1.min.js"></script>
         <script>
            //指令系統
        var myModule = angular.module("MyModule", []);
            myModule.directive("hello", function() {
            return {
                restrict: 'E',
                template: '<div>Hi everyone!</div>', --這裏咱們插入一段html標籤
                replace: true
            }
        });
       </script>
     </head>
     <body>   
        <hello></hello>
     </body>

</html>

directive中，後面返回有三個參數，其中template中指所插入的html標籤。如今我門本身來寫一段html代碼，看看如何將其變爲angularjs的寫法。

原靜態html代碼以下：

 <ul>
          <li>
             <span>new1</span>
             <p>just a test page1</p>
          </li>
          <li>
             <span>new2</span>
             <p>just a test page2</p>
          </li> 
 </ul>

將其改版爲angularjs的寫法以下：

<!doctype html>
<html ng-app>
     <head>
         <meta charset="utf-8">
         <script src="http://code.angularjs.org/angular-1.0.1.min.js"></script>
         <script>
         //$scope爲控制器的做用域，
         //angularjs做用域：能夠視做模板，當應用啓動以後，會有一個根做用域被建立出來，而控制器的做用域是根做用域的一個典型後繼。
            function  newsCtrl($scope){
                 $scope.news=[
                    {"content":"new1",
                     "introduce":"just a test page1"},
                    {"content":"new2",
                     "introduce":"just a test page2"}
                 ];
                 $scope.phones={
                    length:"4"    
                    // 單個的屬性不能加分號，多個屬性用逗號分隔
                 };

            }
        </script>
     </head>
     <body ng-controller="newsCtrl">
      <ul>
          <li ng-repeat="new in news">
              {{new.content}}
              <p>{{new.introduce}}</p>
          </li>
      </ul> 
     </body>

</html>