framework
-
[AngularJS] 11. 모듈(module) - Angular JS 강좌Web/AngularJS 2015. 6. 12. 14:22
AngularJS Modules 모듈은 어플리케이션을 정의합니다. 모든 어플리케이션 제어는 모듈 내에 속해야 합니다. 모듈은 어플리케이션을 좀 더 가독성을 높혀주고, 전역 네임스페이스를 깔끔하게 해줍니다. 1. AngularJS Module Example myApp.js는 어플리케이션 모듈 정의를 포함하고, myCtrl.js는 제어를 포함합니다: 123456789101112131415161718 {{ firstName + " " + lastName }} Colored by Color Scriptercs 2. Controllers Pollute the Global Namespace 모든 예제는 전역 값을 사용합니다. 전역 값(Global value)는 어플리케이션에서 피해야 합니다. 쉽게 덮어쓰여지거나, ..
-
[AngularJS] 10. HTML Event - Angular JS 강좌Web/AngularJS 2015. 6. 12. 14:21
AngularJS Events AngularJS는 자신만의 HTML 이벤트 지시어를 가지고 있습니다. 1. The ng-click Directive ng-click 지시어는 AngularJS 클릭 이벤트를 선언합니다. 1234567891011121314151617181920212223 Click Me! {{ count }} var app = angular.module('myApp', []); app.controller('myCtrl', function($scope) { $scope.count = 0; }); Colored by Color Scriptercs a9 2. Hiding HTML Elements ng-hide 지시어는 어플리케이션의 일부분의 가시성을 설정할 때 사용합니다. ng-hide="tru..
-
[AngularJS] 9. HTML DOM - Angular JS 강좌Web/AngularJS 2015. 6. 12. 14:20
AngularJS HTML DOM AngularJS는 어플리케이션 데이터를 HTML DOM 요소의 속성과 결합하기 위한 지시어를 가지고 있습니다. 1. The ng-disabled Directive ng-disabled 지시어는 AngularJS 어플리케이션 데이터를 HTML 요소의 속성을 못 쓰게하는 연결입니다. 1234567891011121314151617181920 Click Me! Button {{ mySwitch }} Colored by Color Scriptercs ng-disabled 지시어는 어플리케이션 데이터 mySwitch를 HTML 버튼의 disabled 속성과 연결합니다. ng-model 지시어는 HTML 체크박스 요소의 속성과 mySwitch 값을 연결합니다. mySwitch 값이..
-
[AngularJS] 8. SQL - Angular JS 강좌Web/AngularJS 2015. 6. 12. 14:20
AngularJS SQL 이전 장에서 작성된 코드는 데이터베이스로 부터 읽어들이는데 사용되기도 합니다. 1. Fetching Data From a PHP Server Running MySQL 1234567891011121314151617181920212223242526272829303132333435363738394041 table, th , td { border: 1px solid grey; border-collapse: collapse; padding: 5px;}table tr:nth-child(odd) { background-color: #f1f1f1;}table tr:nth-child(even) { background-color: #ffffff;} {{ x.Name }} {{ x.Country }..
-
[AngularJS] 7. Table - Angular JS 강좌Web/AngularJS 2015. 6. 12. 14:19
AngularJS Tables ng-repeat 지시어는 테이블형식으로 보여주기에 완벽합니다. 1. Displaying Data in a Table Augular를 이용한 테이블 표시는 매우 간단합니다: 12345678910111213141516171819202122232425262728 {{ x.Name }} {{ x.Country }} var app = angular.module('myApp', []); app.controller('customersCtrl', function($scope, $http) { $http.get("http://www.w3schools.com/angular/customers.php") .success(function (response) {$scope.names = respo..
-
[AngularJS] 6. Http - Angular JS 강좌Web/AngularJS 2015. 6. 12. 14:18
AngularJS AJAX - $http $http는 원격 서버에서부터 데이터를 읽기위한 AngularJS 서비스입니다. 1. Providing Data 아래 데이터는 웹 서버에서 제공되는 데이터입니다: http://www.w3schools.com/angular/customers.php 1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889{"records": [ { "Name" : "Alfreds Futterkiste", "City" : "Berlin", "..
-
[AngularJS] 5. 필터(filter) - Angular JS 강좌Web/AngularJS 2015. 6. 12. 14:17
AngularJS Filters 필터(Filter)는 파이프 기호(pipe character)를 사용하여 식이나 지시어에 추가 할 수 있습니다. 1. AngularJS Filters AngularJS 필터는 데이터를 변형할 때 사용됩니다: FilterDescriptioncurrencyFormat a number to a currency format.filterSelect a subset of items from an array.lowercaseFormat a string to lower case.orderByOrders an array by an expression.uppercaseFormat a string to upper case. [ 출처: W3Schools ] 2. Adding Filters to..
-
[AngularJS] 4. 제어(controller) - Angular JS 강좌Web/AngularJS 2015. 6. 12. 14:16
1. AngularJS Controllers AngularJS 어플리케이션은 제어(controller)에 의해 제어됩니다. ng-controller 지시어는 어플리케이션 제어를 선언합니다. 제어는 정규 자바스크립트 객체 생성자에 의해 만들어 지는 자바스크립트 객체입니다. 12345678910111213141516171819202122232425 First Name: Last Name: Full Name: {{firstName + " " + lastName}} var app = angular.module('myApp', []); app.controller('myCtrl', function($scope) { $scope.firstName = "John"; $scope.lastName = "Doe"; }); ..