본문 바로가기
Web/AngularJs

[AngularJS 시작-1] Javascript Framework/angularJs 예제

by 나비와꽃기린 2016. 9. 30.
336x280(권장), 300x250(권장), 250x250, 200x200 크기의 광고 코드만 넣을 수 있습니다.

1. 정의

AngularJS 는 구글에서 개발한 자바스크립트 프레임워크다.

AngularJSng-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 지시자는 datahtml 컨트롤의 값을 바인딩 해준다.

(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>