scope 객체
- scope 객체는 controller를 적용한 태그 내에서 사용할 변수나 함수를 저장해 놓을 수 있는 객체
- 특정 영역 안에서 사용할 멤버를 정의할 때 많이 사용
<script>
var app = angular.module("test_app",[])
app.controller("controller1",function($scope){
$scope.data1 = 100
$scope.data2 = 11.11
$scope.data3 = true
$scope.data4 = "문자열"
$scope.data5 = {
a1 : 100,
a2 : 200
}
$scope.data6 = [10, 20, 30]
$scope.data7 = function(a1, a2){
return a1+a2
}
});
</script>
<div ng-app="test_app" ng-controller="controller1">
<p>data1 : {{data1}}</p>
<p>data2 : {{data2}}</p>
<p>data3 : {{data3}}</p>
<p>data4 : {{data4}}</p>
<p>data5.a1 : {{data5.a1}}</p>
<p>data5.a2 : {{data5.a2}}</p>
<p ng-repeat="a0 in data5">data5 : {{a0}}</p>
<p ng-repeat="a1 in data6">data6 : {{a1}}</p>
<p>data7 : {{data7(100,200)}}</p>
</div>🎈결과
rootScope 객체
- rootScope 객체는 문서 전체에서 사용할 변수나 함수를 저장해 놓는 객체
<script>
var app = angular.module("test_app",[])
// test_app 실행하게 되면(div 객체 가지고와서 다양한 멤버 추가해놓고 객체가 사용할 준비가 되면) 호출하게 됨
// 어플리케이션 내부에서 공통적으로 사용할 멤버 정의할 때 사용
app.run(function($rootScope){
// 별도의 controller를 설정하지 않아도 멤버 사용 가능
$rootScope.data1 = 100
$rootScope.data2 = 200
})
app.controller("controller1",function($scope){
$scope.data1 = 1000
});
app.controller("controller2",function($scope){
$scope.data2 = 2000
});
</script>
<div ng-app="test_app" ng-controller="controller1">
<p>data1 : {{data1}}</p>
<p>data2 : {{data2}}</p>
<div ng-controller="controller2">
<p>data1 : {{data1}}</p>
<p>data2 : {{data2}}</p>
</div>
</div>🎈결과
filter
- 출력하는 데이터에 대해 필터를 적용해 데이터 가공
- uppercase : 모든 글자 대문자로 변환
- lowercase : 모든 글자 소문자로 변환
- orderBy : 정렬 기준 설정
- currency : 숫자를 통화를 적용
- date : 날짜 데이터 출력 포멧 설정
- filter : 지정된 문자열을 가지고 있는 태그만 표시
- json : javascript객체를 json 문법으로 출력
- limitTo : 지정된 숫자만큼 표시
- number : 지정된 숫자에 3 자리마다 콤마 찍어줌
<script>
var app = angular.module("test_app",[])
app.run(function($rootScope){
$rootScope.data1 = "abCDef"
})
</script>
<div ng-app="test_app">
<p>upper case : {{data1 | uppercase}}</p>
<p>lower case : {{data1 | lowercase}}</p>
</div>🎈결과
<script>
var app = angular.module("test_app",[])
app.run(function($rootScope){
$rootScope.data2 = [
{a1 : "홍길동", a2 : 30},
{a1 : "김길동", a2 : 40},
{a1 : "박길동", a2 : 20}
]
})
</script>
<div ng-app="test_app">
<p ng-repeat="obj in data2">a1 : {{obj.a1}}, a2 : {{obj.a2}}</p>
<hr />
<p ng-repeat="obj in data2 | orderBy : 'a1'">a1 : {{obj.a1}}, a2 : {{obj.a2}}</p> <!-- a1 기준으로 정렬 -->
<hr />
<p ng-repeat="obj in data2 | orderBy : 'a2'">a1 : {{obj.a1}}, a2 : {{obj.a2}}</p> <!-- a2 기준으로 정렬 -->
<hr />
</div>🎈결과
<!-- 추가하면 자동으로 원화, 한글날짜 표기로 변환-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-i18n/1.8.3/angular-locale_ko-kr.min.js"></script>
<script>
var app = angular.module("test_app",[])
app.run(function($rootScope){
$rootScope.data3 = 12345678.123456
})
</script>
<div ng-app="test_app">
<p>currency : {{data3 | currency}}</p>
<!-- 달러로 표시됨; https://cdnjs.com/libraries/angular-i18n 에서 ko-kr cdn 가져옴, 소수점 이하는 날라감; js파일 다운https://github.com/angular/angular.js/tree/master/src/ngLocale-->
<!-- 소수점 이하 2개 까지 반올림-->
<p>{{data3 | number : 2}}</p>
<p>{{data3 | number}}</p>
</div>🎈결과
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-i18n/1.8.3/angular-locale_ko-kr.min.js"></script>
<script>
var app = angular.module("test_app",[])
app.run(function($rootScope){
$rootScope.data4 = new Date()
})
</script>
<div ng-app="test_app">
<!-- https://docs.angularjs.org/api/ng/filter/date 와일드카드 이용 -->
<p>date : {{data4 | date : 'yyyy년 MM월 dd일 HH시 mm분 ss초 EEEE'}}</p>
</div>🎈결과
<!-- 추가하면 자동으로 원화로 변환-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-i18n/1.8.3/angular-locale_ko-kr.min.js"></script>
<script>
var app = angular.module("test_app",[])
app.run(function($rootScope){
$rootScope.data5 = ['aaaa', 'aabb', 'aacc', 'bbcc', 'bbdd', 'cccc']
})
</script>
<div ng-app="test_app">
<!-- 'aa'를 포함하고있는 것만 출력 -->
<p ng-repeat="str in data5 | filter : 'aa'"> {{str}} </p>
<hr />
<!-- 리스트를 전부 출력하고 keyword에 따라 필터링 -->
<input type="text" ng-model="keyword"/><br />
<p ng-repeat="str in data5 | filter : keyword">{{str}}</p>
<hr />
<!-- 전체 배열에서 앞에서 3 개만 가져옴 -->
<p>limitTo : 3</p>
<p ng-repeat="str in data5 | limitTo : 3">{{str}}</p>
<hr />
<!-- 인덱스 1 부터 3개를 가져옴 -->
<p>limitTo : 3 : 1</p>
<p ng-repeat="str in data5 | limitTo : 3 : 1">{{str}}</p>
<hr />
<p>data1({{data1}}) limitTo : 2 : 1 <br>
{{data1 | limitTo : 2 : 1}}</p>
</div>🎈결과
Service
- AngularJS controller 세팅 후 객체들을 매개변수로 받아서 사용. $scope 객체를 포함함
- location : 주소 창의 주소 관리
- get : ajax 통신을 통해 다른 파일의 응답 결과를 가져옴
- timeout : 지정된 시간 후에 지정된 함수 호출 후 종료
- interval : 지정된 시간만큼 지정된 함수가 계속 호출됨
- 기타 등등
<script>
var app = angular.module("test_app",[])
/* service 만들기 */
app.service("myService", function(){
this.add = function(a1, a2){
return a1+a2
}
this.subtract = function(a1, a2){
return a1-a2
}
});
/* 기본적인 service */
/* timeout : 지정된 시간 후에 지정된 함수 호출 후 종료 */ /* interval : 지정된 시간만큼 지정된 함수가 계속 호출됨 */ /* 매개변수 myService라는 객체가 만들어짐 */
app.controller("controller1",function($scope, $location, $http, $timeout, $interval, myService){
$scope.data1 = 100
$scope.data2 = $location.absUrl()
$scope.data3 = location.href
$scope.moveTo = function(){
//location.href = $scope.a1 // 입력값 주소로 이동 가능
$location.absUrl($scope.a1) // 특정 주소창을 가져올 순 있지만 이동은 안됨
}
$scope.getAjax = function(){
var http = $http.get("data.html") // data.html을 요청
/* 정상적으로 통신 완료되면 함수 호출*/
http.then(function(response){
$scope.result1 = response.data
});
}
/* 1초 지난 후 함수 호출*/
$timeout(function(){
$scope.result2 = "timeout!"
}, 1000)
$interval(function(){
$scope.result3 = new Date()
}, 1000)
$scope.result4 = myService.add(100, 200)
$scope.result5 = myService.subtract(100, 200)
});
</script>
<div ng-app="test_app" ng-controller="controller1">
<p>scope.data1 : {{data1}}</p>
<p>location : {{data2}}</p>
<p>location.href : {{data3}}</p>
<input type="text" ng-model="a1" />
<button type="button" ng-click="moveTo()">이동</button>
<hr />
<!-- ajax 응답결과 -->
<div>{{result1}}</div>
<button type="button" ng-click="getAjax()">Ajax 통신</button>
<hr />
<div>{{result2}}</div>
<hr />
<div>{{result3}}</div>
<hr />
<div>{{result4}}</div>
<div>{{result5}}</div>
</div>
🎈결과
다나로그