1. 정의
AngularJS 는 구글에서 개발한 자바스크립트 프레임워크다.
AngularJS는 ng-directives를 사용하여 HTML을 확장한다.
왜 사용하는가? 에 대한 좋은 글 >> http://www.codekin.com/?p=1530
2. 사용방법
(1) angularjs를 다운받거나, cdn주소를 import 해준다.
CDN 주소는 아래와 같다.
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
(2) ng-app 지시자를 통해 AngularJS를 사용하겠다고 정의해준다.
--> angular 어플리케이션의 root를 생성하는 것.
--> ng-app 지시어는 Anagular를 로드하고 초기화시킨다.
-->html 태그에 ng-app 속성을 부여하면, 하위 모든 요소는 모두
Anagular 어플리케이션으로 다뤄진다.
(3) ng-model 지시자는 data에 html 컨트롤의 값을 바인딩 해준다.
(4) ng-bind 지시자는 바인딩 된 value값을 보여준다.
사용방법만 정리해서는 잘 모를 것이다 ( 암.. 나도 그랬다.)
사용예제를 보면서 이해하는것이 가장 빠른 습득방법이다 ㅎㅎ
3. 사용예제
http://www.w3schools.com/angular/ 에 워낙 예제들이 정리가 잘 되어 있지만,
예제를 쭉 봐본 결과.. 반복적인게 좀 많아서 대표적인 사례 몇 개만 소개해도 충분할 것 같아 정리하였당.
3.1 예제(1) _ data 바인딩
<div data-ng-app="" data-ng-init="firstName='John'"> <p>The name is <span data-ng-bind="firstName"></span></p> </div>
3.2 예제(2) _controller 및 $scope
ng-app으로 어플리케이션명을 정해준다.
특정 controller 안에 모든 기능을 담는 첫번째 파라미터 $scope,
두번쨰 파라미터에는 [] 배열 형태로 해당 모듈에서 사용할 다른 모듈들을 적어준다.
controller는 $scope상의 모델을 조작하거나 UI와 밀접한 여러 기능들을 수행하게 된다.
아래 소스는 myApp이라는 모듈에 UserCtrl이라는 컨트롤러를 추가한다는 의미이다
<script LANGUAGE="JavaScript"> var myApp = angular.module('myApp', []); myApp.controller('UserCtrl', ['$scope', function ($scope) { $scope.user = {}; $scope.user.details = { "username": "Todd Motto", "id": "89101112" }; }]); </script> </head> <body> <div ng-app="myApp"> <div ng-controller="UserCtrl"> <p class="username">Welcome, {{ user.details.username }}</p> <p class="id">User ID: {{ user.details.id }}</p> </div> </div> </body>
ng-click > 클릭하면 changeName()을 호출한다.
<div ng-app="myApp" ng-controller="myCtrl"> <h1 ng-click="changeName()">{{firstname}}</h1> </div> <script> var app = angular.module('myApp', []); app.controller('myCtrl', function($scope) { $scope.firstname = "John"; $scope.changeName = function() { $scope.firstname = "Nelly"; } }); </script>
다른 js 파일을 새로 생성 한 후에 controller들을 작성해 놓고,
ng-controller에 매핑 된 값과 일치한 controller를 불러 사용할 수 있다.
<div ng-app="myApp" ng-controller="namesCtrl">
<ul>
<li ng-repeat="x in names">
{{ x.name + ', ' + x.country }}
</li>
</ul>
</div>
<script src="namesController.js"></script>
//다른 Js 파일 내용
angular.module('myApp', []).controller('namesCtrl', function($scope) {
$scope.names = [
{name:'Jani',country:'Norway'},
{name:'Hege',country:'Sweden'},
{name:'Kai',country:'Denmark'}
];
});
3.3 예제(3) _ directive 지시자 (카멜케이스, ‘-‘ 사용)
directive 지시자를 사용할 때는 카멜케이스의 namespace명을 사용해야 한다.
하지만 이 지시자가 실행될 때는 – 로 실행된다.
<body ng-app="myApp"> <w3-test-directive></w3-test-directive> <script> var app = angular.module("myApp", []); app.directive("w3TestDirective", function() { return { template : "<h1>Made by a directive!</h1>" }; }); </script> </body>
Element name :: <w3-test-directive></w3-test-directive> Attribute :: <div w3-test-directive></div> Class :: <div class="w3-test-directive"></div>
3.4 예제(4) _ JSON 배열 출력
<div ng-app="" ng-init="names=[
{name:'Jani',country:'Norway'},
{name:'Hege',country:'Sweden'},
{name:'Kai',country:'Denmark'}]">
<ul>
<li ng-repeat="x in names">
{{ x.name + ', ' + x.country }}
</li>
</ul>
</div>
3.5 예제(5) _ validation 체크
ng-model 지시자는 데이터(숫자, 이메일)의 validation 체크 기능을 제공한다.
ng-show의 표현식이 true라면 (즉 email 형식이 아니여서 error가 난다면) Not a valid e-mail address 가 표시된다.
<form ng-app="" name="myForm">
Email:
<input type="email" name="myAddress" ng-model="text">
<span ng-show="myForm.myAddress.$error.email">Not a valid e-mail address</span>
</form>
3.6 예제(6) _ CSS Classes
지시자에 다음과 같은 class들로 자유롭게 작성 가능하니 test 해볼것~
>> ng-empty, ng-not-empty, ng-touched , ng-untouched, ng-valid , ng-invalid ,
ng-dirty,ng-pending, ng-pristine
<style> input.ng-invalid { background-color: lightblue; } </style> <body> <form ng-app="" name="myForm"> Enter your name: <input name="myName" ng-model="myText" required> </form> </body>
3.7 예제(7) _ Root Scope
모든 어플리케이션은 ng-app 지시문을 포함하는 HTML 요소 안에서 $rootScope를 가지고 있다.
<body ng-app="myApp"> <p>The rootScope's favorite color:</p> <h1>{{color}}</h1> <div ng-controller="myCtrl"> <p>The scope of the controller's favorite color:</p> <h1>{{color}}</h1> </div> <p>The rootScope's favorite color is still:</p> <h1>{{color}}</h1> <script> var app = angular.module('myApp', []); app.run(function($rootScope) { $rootScope.color = 'blue'; }); app.controller('myCtrl', function($scope) { $scope.color = "red"; }); </script> </body>
<<결과>>
blue red blue
3.8 예제(8) _ Filters 추가
1. uppercase, lowercase 대소문자 변환
| 필터 파이프 문자를 사용하여 식에 더해 줄 수 있다.
<div ng-app="myApp" ng-controller="personCtrl"> <p>The name is {{ lastName | uppercase }}</p> </div>
2. orderBy 데이터 정렬
>div ng-app="myApp" ng-controller="namesCtrl">
>p>Looping with objects:>/p>
>ul>
>li ng-repeat="x in names | orderBy:'country'">
{{ x.name + ', ' + x.country }}
>/li>
>/ul>
>/div>
>script>
angular.module('myApp', []).controller('namesCtrl', function($scope) {
$scope.names = [
{name:'Jani',country:'Norway'},
{name:'Carl',country:'Sweden'},
{name:'Margareth',country:'England'},
{name:'Hege',country:'Norway'},
{name:'Joe',country:'Denmark'},
{name:'Gustav',country:'Sweden'},
{name:'Birgit',country:'Denmark'},
{name:'Mary',country:'England'},
{name:'Kai',country:'Norway'}
];
});
>/script>
<<결과>>
Looping with objects:
- Joe, Denmark
- Birgit, Denmark
- Margareth, England
- Mary, England
- Jani, Norway
- Hege, Norway
- Kai, Norway
- Carl, Sweden
- Gustav, Sweden
3. filter 특정 문자가 들어간 데이터 추출
‘i’ 가 속한 데이터만 추출해준다.
<div ng-app="myApp" ng-controller="namesCtrl">
<ul>
<li ng-repeat="x in names | filter : 'i'">
{{ x }}
</li>
</ul>
</div>
<script>
angular.module('myApp', []).controller('namesCtrl', function($scope) {
$scope.names = [
'Jani','Carl','Margareth','Hege','Joe','Gustav','Birgit','Mary','Kai'
];
});
</script>
4. test
인풋박스(입력필드)에 ng-model 지시자를 설정함으로써 입력필드의 값이 필터 되어 매칭되는 값만 추출된다.
<div ng-app="myApp" ng-controller="namesCtrl"> <p>Type a letter in the input field:</p> <p><input type="text" ng-model="test"></p> <ul> <li ng-repeat="x in names | filter:test"> {{ x }} </li> </ul> </div> <script> angular.module('myApp', []).controller('namesCtrl', function($scope) { $scope.names = ['Jani','Carl','Margareth','Hege','Joe','Gustav','Birgit','Mary','Kai']; }); </script>
'Web > AngularJs' 카테고리의 다른 글
| [AngularJS 시작-3] JAVASCRIPT FRAMEWORK / Filters (0) | 2016.10.07 |
|---|---|
| [AngularJS 시작-2] JAVASCRIPT FRAMEWORK / 비동기통신 $HTTP (0) | 2016.10.07 |