當(dāng)前位置：首頁(yè) > 编程资源 > 编程问答 >内容正文

编程问答

Angularjs(一)

發(fā)布時(shí)間：2024/10/12 编程问答 65 豆豆

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

1.什么是angular?

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

　　angular的一些特性:模塊化、自動(dòng)化雙向數(shù)據(jù)綁定、語(yǔ)義化標(biāo)簽、依賴注入等等.

2.定義控制器:

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

　　}]}

<head><meta charset="UTF-8"><title>Document</title><style type="text/css" >[ng-cloak]{display:none;} //使用ng-clock時(shí)要在style中引入這個(gè)屬性樣式,否則有時(shí)會(huì)不起作用</style> </head> <body><ul ng-controller="controllerTest"><li>{{name}}</li>// 解決雙花括號(hào)閃爍的方法<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){ //依賴的服務(wù)，把依賴的服務(wù)注入到處理函數(shù)中去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這個(gè)對(duì)象上面去添加屬性和方法$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的數(shù)據(jù)

<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.數(shù)據(jù)綁定

<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.內(nèi)置過(guò)濾器

? ? 內(nèi)置過(guò)濾器 9個(gè):

1. currency (貨幣處理),如果不傳遞參數(shù)，默認(rèn)是美元符

2. date (日期格式化)

3. filter(匹配子串)

4. json(格式化json對(duì)象) 跟stringify相同沒(méi)有參數(shù)

5. limitTo(限制數(shù)組長(zhǎng)度或字符串長(zhǎng)度)

6. lowercase(小寫) 沒(méi)有參數(shù)

7. uppercase(大寫) 沒(méi)有參數(shù)

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

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){ //寫在這個(gè)數(shù)組里面的稱為服務(wù)，依賴了一系列的服務(wù)，當(dāng)你需要用到的時(shí)候就依賴，然后注入到處理函數(shù)中去 }])

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

App.controller("controllerTest01",function($scope,$http,$log){ //依賴的完整名稱，系統(tǒng)會(huì)根據(jù)實(shí)參數(shù)進(jìn)行查找 })

8.內(nèi)置服務(wù):

?　　--定時(shí)器:$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 = "現(xiàn)在是什么時(shí)間?"$interval (function(){$scope.now = new Date()},100)},1000)})</script>

　　--$location

<div ng-controller="controllerTest01"><ul><li>絕對(duì)路徑：{{absurl}}</li><li>服務(wù)：{{host}}</li><li>查詢字符串(參數(shù))：{{search}}</li><li>端口號(hào)：{{port}}</li><li>協(xié)議:{{protocol}}</li><li>哈希（錨點(diǎn)）：{{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(); //對(duì)http有要求$scope.protocol = $location.protocol();$scope.hash = $location.hash();}])</script>

　　--$log:(對(duì)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可以引入九種內(nèi)置的過(guò)濾器，這個(gè)是過(guò)濾器的第二種用法$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 本質(zhì)是對(duì)ajax的封裝，放到服務(wù)底下運(yùn)行// 1.5以上使用then方法，類似于promise中的then// 1.5以下就直接使用success方法和error方法 $http({method: 'GET',url: './02.json',params : { //get請(qǐng)求的參數(shù)uname : 'aaaa',age : 30}}).then(function(data){console.log(data); //封裝過(guò)的，該對(duì)象底下的data屬性放的是數(shù)據(jù) console.log(data.data);},function(err){console.log(err)});$http({ method : "POST",url : "/sendData",headers : { //post請(qǐng)求最好設(shè)置請(qǐng)求頭"content-type" : "application/x-www-form-urlencoded"},data : { //post請(qǐng)求的參數(shù)uname : "aaa",age : 30}}).then(function(data){console.log(data)console.log(data.data.data); //想要的后臺(tái)的數(shù)據(jù)},function(err){console.log(err);})}]) </script>

總結(jié)

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

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。

AngularJS