angular框架

時間  2019-12-09
標籤 angular 框架 欄目 AngularJS 简体版
原文   原文鏈接

什麼是angular:

是一款優秀的前端JS框架，已經被用於Google的多款產品當中。css

AngularJS有着諸多特性，最爲核心的是：MVC（Model–view–controller）、模塊化、自動化雙向數據綁定、語義化標籤、依賴注入等等。html

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

AngularJS 經過 指令 擴展了 HTML，且經過 表達式 綁定數據到 HTML。jquery

AngularJS 是以一個 JavaScript 文件形式發佈的，可經過 script 標籤添加到網頁中。
 

Angular 基本介紹

 Angular主要分爲八大構造塊：模塊、組件、模板、元數據、數據綁定、指令、依賴注入。
【模板】
模板是在頁面中要顯示的內容，也就是html文件，以Html的形式告訴Angular如何渲染組件。
【組件】
一個組件控制着屏幕上的一塊咱們稱爲視圖的區域，也是自定義的一段html代碼，咱們給他起個名字，就能夠當作html的標籤使用了。express

【服務】 
封裝業務邏輯。 
【模塊】 
將一系列的組件、指令和服務整合到一塊兒，提供一個完整的功能。 
【指令】 
指令是包含指令元素的一個類，容許你向html元素中添加自定義行爲，根據指令動態渲染頁面。json

【元數據】 
元數據告訴咱們如何處理一個類數組

【依賴注入（DI）】 
Angular使用依賴注入來提供新組件以及組件所需的服務。瀏覽器

AngularJS 表達式

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

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

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

例子：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/angular.js/1.4.6/angular.min.js"></script> 
</head>
<body>

<div ng-app>
<p>個人第一個表達式: {{ 5 + 5 }}</p>
</div>

</body>
</html>

  效果顯示：

Angular指令（有不少能夠參考手冊）

   1.ng-app指令

    1.讓你瀏覽器正常的去解析文檔，不會去管以ng-開頭的東西
    2.當碰到ng-app這個屬性的時候，後面全部的文檔都將由angular來完成
    angular中的指令都是由ng-開頭,一個頁面只能有一個ng-app

    2. ng-init 指令

      1.ng-init 指令爲 AngularJS 應用程序定義了 初始值。

      2. 一般狀況下，不使用 ng-init。您將使用一個控制器或模塊來代替它。

  3.建立自定義的指令

      除了 AngularJS 內置的指令外，咱們還能夠建立自定義指令。

     你可使用 .directive 函數來添加自定義的指令。

      要調用自定義指令，HTML 元素上須要添加自定義指令名。

   實例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>自定義指令</title>
</head>
<body>
    <div ng-app="App">
    <run></run>   <!-- 元素名 -->
    <div run></div>   <!--  屬性 --> 
    <div class="run"></div>   <!-- 類名 -->
    <!-- run -->
    </div>
     
    <script src="bower_components/angular/angular.min.js"></script>
    <script>
        var app = angular.module("App",[]);
        // app.controller('con1',['$scope'function(){    
        // }]) 
        app.directive("run",function(){
            return{
                // restrict:"C",      //類名來調用指令
                restrict:"M",         //註釋
                replace:true,         //註釋
                template:"<h1>自定義指令</h1>"
            };
        });
           // restrict 值能夠是如下幾種:
           // E 做爲元素名使用
           // A 做爲屬性使用
           // C 做爲類名使用
           // M 做爲註釋使用
    </script>
</body>
</html>

 

Angular控制器和模塊

建立模塊：你能夠經過 AngularJS 的 angular.module 函數來建立模塊

                        模塊定義了一個應用程序。

                        模塊是應用程序中不一樣部分的容器。

                        模塊是應用控制器的容器。

                       控制器一般屬於一個模塊。

添加控制器：你可使用 ng-controller 指令來添加應用的控制器: 

                                AngularJS 控制器 控制 AngularJS 應用程序的數據。

                                AngularJS 控制器是常規的 JavaScript 對象。

指令與模塊控制器總實例：

<!DOCTYPE html>
<html ng-app="App">        <!--ng-app指令-->
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <!-- ng-init指令能夠初始化模塊model的數據 -->
    <div ng-controller="controllerTest">
        
    </div>

    <script src="public/libs/angular/angular.min.js"></script>
    <script>
         //建立模塊
        var App = angular.module("App",[]); 
        // 定義控制器       
        App.controller("controllerTest",['$scope',function($scope){ 
            // 都是往$scope這個對象上面去添加屬性和方法
        }])
    </script>
</body>
</html>

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <div ng-app="App">
        <div ng-controller="con1">
            <h1>{{name}}今年{{age}}歲了</h1>
         <ul>
             <li ng-repeat="(key,value) in arr">第{{key+1}}天，學習{{value}}</li>
         </ul>
         <table>
             <tr>
                 <th>姓名</th>
                 <th>年齡</th>
                 <th>性別</th>
                 <th>電話</th>
             </tr>
             <tr ng-repeat="key2 in arr2">
                 <td>{{key2.name}}</td>
                 <td>{{key2.age}}</td>
                 <td>{{key2.sex}}</td>
                 <td>{{key2.phone}}</td>
             </tr>
         </table>
        </div>
    </div>
    <script src="bower_components/angular/angular.min.js"></script>
    <script>
        var App = angular.module('App',[]);
        App.controller('con1',['$scope',function($scope){
            $scope.name = "jack";
            $scope.age = "30";

            $scope.arr = ["MVC","哈哈"]
            $scope.arr2=[
               {name:"wang",age:30,sex:"男",phone:"135123456789"},
               {name:"wang1",age:301,sex:"男",phone:"1351234567899"},
               {name:"wang2",age:302,sex:"男",phone:"135123456789"},
               {name:"wang3",age:303,sex:"男",phone:"135123456788"}
            ]
        }])
    </script>
