Angularjs(一)

時間 2019-11-08

原文原文鏈接

1.什麼是angular?

　　Angular誕生於2009年，由Misko Hevery 等人建立，後爲Google所收購。是一款優秀的前端JS框架，已經被用於Google的多款產品當中。AngularJS有着諸多特性，最爲核心的是：MVC（Model–view–controller ;模塊化-視圖-控制器）.css

　　angular的一些特性:模塊化、自動化雙向數據綁定、語義化標籤、依賴注入等等.html

2.定義控制器:

　　controller("控制器名字",["依賴",function(形參){ 前端

　　}]}ajax

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css" >
        [ng-cloak]{display:none;}    //使用ng-clock時要在style中引入這個屬性樣式,不然有時會不起做用
    </style>
</head>
<body>

<ul ng-controller="controllerTest">
        <li>{{name}}</li>
                // 解決雙花括號閃爍的方法
        <li ng-bind="name"></li>
        <li ng-cloak>{{name}}</li> 
    
        <li ng-bind-template="{{name}}"></li>
        
    </ul>
    <script src="public/libs/angular/angular.min.js"></script>　　//引入angular,js 
    <script>
        var App = angular.module("App",[]); 
        // 定義控制器
        App.controller("controllerTest",['$scope',function(akshfksdjhf){  //依賴的服務，把依賴的服務注入處處理函數中去
            akshfksdjhf.name = "jack"
        }])
    </script>

3.事件

<div ng-controller="controllerTest">
        <button ng-click="fclick()" ng-dbl-click="fdbclick()">單擊</button>
        <button ng-dblclick="fdbclick()">雙擊</button>
        聚焦:<input type="text" name="" ng-focus = "ffocus()">
        失焦:<input type="text" name="" ng-blur = "fblur()">
        <button ng-mouseover = "fmouseover()">移入</button>
        <button ng-mouseleave = "fmouseleave()">移出</button>
    </div>

    <script src="public/libs/angular/angular.min.js"></script>
    <script>
        var App = angular.module("App",[]); 
        // 定義控制器
    App.controller("controllerTest",['$scope',function($scope){ 
            // 都是往$scope這個對象上面去添加屬性和方法
            $scope.fclick = function (){
                alert("單擊")
            }
            $scope.fdbclick = function (){
                alert("雙擊")
            }
            $scope.ffocus = function (){
                alert("聚焦")
            }
            $scope.fblur = function (){
                alert("失焦")
            }
            $scope.fmouseover = function (){
                alert("移入")
            }
            $scope.fmouseleave = function (){
                alert("移出")
            }
        }])
    </script>

4.ng-init指令

　　ng-init指令能夠初始化模塊model的數據json

<div ng-controller="controllerTest" ng-init="name='jack';age=40">
        <h1>{{name}}</h1>　　　　　　　　　　//jack
        <h1>{{age}}</h1>　　　　　　　　　　//40
    </div>
    <script src="public/libs/angular/angular.min.js"></script>
    <script>
        var App = angular.module("App",[]); 
        // 定義控制器
        App.controller("controllerTest",['$scope',function($scope){ 
            $scope.name = "mack";
        }])
    </script>

5.數據綁定

<div ng-controller="controllerTest">
        <ul>
            <li ng-repeat="value in arr1">{{value.name}}{{value.age}}</li>  <!--遍歷數組 -- >
        </ul>
        <ul>
            <li ng-repeat="val in arr2" ng-switch on="val">
                <span ng-switch-when="css">{{val}}</span>   <!--當val=css時顯示-->
            </li>
        </ul>
    </div>

    <script src="public/libs/angular/angular.min.js"></script>
    <script>
        var App = angular.module("App",[]); 
        // 定義控制器

        App.controller("controllerTest",['$scope',function($scope){ 
            $scope.arr1 = [
                {name : "jack",age : "20"},
                {name : "jack1",age : "21"},
                {name : "jack2",age : "22"}
            ];
            $scope.arr2 = ["html","css","js"]
        }])
    </script>

6.內置過濾器

內置過濾器 9個:數組

1. currency (貨幣處理),若是不傳遞參數，默認是美圓符promise

2. date (日期格式化)app

3. filter(匹配子串)框架

4. json(格式化json對象) 跟stringify相同沒有參數模塊化

5. limitTo(限制數組長度或字符串長度)

6. lowercase(小寫) 沒有參數

7. uppercase(大寫) 沒有參數

8. number(格式化數字) [參數]

9. orderBy(排序) [name,boolean]

 1 <div ng-controller="controllerTest">
 2         <ul>
 3             <li>{{num1|currency:"￥"}}</li>
 4             <li>{{ndate|date:"yyyy/MM/dd hh:mm:ss EEE"}}</li>
 5             <li>{{arr|filter:"1" }}</li>
 6             <li>{{arrobj|filter:{age:12} }}</li>
 7             <li>{{arrobj|json}}</li>
 8             <li>{{str|limitTo:2}}</li>
 9             <li>{{num1|number:4}}</li>
