當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

Angularjs(一)

發布時間：2024/10/12 编程问答 47 豆豆

生活随笔收集整理的這篇文章主要介紹了 Angularjs(一) 小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

1.什么是angular?

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

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

2.定義控制器:

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

　　}]}

<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的數據

<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> </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 (貨幣處理),如果不傳遞參數，默認是美元符

2. date (日期格式化)

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的封裝)

?　　--$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>

總結

以上是生活随笔為你收集整理的Angularjs(一)的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

AngularJS