AngularJS

오픈소스 비즈니스 컨설팅
Pnuskgh (토론 | 기여)님의 2014년 3월 20일 (목) 14:45 판
(차이) ← 이전 판 | 최신판 (차이) | 다음 판 → (차이)
둘러보기로 가기 검색하러 가기

AngularJS를 정리 합니다.

  • 다운로드 :
  • 라이선스 :
  • 플랫폼 : JavaScript

AngularJS 개요

구성 요소

구성 요소 설명
$scope
  • 컨트롤러와 템플릿을 연결하고 모델을 보강하여 양방향 바인딩을 할 수 있게 하는 객체
module
controller
template
directive
  • HTML에 새로운 기능을 알려 주는 역할
  • restrict
  • A : Attribute
  • E : Element
  • C : Class
  • M : coMment
  • replace: true
  • template : HTML 요소
  • link : function(scope, element, attrs) { ~ }
app.directive('~", function() { return ~; });
filter 
{ { ~ | filter }}
app.filter('checkmark', function() {
    return function(input) {
        return input ? 'aa' : 'bb';
    };
});
service
  • 어플리케이션에 어떤 기능을 제공하는 싱글톤 클래스
app.factory('~', function() { return ~; });

주요 문법

  • ng-app="phonecatApp"
  • ng-controller="PhoneListCtrl"
  • ng-model="query"
  • ng-view
  • ng-repeat="phone in phones"
  • ng-repeat="phone in phones | filter:query"
  • ng-repeat="phone in phones | filter:query | orderBy:orderProp"
  • ng-src
  • ng-click="setImage(img)"
  • { { ~ | filter }}
  • Sample JavaScript
var phonecatApp = angular.module('phonecatApp', []);
phonecatApp.controller('PhoneListCtrl', function ($scope) { ~ }

phonecatApp.controller('PhoneListCtrl', function ($scope, $http) {
    $http.get('phones/phones.json').success(function(data) {
        $scope.phones = data;
     });
});
 
app.factory('Phone', ['$resource',
    function($resource){
        return $resource('phones/:phoneId.json', {}, {
            query: {method:'GET', params:{phoneId:'phones'}, isArray:true}
    });
 }]);

app.controller('PhoneDetailCtrl', ['$scope', '$routeParams', 'Phone', function($scope, $routeParams, Phone) {
}

$resource('data/project.json/:id', {id: '@id'});
Project.get({id: $routeParams.id}): new Project();

참고 문헌

원본 주소 "https://www.jopenbusiness.com/mediawiki/index.php?title=AngularJS&oldid=762665"