10             <li>{{str|uppercase|lowercase}}</li>
11             <li>{{arrobj|orderBy:age:false }}</li>
12             <li>{{num1 |zdy}}</li>
13         </ul>
14     </div>
15 
16 
17 
18     <script src="public/libs/angular/angular.min.js"></script>
19     <script>
20         var App = angular.module("App",[]); 
21         // 定義控制器
22 
23         App.controller("controllerTest",['$scope',function($scope){
24             $scope.num1 = 456; 
25             $scope.ndate = new Date();
26             $scope.arr = ["111","128","895","54"]
27             $scope.arrobj = [
28                 {name:"jack",age:12,phone:"456789112"},
29                 {name:"jack5",age:142,phone:"456789112"},
30                 {name:"3",age:188,phone:"456789112"},
31             ]
32             $scope.str = "hello"
33             $scope.str2 = "wwww"
34         }])
35         App.filter("zdy",function(){
36                 return function(num1){
37                     console.log(num1)
38                     return "hello" + num1;
39                 }
40             })
41     </script>

7.依賴注入

　　聲明式依賴注入:

App.controller("controllerTest01",['$scope',function($scope){   
    //寫在這個數組裏面的稱爲服務，依賴了一系列的服務，當你須要用到的時候就依賴，而後注入處處理函數中去
}])

　　推斷式依賴注入:(不推薦,影響效率)

App.controller("controllerTest01",function($scope,$http,$log){ 
      //依賴的完整名稱，系統會根據實參數進行查找
})

8.內置服務:

　　--定時器:$timeout,$interval

<div ng-controller="controllerTest">
        <ul>
            <li>{{taday}}</li>
            <li>{{now|date:"yyyy/MM/dd hh:mm:ss EEE"}}</li>
        </ul>
    </div>

    <script src="public/libs/angular/angular.min.js"></script>
    <script>
        var App = angular.module("App",[]); 
        // 定義控制器
        App.controller("controllerTest",function($scope,$timeout,$interval){
            $scope.taday = "你好"
            $timeout (function(){
                $scope.taday = "如今是什麼時間?"
                $interval (function(){
                    $scope.now = new Date()
                },100)
            },1000)
        })
    </script>

　　--$location

<div ng-controller="controllerTest01">
        <ul>
            <li>絕對路徑：{{absurl}}</li>
            <li>服務：{{host}}</li>
            <li>查詢字符串(參數)：{{search}}</li>
            <li>端口號：{{port}}</li>
            <li>協議:{{protocol}}</li>
            <li>哈希（錨點）：{{hash}}</li>
        </ul>
    </div>

    <script src="public/libs/angular/angular.min.js"></script>
    <script>
        var App = angular.module("App",[]); 
        App.controller("controllerTest01",['$scope','$location',function($scope,$location){  
            console.log($location)
            $scope.absurl = $location.absUrl();
            $scope.host = $location.host();
            $scope.port = $location.port();
            $scope.search = $location.search();   //對http有要求
            $scope.protocol = $location.protocol();
            $scope.hash = $location.hash();
        }])

    </script>

　　--$log:(對console的封裝)

<script src="public/libs/angular/angular.min.js"></script>
    <script>
        var App = angular.module("App",[]); 

        App.controller("controllerTest01",['$scope','$location','$timeout','$interval',"$log",function($scope,$location,$timeout,$interval,$log){
            $log.log("普通輸出");
            $log.warn("警告");
            $log.error('錯誤')
            $log.info("普通")
        }])

</script>

　　--$filter:

<div ng-controller="controller01">
        <ul>
            <li>{{price}}</li>
            <li>{{str}}</li>
            <li>{{str1}}</li>
        </ul>
    </div>

    <script src="public/libs/angular/angular.min.js"></script>
    <script>
        var App = angular.module("App",[]);

        App.controller("controller01",['$scope','$filter',function($scope,$filter){
            // $filter能夠引入九種內置的過濾器，這個是過濾器的第二種用法
            $scope.price = 99.99;
            var currency = $filter('currency');
            $scope.price = currency($scope.price);

            $scope.str = "hello angular";
            var uppercase = $filter('uppercase');
            $scope.str = uppercase($scope.str);

            $scope.str1 = $filter('limitTo')($scope.str,5)
        }])

    </script>

　　-$http:

<div ng-controller="controller01">
        <ul>

        </ul>
    </div>



    <script src="public/libs/angular/angular.min.js"></script>
    <script>
        var App = angular.module("App",[]);

        App.controller("controller01",['$scope','$filter','$http',function($scope,$filter,$http){
            // $http 本質是對ajax的封裝，放到服務底下運行
            // 1.5以上使用then方法，相似於promise中的then
            // 1.5如下就直接使用success方法和error方法
            $http({
                method: 'GET',
                url: './02.json',
                params : {    //get請求的參數
                    uname : 'aaaa',
                    age : 30
                }
            }).then(function(data){
                console.log(data);     //封裝過的，該對象底下的data屬性放的是數據
                console.log(data.data);
            },function(err){
                console.log(err)
            });

            $http({    
                method : "POST",
                url : "/sendData",
                headers : {   //post請求最好設置請求頭
                    "content-type" : "application/x-www-form-urlencoded"
                },
                data : {    //post請求的參數
                    uname : "aaa",
                    age : 30
                }
            }).then(function(data){
                console.log(data)
                console.log(data.data.data);   //想要的後臺的數據
            },function(err){
                console.log(err);
            })

        }])
</script>

相關標籤/搜索

每日一句

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