</body>
</html>

AngularJS 事件

AngularJS 有本身的 HTML 事件指令：

AngularJS 支持如下事件:

    • ng-click
    • ng-dbl-click
    • ng-mousedown
    • ng-mouseenter
    • ng-mouseleave
    • ng-mousemove
    • ng-keydown
    • ng-keyup
    • ng-keypress
    • ng-change

案例：

<!DOCTYPE html>
<html ng-app="App">
<head>
    <meta charset="UTF-8">
    <title>事件</title>
    <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
</head>
<body>
      <div ng-controller="box">
         <!--單擊 -->
        <button ng-click="count=count+1">單擊</button>
          <p>{{count}}</p>
          <!-- 雙擊 -->
        <button ng-dblclick="count1=count1+1">雙擊</button>
          <p>{{count1}}</p>
        
        <!-- 移入/移出 -->
        <span ng-mouseenter="count2=count2+1" ng-mouseleave="count3 = count3 + 1"   ng-init="count=0" id="p1">鼠標移入/移開</span>
        <h1>{{count2}}</h1>
       <h1>{{count3}}</h1>


        <button ng-click="toggle()">顯示/隱藏</button><br>
          <p ng-hide="myVar">
        姓名：<input type="text" name="" ng-model="name"><br>
        年齡：<input type="text" name="" ng-model="age"><br>
        全：{{name+""+age}}
        </p>
      </div>

    <script src="bower_components/angular/angular.min.js"></script>
    <script>
        //單擊--雙擊
        var App = angular.module("App",[]);
        App.controller("box",['$scope',function($scope){
                // $scope.sount=0;
                // $scope.sount1=0;
                // $scope.mouseover=0;
               
        }]);
    </script>

   <!--  點擊隱藏和顯示 -->
    <script>
        var App = angular.module("App",[]);
        App.controller("box",['$scope',function($scope){
            $scope.name="john";
            $scope.age=18;
            $scope.myVar=false;
            $scope.toggle=function(){
                $scope.myVar=!$scope.myVar;
            }
        }])
    </script>
</body>
</html>

 

AngularJS 過濾器

過濾器可使用一個管道字符（|）添加到表達式和指令中。

1. currency (貨幣處理)默認是美圓符號，你能夠本身傳入所需的符號，例如人民幣：￥ 
 2. date (日期格式化)
3.filter (匹配子串)
{{ childrenArray | filter : 'a' }} //匹配屬性值中含有a的
{{ childrenArray | filter : 4 }} //匹配屬性值中含有4的
{{ childrenArray | filter : {name : 'i'} }} //參數是對象，匹配name屬性中含有i的
{{childrenArray | filter : func }} //參數是函數，指定返回age>4的 

 4. json(格式化json對象) 
5. limitTo(限制數組長度或字符串長度) 
 6. lowercase(小寫) 
 7.uppercase(大寫) 
 8. number(格式化數字) 
 9. orderBy(排序) 
{{ childrenArray | orderBy : 'age' }} 按age屬性值進行排序，如果-age，則倒序
{{ childrenArray | orderBy : orderFunc }} 按照函數的返回值進行排序
{{ childrenArray | orderBy : ['age','name'] }} 若是age相同，按照name進行排序 

案例：

<!DOCTYPE html>
<html ng-app="App">
<head>
    <meta charset="UTF-8">
    <title>過濾器</title>
</head>
<body>
    <div ng-controller="box">
       <p>{{num|currency:'￥'}}</p> <!-- (貨幣處理) -->
       <p>{{nowdate | date : 'yyyy/MM/dd hh:mm:ss EEEE'}}</p><!-- (日期格式化) -->
          {{arr | filter  : {age : '8'} }}  <br><!-- (匹配子串) -->
          {{arr | json}}<br>   <!-- json(格式化json對象) -->    
          <p>{{ sum | limitTo : 5 }}</p><!-- (限制數組長度或字符串長度) -->
             {{ sum1 | lowercase  }}<br><!-- lowercase(小寫) -->
             {{ sum1 | uppercase }}<br>
             {{ sum2 | number : 2 }}

    </div>
    <script src="bower_components/angular/angular.min.js"></script>
    <script>
        var App = angular.module("App",[]); 
        // 定義控制器
        App.controller("box",['$scope',function($scope){ 
        // 都是往$scope這個對象上面去添加屬性和方法
            $scope.num="99.9";
            $scope.nowdate= new Date();
            $scope.arr=[
                {name:"kimi",age:18},
                {namekey: "value",age:16},
                {name:"wan",age:18}
            ]
            $scope.sum="abcsssffffff";
            $scope.sum1="AAAAA";
            $scope.sum2="123456";
        }])
    </script>
    <!--過濾器詳情參考網址：https://blog.csdn.net/u011613356/article/details/49924053 -->
</body>
</html>

  視圖：

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程