프레임워크
-
[AngularJS] 14. Bootstrap- Angular JS 강좌Web/AngularJS 2015. 6. 12. 14:24
AngularJS and Twitter Bootstrap Bootstrap은 유명한 스타일 시트입니다. 1. Bootstrap AngularJS 어플리케이션에 Bootstrap을 포함하기 위해서, 요소에 아래 라인을 추가해 줍니다: 12 cs 2. HTML Code 12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182 Users Edit First Name Last Name Edit {{ user.fName }} {{ user.lName }} Create New User Create..
-
[AngularJS] 13. 검사(Validations) - Angular JS 강좌Web/AngularJS 2015. 6. 12. 14:23
AngularJS Input Validation AngularJS 서식과 제어는 입력 데이터를 검사 할 수 있습니다. 1. Input validation 이전 장에서 폼과 제어에 대해 배웠습니다. AngularJS 폼과 제어는 유효성 서비스를 제공하고, 사용자의 무효한 입력을 알립니다. * tip: Client-Side 유효성 검사는 사용자 입력을 단일로 보안화 하지 않습니다. Server side 유효성 검사 또한 필요합니다. 2. Application Code 123456789101112131415161718192021222324252627282930313233343536373839404142434445 Validation Example Username: Username is required. Ema..
-
[AngularJS] 12. 서식(Forms) - Angular JS 강좌Web/AngularJS 2015. 6. 12. 14:23
AngularJS FormsAngularJS 서식은 입력 제어의 집합입니다. 1. HTML Controls HTML 입력 요소는 HTML 제어라고 부릅니다: - input 요소 - select 요소 - button 요소 - textarea 요소 2. HTML Forms HTML 서식은 HTML 제어가 함께있는 그룹입니다. 3. Application Code 12345678910111213141516171819202122232425262728293031323334 First Name: Last Name: RESET form = {{user }} master = {{master}} function formController ($scope) {$scope.master = {firstName:"John", la..
-
[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..