웹/AngularJS 검색 결과

해당 글 5건

AngularJS 모델

AngularJS 모델 AngularJS 모델은 ng-model 지시자로 사용합니다. 1. ng-model을 이용하게되면 입력 필드의 값을 변수에 바인딩할 수 있습니다. 예를 들어 Name: var app = angular.module('myApp', []); app.controller('myCtrl', function($scope) { $scope.name = "John Doe"; }); => name으로 바인딩을 하기 때문에 => myCtrl이라는 컨트롤러에서 해당 model인 name을 John Doe로 바인딩을 하므로=> input 필드에 John Doe가 들어가있게 됩니다. 바인딩은 양방향입니다. 즉 사용자가 입력한 대로 속성 값도 변하게 되는거죠. 즉 표현식을 이용하면 해당 표현이 될 떄 사용..
웹/AngularJS 2019. 2. 20. 21:50

AngularJS directives

AngularJS directives AngularJS directives는 HTML을 새로운 요소들로 확장시켜주는 것입니다. 앞서 봐왔던 ng-로 시작하는 것들 모두를 뜻합니다. ng-app은 AngularJS application을 초기화시킵니다. ng-init은 application data를 초기화시킵니다. ng-model은 input이나 textArea같은 값들을 application data로 바인딩 합니다. 앞서 보여드렸지만 간단한 예시로 Name: You wrote: {{ firstName }} => ng-init으로 firstName을 John으로 초기화 시키고 ng-model로 input의 값을 바인딩 시킵니다. => 표현식으로 값을 출력해줍니다. => 따라서 input에 넣는 값에따라..
웹/AngularJS 2019. 2. 19. 21:30

AngularJS 모듈

AngularJS 모듈 AngularJS 모듈은 응용프로그램을 정의를 합니다. 한마디로 모듈은 컨테이너라고할 수 있습니다. 여러가지를 담는 용도이죠. 예를 들어 컨트롤러, 필터 등등... 모듈을 만드는 방법에 대해서는 앞서 말했듯이 ... var app = angular.module("myApp", []); => angular.module로 만들어줍니다. => myApp은 ng-app 모듈을 작성하였으니 컨트롤러를 추가해 봅시다. 컨트롤러는 앞서 잠깐 보여드렸습니다. {{ firstName + " " + lastName }} var app = angular.module("myApp", []); app.controller("myCtrl", function($scope) { $scope.firstName =..
웹/AngularJS 2019. 2. 18. 20:24

AngularJS 표현식

AngularJS 표현식 ●AngularJS 표현식 관련 AngularJS의 표현식인 {{}}에 대해 알아보도록 하겠습니다. AngularJS의 표현식은 앞서 말했듯이 두 가지 방법이 있습니다. {{ expression }} or ng-bind="expression" 표현식 내부에서 해결하여 정확한 값을 표현해줍니다. 특히 CCS 속성 값들을 사용자의 입력에 따라 동적으로 바뀌게끔 할수가 있겠죠. => ng-init으로 myCol의 초기 값을 lightblue로 잡습니다. => style의 CSS 속성 값을 표현식으로 표현합니다. => 사용자의 입력에 따라 속성 값이 바뀌게 됩니다. ●AngularJS Numbers 이는 초기값에서 숫자로 초기화하면 사용되는데 자바스크립트의 숫자와 같습니다. 예를 들어 ..
웹/AngularJS 2019. 2. 16. 00:24

AngularJS 소개

AngularJS AngularJS는 자바스크립트 프레임워크입니다. 즉 자바스크립트로 작성된 라이브러리입니다. 지시어로 HTML 속성들을 확장하는 역할을 합니다. 표현식인 {{}}으로 데이터를 HTML로 바인딩을 합니다. 이를 이용하기 위해서는 태그로 명시해주면 됩니다. 웹페이지가 처음 로드가 될 때 자동으로 적용이 됩니다. 를 추가해줍시다. AngularJS의 HTML 확장 HTML의 확장 기능을 가진다고 했습니다. ng-app 은 응용프로그램을 정의해줍니다. ng-model 은 HTML 컨트롤 값을 응용프로그램 데이터로 결합합니다. ng-bind는 view의 역할을 합니다. 간단한 예를 봅시다. Name: =>ng-app은 가 AngularJs 응용프로그램의 오너라는 뜻입니다. 즉 쓰겠다?? 라는 표..
웹/AngularJS 2019. 2. 14. 23:57