AngularJS

오픈소스 비즈니스 컨설팅
둘러보기로 가기 검색하러 가기

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 ~; });

http://frontend.diffthink.kr/2016/07/angularjs-angularjs.html

주요 문법

  • 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=766433"