nalaolla

AngularJS 부트스트랩(Bootstrap) 1. ng-app 지시자를 이용한 부트스트랩 AngularJS 웹 app이 되는 조건은 단순히 Script 태그로 angular.js 파일을 로드하는 것으로 충족되는 것이 아닙니다. 특정 태그에 ng-app 속성을 추가해서 AngularJS 부트스트랩을 적용해야 합니다. 아래 예제는 간단한 AngularJS 웹 app 예제입니다. * simpleajs.html 123456789101112 Simple Angular JS App Hello {{name}} world ! Colored by Color Scriptercs ng-app은 AngularJS 웹 app의 범위를 제한하는 지시자이자 제한자입니다. ng-app 지시자를 추가한 노드가 루트 노드가 되어 하..

AngularJS 살펴보기 1. To-Do 웹 어플리케이션 AngularJS를 간단히 살펴보기 위해서는 To-Do 어플리케이션을 구현해보는 것입니다. 이번 장에서 간단하게 할 일을 추가, 수정할 수 있는 웹을 AngularJS를 통해서 작성해 보겠습니다. todo 폴더를 생성하여, index.html을 아래와 같이 작성합니다. * index.html 12345678910 My To-Do App AngularJS To-Do App cs 여기까지 작성 후, 트위터 Bootstrap을 적용하겠습니다. http://getbootstrap.com/ 에 접속해서 내려받아서 라이브러리에 추가할 수 있지만, CDN을 통해서 적용할 수도 있습니다. 위에서 작성한 index.html의 head 태그안에 추가해줍니다. 그리..

프로젝트 및 개발환경 구성 1.개발환경 구성 당연히 AngularJS 예제를 작성하려면 필요한 도구들을 챙겨야 합니다. 여기서는 Node.js, grunt.js를 설치해보도록 하겠습니다. 1-1. Node.js 설치 AngularJS를 사용하는데 필수적인 요소는 아니지만, 간단한 웹 서버 구동용으로 쓰신다고 보시면 되겠습니다. 아래 주소로 접속하면 아래 화면처럼 구성되어 있습니다. 윈도우에서 접속해서 그런지, 아래와 같이 바로 잡아주네요. 이전에는 LTS와 Stable로 나뉘어져 있지 않았는데,,, 아무튼. Stable 버전으로 받겠습니다. http://www.nodejs.org/ 다운받으신 후, 설치 가볍게 해주시면 됩니다. 설치가 완료되었다면, 버전 확인을 통해, 마지막 확인을 합니다. $ node ..

AngularJS API 1. AngularJS Global API AngularJS Global API는 아래와 같은 일을 수행하기 위한 global 자바스크립트 함수의 집합입니다: - 객체 비교 - 객체 열거 - 데이터 변환 Global API 함수는 angular 객체를 사용하여 접근됩니다. APIDescriptionangular.lowercase()Converts a string to lowercaseangular.uppercase()Converts a string to uppercaseangular.isString()Returns true if the reference is a stringangular.isNumber()Returns true if the reference is a number ..

AngularJS Application AngularJS 단일 페이지 어플리케이션(Single Page Application{SPA})을 만들 시간입니다! 1. An AngularJS Application Example 2. Application ExplainedmyNote.html 1234567891011121314151617181920212223242526272829 My Note Save Clear Number of characters left: Colored by Color Scriptercs myNoteApp.js 123 var app = angular.module("myNoteApp", []); Colored by Color Scriptercs myNoteCtrl.js 1234567 app.c..

AngularJS Includes AngularJS에서, HTML 내에 HTML 파일을 포함 할 수 있습니다. 1. HTML Includes in Future HTML HTML안에 HTML의 부분을 포함하는 것은 HTML에서는 아직 제공하지 않습니다. HTML 불러오기는 미래의 버전의HTML을 위한 W3C 제안 http://www.w3.org 입니다: 1cs 2. Server Side Includes 대부분의 웹 브라우저는 Server Side Includes(SSI)를 제공합니다. SSI에서, 페이지가 브라우저에 보내지기 전에 HTML안에 HTML을 포함 할 수있습니다. 1cs 3. Client Side Includes 자바스크립트를 이용하여 HTML안에 HTML을 포함하는 방식은 많은 방법이 있습니다..

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 Input Validation AngularJS 서식과 제어는 입력 데이터를 검사 할 수 있습니다. 1. Input validation 이전 장에서 폼과 제어에 대해 배웠습니다. AngularJS 폼과 제어는 유효성 서비스를 제공하고, 사용자의 무효한 입력을 알립니다. * tip: Client-Side 유효성 검사는 사용자 입력을 단일로 보안화 하지 않습니다. Server side 유효성 검사 또한 필요합니다. 2. Application Code 123456789101112131415161718192021222324252627282930313233343536373839404142434445 Validation Example Username: Username is required. Ema..

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 Modules 모듈은 어플리케이션을 정의합니다. 모든 어플리케이션 제어는 모듈 내에 속해야 합니다. 모듈은 어플리케이션을 좀 더 가독성을 높혀주고, 전역 네임스페이스를 깔끔하게 해줍니다. 1. AngularJS Module Example myApp.js는 어플리케이션 모듈 정의를 포함하고, myCtrl.js는 제어를 포함합니다: 123456789101112131415161718 {{ firstName + " " + lastName }} Colored by Color Scriptercs 2. Controllers Pollute the Global Namespace 모든 예제는 전역 값을 사용합니다. 전역 값(Global value)는 어플리케이션에서 피해야 합니다. 쉽게 덮어쓰여지거나, ..