Angular.js 전체 : 8시간 15분|강의당평균 : 30분56초

[완강]

Angular.js

전체 : 8시간 15분|강의당평균 : 30분56초

01 Chapter 1

26분

책갈피 : [00:40] 문서 UTF-8로 저장/[00:43] meta 태그 정의/[00:45] HTML5 문서에서 실행/[01:13] 구문출력(링크,다운로드)/[01:45] div ng-app=""/[02:10] 변수/[03:05] ng-init/[03:12] value 값/[03:26] ng-bind/[05:12] 응용프로그램 초기화/[05:40] ng-model/[06:02] controller 함수/[07:08] input/[07:58] 변수정의/[08:07] angular.module/[08:30] controller/[10:43] ng-app/[11:19] ng-init/[11:27] initialize/[11:55] ng-model/[12:47] ng-init/[13:20] background-color/[15:35] 스타일시트 내용 추가/[16:13] input 추가/[17:32] 주석처리/[17:53] ng-app/[18:03] ng-init/[19:24] 변수값 정의,입력,연산/[20:51] 페이지 소스 보기/[21:22] ng-app/[21:37] class="ng-binding"/[22:19] ng-scope/[22:37] ng-binding/[23:35] ng-bind/[25:17] 문자열 구분/[26:08] class="ng-binding"

02 Chapter 2

28분

책갈피 : [00:16] 변수, 값, Value값 생성/[00:48] 앱 띄우기/[00:54] 개별 변수(세미콜론)/[01:39] 변수정의 (alziob)/[01:48] 자식 변수(대괄호)/[02:18] 존속 변수(쉼표,)/[04:39] ng/[05:00] data-ng(HTML5)/[05:33] 이중괄호/[06:07] 배열/[07:12] 변수명(배열)/[09:22] HTML 문서에 적용/[10:17] input type/[10:29] ng-app, ng-init/[10:39] 변수정의/[11:17] data-ng-model/[12:01] list, mon 연산/[12:14] list * mon/[13:21] 반복적 내용/[13:38] 내장 변수/[13:47] menu명 리스트 생성/[14:18] li 태그/[14:48] 주석처리/[15:05] g in menu/[15:27] ng-repeat/[15:41] attribute/[16:01] 소스로 정의/[16:46] 중복 출력안함/[18:23] li 태그/[18:29] 변수명(배열)/[20:18] 변수명 정의/[20:38] 변수:value값/[21:48] ha in alzioabn/[23:21] directive/[23:35] body ng-app="applo"/[24:00] init, app, model/[24:27] 템플릿 출력 기능/[24:46] angular.module/[25:00] app2의 directive 정의/[25:21] return/[25:40] template/[26:05] alziodirective/[26:39] view 확장 태그/[27:10] b 태그/[27:52] 대문자 앞에 - 표시

03 Chapter 3

31분 

책갈피 : [00:12] div/[00:42] restrict : "C"/[01:05] class값을 b태그로 출력/[01:26] directive : alzio-Daa/[01:36] 주석처리/[01:54] restrict : "M"/[02:01] replace : true/[02:07] directive : → directive:/[03:05] restrict : "A"/[03:26] div 적용/[05:00] restrict : "EA"/[05:49] input 입력/[06:48] input ng-model/[06:55] binding-ng-model/[07:51] angular.module/[08:10] var apoo/[08:14] apoo.controller/[08:34] ace/[09:48] b태그로 정의/[11:23] ng-show/[12:02] ng-repeat/[13:28] Email-!!/[13:58] ng-hide (class 자동반영)/[14:33] display (none, imortant)/[15:25] alform.ADD/[17:40] ng-show/[18:11] ng-model/[19:02] atext/[20:02] alform.ADD.$valid/[21:43] touched/[22:22] 검사/[23:21] 스타일 시트/[23:34] ng-not-empty/[24:21] ng-bind/[25:29] script 구현/[26:06] scope/[27:00] 핵심 가치/[28:09] ng-bind/[29:30] input ng-model

04 Chapter 4

input ng-model, ng-click, changeName, uppercase, lowercase, orderBy, currency, Filter Array, 배열생성

28분

책갈피 : [00:23] input ng-model/[00:30] 주석 처리/[02:03] ng-click/[02:14] changeName/[02:59] scope/[03:06] changeName 메소드 실행/[03:28] scope.변수 = 바꿀 내용/[04:40] ng-controller/[04:51] 결과표 보기/[06:01] scope.nameALL/[06:19] return/[06:56] nameALL/[07:44] ng-controller="ace"/[08:12] 변수범위/[08:42] uppercase/[09:08] lowercase/[09:36] 필터기능/[10:20] app ID(변수명) 정의/[10:48] orderBy/[11:14] country로 출력/[11:32] angular.module/[12:08] scope.alzioabn/[13:13] 화폐단위/[13:29] ng-controller/[14:11] 변수정의/[14:31] controller 정의/[14:47] scope.one/[15:09] currency/[16:36] ng-repeat/[16:56] ha in alzioabn/[17:17] 변수출력/[17:52] 필터입력/[18:44] Filter Array/[19:22] 필터기능/[19:59] 배열/[20:24] li 값/[22:08] controller 선언/[22:21] 테이블 정의/[22:54] 배열생성/[23:32] scope.baa = ha/[24:05] tr/[24:09] ng-repeat/[24:27] orderBy/[25:19] scope.lecd1/[27:19] orderBy/[27:33] $scope

05 Chapter 5

Upper, var. filter, length, toUpperCase(), toLowerCase(), innerHTML, $location, document.location.href, location.absUrl(), timeout, .run, interval, new Date(), toLocaleTimeString(), toUTCString(), $http.get, myError, statusText

27분

책갈피 : [00:16] Upper 메소드/[00:38] ha in alzioabn/[00:53] 변수(ha) 출력/[01:20] 2003co/[02:14] var/[02:54] filter(biga)/[03:25] yi/[03:42] length/[04:05] er.toUpperCase()/[04:48] texx/[06:16] 문자열 값/[07:05] toUpperCase()/[07:11] toLowerCase()/[07:31] innerHTML/[08:00] link 출력/[08:59] $scope.link/[09:36] $location/[09:43] document.location.href/[10:15] $location.absUrl()/[11:24] timeout/[11:44] var kop/[11:49] angular module 실행/[12:06] $timeout/[12:30] $scope.run/[13:10] $timeout(function ()/[14:21] interval/[15:25] new Date()/[15:47] toLocaleTimeString()/[16:30] $interval(function ()/[18:12] toDateString()/[18:25] toTimeString()/[18:31] toLocaleDateString()/[18:45] toUTCString()/[19:52] 경로/[20:10] $http/[20:52] $http.get/[21:46] .then(function(response)/[22:37] $scope.run = response.data/[23:22] 연동된 링크 페이지/[24:55] myError/[25:29] 해당 서버에 비동기 요청/[26:07] function myError(response)/[26:24] response.statusText

06 Chapter 6

http.get, response.status, status Text, status, data, $scope.good, x in good, option ng-repeat, x for x in good, colorlist, disabled, ng-hide, ng-mousemove, count, $scope.lo, ng-click, $scope.ole

35분 

책갈피 : [00:08] 변수 정의/[01:24] data/[02:02] http.get/[03:11] response.status/[04:21] 크롬-네트워크(F11)/[05:10] Status Code/[06:38] status Text, status, data/[08:05] 배열/[08:07] $scope.good/[08:56] option/[09:14] x in good/[09:42] Select/[09:48] option ng-repeat/[10:13] ng-option/[10:20] x for x in good/[10:29] selectedName/[11:06] Developer Tools/[12:04] 배열 만들기/[13:03] ng-model="selectedName"/[13:19] value 값 정의(x.list)/[15:00] x.list/[15:22] ng-model/[15:57] colorlist/[16:37] 주석 처리/[17:04] ng-options/[18:14] alll/[18:22] alll.list/[18:35] $scope.good/[19:01] 스타일시트/[19:05] background color/[19:31] $scope.good/[19:34] list, colorlist/[21:10] button 생성/[21:21] disabled/[22:01] ng-init="on"/[23:05] checkbox 생성/[24:09] on=true/[25:06] ng-hide/[27:22] ng-mousemove/[27:47] $scope= 0/[28:36] count/[29:08] count + 5/[29:38] $scope.lo/[30:08] 주석처리/[30:13] ng-click/[30:37] count + 1/[32:00] $scope.count = 0/[32:52] ng-click="ole()"/[33:12] $scope.ole=function()/[33:47] $scope.count++;

07 Chapter 7

ng-click, ng-show, $scope.viwee, mousemove, $scope.drags, function(dragseve), function(ew), drags($event), input type="checkbox", ng-hide, ng-switch, div, angular.copy, ng-model="anew", $scope.set(), $valid, required

27분

책갈피 : [00:08] 숨김 효과/[00:28] 리스트 출력/[00:41] ng-click="ok()"/[00:48] ng-show="viwee"/[01:17] aook.controller/[01:22] $scope.viwee = false/[02:22] display: none/[02:48] ng-show/[03:14] $scope.ok=function()/[03:21] $scope.viwee = false/[03:51] mousemove/[05:02] $scope.drags/[05:09] function(dragseve)/[05:47] function(ew)/[06:03] $scope.x = ew.clientX;/[06:35] $scope.y = ew.clientY;/[07:36] drags($event)/[09:22] input type="checkbox"/[10:39] ng-hide/[11:05] input type="radio"/[12:28] ng-switch/[14:23] div/[15:16] angular.copy/[16:44] ng-click="set()"/[17:07] ng-model="anew"/[19:47] anew.alz / anew.alzi/[20:29] $scope.anew/[20:49] angular.copy/[21:19] $scope.set()/[22:49] angular.copy/[22:54] anew(변수)/[24:00] form name="sdfsdf"/[25:03] input name="ppp"/[25:05] $valid/[25:12] required/[25:58] input type="email"

08 Chapter 8

$touched, $invalid, $scope.carn, placeholder="yyyy-MM-dd", carn.val, min, max, $scope.ex1, ng-pattern="ex1.al2", $error.pattern, $scope.url, ng-model="url.linn", ng-class, body ng-app=""

29분 

책갈피 : [00:02] 입력 필드/[00:35] form name="formin"/[00:45] required/[01:01] input name="min"/[01:33] $touched/[01:46] $invalid/[02:48] api 기능/[03:13] $scope.al1 = "ALZIO"/[04:43] angular.lowercase/[04:49] angular.uppercase/[05:35] angular.isString/[06:12] angular.isNumber/[07:21] $scope.carn/[07:34] input type="date"/[07:37] ng-model/[07:45] placeholder="yyyy-MM-dd"/[09:04] carn.val/[11:43] required/[12:12] ng-model="carn.val"/[13:11] range/[13:19] level/[13:25] min, max/[15:36] angular.module/[16:24] $scope.ex1/[17:48] ng-pattern="ex1.al2"/[17:59] ng-model="ex1.al1"/[18:19] class="error"/[18:24] ng-show/[18:29] pattern/[19:06] form name="forag"/[19:15] $error.pattern/[21:02] url 메소드/[21:11] $scope.url/[21:27] input type="url"/[21:41] ng-model="url.linn"/[23:08] input type="checkbox"/[23:29] 변경되는 대상/[23:36] decorationlinethrough/[23:55] fontweightbold/[23:57] backgroundcolorred/[25:47] 스타일 시트 정의/[27:04] ng-repeat="name in alzioa"/[27:30] ng-class/[28:07] ng-class-odd/[28:14] ng-class-even/[29:14] body ng-app=""

09 Chapter 9

33분

책갈피 : [00:06] 자바스크립트 세팅 방법/[01:07] 배열값/[01:16] select type/[02:07] alcon/[02:10] ace/[02:14] prototype.greet/[03:01] alnam/[03:36] ace as alsett/[03:45] input type/[05:41] alnam/[06:46] alert(팝업)/[07:29] ace.prototype.addContact/[09:09] push/[09:40] value값/[10:10] addContact/[10:47] alsett/[12:02] alcon/[12:35] button ng-click/[14:08] removeContact/[14:22] function(contactToRemove)/[14:50] var main/[15:31] indexOf/[15:46] contactToRemove/[16:24] splice/[16:39] (main, 15)/[18:41] removeContact(alcont)/[19:47] ng-repeat/[21:22] alcont/[22:04] alcont.type = 'mail'/[22:24] alcont.value = '지워짐'/[23:31] clearContact(alcont)/[24:34] option값/[25:20] input type/[26:14] ng-copy/[28:15] ng-cut/[28:18] Ctrl + C / Ctrl + X/[29:10] ng-dblclick/[29:35] input ng-model="call"/[29:48] href ng-click/[30:37] ng-keydown/[31:13] ng-keypress/[32:30] ng-keyup

10 Chapter 10

$scope.max/ng-maxlength/alfoa.inn.$valid/ng-minlength/anchor/padding-top/$anchorScroll/$location/anchor/cacheFactory/ng-controller=controllida/cache.info()/isUndefined

32분

책갈피 : [00:17] controller, form/[00:41] $scope.max/[01:18] ng-model=max/[01:45] input 출력/[02:00] ng-maxlength/[03:36] alfoa.inn.$valid/[05:15] ng-minlength/[06:21] scroll/[06:30] body ng-app/[06:39] ng-controller/[06:53] ng-click/[07:05] 배열/[07:35] mma(ha)/[08:02] anchor/[08:41] 분산처리/[08:55] 스타일시트 정의/[09:17] padding-top/[09:23] margin: 0/[10:21] top/[10:47] 메뉴,본문 분산/[10:57] display: inline-block/[11:45] $anchorScroll/[13:01] Offset/[13:35] controller/[13:44] $location/[14:47] hash()/[15:47] mma/[15:55] anchor/[16:12] var alks/[17:37] cacheFactory/[17:48] ng-controller=controllida/[18:07] key1, key2/[18:34] ng-model/[18:51] button/[19:04] put(key1,key2)/[19:20] ng-repeat/[19:32] cache.info()/[20:16] ininp in wor/[20:47] ng-app=appida/[21:38] $cacheFactory/[22:08] function(ininp, value)/[22:30] isUndefined/[23:15] $scope.cache.get(ininp)/[23:26] $scope.wor.push(ininp)/[24:15] $scope.put/[24:30] null : value/[26:20] 필터 기능/[26:42] $scope.numal/[27:59] limitTo.nunl/[30:39] $scope.al3

Angular.js 2

11 Chapter 1

npm cache clean/npm update npm -g/cd angular2project/package.json/my-app/Connected to BrowserSync/npm-debug.log/openab.ade

23분

책갈피 : [00:35] Shift + 마우스 우측/[00:39] 명령창 열기/[00:56] npm 버전 확인/[01:20] npm cache clean/[01:27] npm update npm -g/[01:49] mkdir angular2project/[02:28] cd angular2project/[03:02] 인코딩(UTF-8)/[03:24] package.json/[04:09] 해당 패키지 설치/[05:39] app 폴더 생성/[06:23] 응용프로그램 정의/[06:53] my-app/[07:37] cmd 실행/[08:52] npm start/[09:48] localhost:3000/[10:14] Connected to BrowserSync/[10:56] F11/[11:10] Get방식/[11:54] styles.css/[12:47] module /[13:27] UTF-8/[15:03] my-app/[16:53] openab/[17:39] call 출력/[17:50] call: 'alzio.co.kr'/[19:00] npm start/[19:07] Error/[19:31] npm-debug.log/[21:04] openab.ade/[22:33] app.component.ts

12 Chapter 2

템플릿 수정하기, *ngFor, *ngIf

29분

책갈피 : [00:18] 트리 구조/[01:19] node_modules/[01:29] typings/[01:52] 템플릿 수정하기/[03:14] package.json/[03:53] app.component.ts 갱신/[04:08] app 폴더 덮어쓰기/[05:00] 라이센스 표기/[06:03] 타이틀 문구 수정/[06:30] ANSI/[06:52] UTF-8로 파일 저장/[07:28] 로그/[07:51] my-app 태그/[07:57] template/[08:08] 타이틀 수정/[08:22] 타이틀 id 수정/[08:55] ANSI/[09:36] UTF-8/[10:18] h1 스타일시트/[10:43] font-size 변경/[11:19] class 정의/[11:39] h1.lpo 스타일 추가/[12:13] 배열/[12:59] 배열 값 변경/[13:31] *ngFor/[14:03] *ngFor="let hero of heroes"/[14:44] class.selected/[15:21] (click)="onSelect(hero)"/[15:37] hero.id / hero.name/[16:12] my-hero-detail 태그/[17:25] .selected/[18:06] .heroes/[19:19] .heroes li/[20:17] display: inline-block/[20:29] .badge/[21:30] hero-detail.component.ts/[22:42] angular, angular2 차이/[23:26] hero.name/[23:58] ngModel/[24:41] hero.id/[25:01] my-hero-detail/[25:38] HEROES/[25:54] *ngFor/[26:24] (click)="onSelect(hero)"/[27:52] *ngIf

13 Chapter 3

dashboard 추가 및 튜닝하기, slice()

29분

책갈피 : [00:49] import {hero}/[01:44] heroes.component.ts 추가/[02:20] @Component/[02:55] my-heroes, my-app/[03:34] 백업/[03:46] 파일 가져오기/[04:27] 실행/[04:55] document.location/[06:49] selector : my-heroes/[06:55] HeroesComponent/[07:38] a 태그/[08:25] app.component.css/[09:13] a:hover/[09:29] a:visited, a:link/[10:04] a 스타일/[10:47] dashboard.component.html/[11:28] dashboard.component.css/[12:16] @Component/[13:51] 스타일시트 적용/[14:08] .grid-pad/[14:35] .grid/[15:03] @media (max-width: 1024px)/[15:38] *ngFor/[16:37] .module/[17:28] .module:hover/[18:26] 배열/[19:41] import {Hero} from './hero'/[19:58] heroes.slice(1,5)/[21:02] 문자열 순서/[21:46] 서버 중단 후 재시작/[23:10] 코드 수정시 작업/[23:47] css 수정/[24:46] hero.name/[25:05] hero.id/[25:25] ngModel/[25:33] goBack()/[25:57] button 스타일 수정/[27:42] selectedHero.name/[28:04] uppercase

14 Chapter 4

search(), 동기/비동기 방식, save(), update(), add(), $event.stopPropagation()

32분

책갈피 : [00:55] 백업 폴더와 압축파일 만드는 이유/[01:50] 백업하기/[02:39] index.html 갱신/[03:10] Hero 추가/[03:47] Hero 삭제/[04:41] search, 버튼에 대해 알아보기/[06:00] hero.name/[06:42] .search_result/[07:16] #search-box/[07:35] search(searchBox.value)/[07:46] (click)="gotoDetail(hero)"/[07:54] let hero of heroes/[08:41] 동기/비동기 방식/[09:37] sync/[09:57] async/[10:13] gotoDetail(hero)/[11:12] click 이벤트/[11:32] save/[12:16] save()/[12:34] update(this.hero)/[13:05] map 형식/[14:01] add(heroName.value)/[14:15] onSelect(hero)/[14:32] class.selected/[14:59] delete(hero)/[15:09] $event.stopPropagation()/[16:10] uppercase/[17:57] plunk 다운로드/[19:01] npm install/[19:15] package.json 생성/[20:12] 정리/[20:35] app 폴더/[21:12] npm start/[22:30] 명령창 열기/[23:25] package.json/[23:37] tsconfig.json/[23:44] typings.json/[23:49] systemjs.config.js/[24:32] 트리 구조/[25:20] app.module.ts/[25:33] app.component.ts/[26:27] main.ts/[27:22] 404 에러/[28:22] favicon.ico/[30:52] 로그 확인

15 Chapter 5

import, BrowserModule, FormsModule, NgModule, AppComponent, HeroDetailComponent, HeroListComponent, SalesTaxComponent, currency, HeroService, BackendService, Logger

32분

책갈피 : [00:55] node 실행/[02:09] app.module.ts/[02:43] providers/[03:15] import { BrowserModule }/[03:57] import { FormsModule }/[04:30] import { NgModule }/[04:49] app.component/[05:12] .//[05:45] AppComponent/[06:38] HeroDetailComponent/[06:55] declarations/[07:06] NgModule/[07:59] @Input()/[08:57] ngModule/[10:19] hero.name/[10:50] hero.power/[11:14] new Hero()/[11:55] HeroListComponent/[12:17] (click)="selectHero(hero)"/[12:59] *ngFor="let hero of heroes"/[13:19] *ngIf/[13:47] SalesTaxComponent/[14:09] sales-tax/[15:06] amounBox/[15:29] currency:'USD':true:'1.2-2'/[16:15] getTax(value: string / number)/[16:32] getVAT()/[17:14] HeroService/[17:40] BackendService/[19:14] power/[20:28] this.id = nextId++/[21:11] *ngIf/[21:19] *ngFor/[21:47] Logger/[23:19] platformBrowserDynamic().bootstrapModule(AppModule)/[23:32] import/[25:57] template/[26:33] myHero.name/[27:27] heroes 배열/[28:05] this.heroes[0]/[29:34] number, string/[30:21] length/[30:48] *ngIf/[32:08] *ngFor

16 Chapter 6

54분

책갈피 : [00:22] node 실행/[00:29] 명령창 열기/[00:31] npm start/[00:34] 페이지 없음 (404)/[01:57] app.component.ts/[02:06] app.module.ts/[02:46] ClickMeComponent/[03:28] onClickMe/[04:04] clickMessage/[04:15] 해당 문구 출력/[05:19] click-me2.component/[05:44] No! .. Click me!/[05:58] event (함수)/[06:42] this.clicks++/[07:21] evtMsg/[08:16] tagName/[08:39] div/[09:08] event.target.tagName/[10:06] KeyUpComponent/[10:45] template/[11:22] app.component.html/[11:37] Give me some keys!/[12:08] keyup/[12:39] values/[13:00] KeyboardEvent/[13:05] HYMLInputElement/[14:25] event:any/[14:41] onKey(box.value)/[15:02] value: string/[15:50] Press enter when done/[16:14] key-up3/[16:42] keyup.enter/[17:09] values=box.value/[17:46] Little Tour of Heroes/[18:27] selector: 'little-tour/[19:23] *ngFor="let hero of heroes"/[20:29] addHero/[21:43] addHero(newHero.value)/[22:32] newHero: string/[22:42] this.heroes.push(newHero)/[23:12] keyup loop-back component/[24:15] (keyup)="0"/[25:32] app.module.ts 열기/[25:58] FormsModule/[26:17] HeroFormcomponent/[27:16] powers/[28:01] bootstrap.css/[28:13] div class="container"/[31:10] main.ts/[31:12] plaformBrowserDynamic()/[32:01] onSubmit()/[32:26] this.submitted=true/[34:33] *ngIf="active"/[34:47] ngSubmit/[35:24] heroForm/[35:38] form-group/[35:57] label for="name"/[36:35] Dr IQ 출력/[37:48] #name="ngModel"/[38:15] name.valid/[38:55] class="alert alert-danger"/[40:09] Name via form.controls/[41:01] Chuck Overstreet/[41:25] model.alterEgo/[41:41] hero.ts/[43:41] powers/[44:44] model.power/[45:16] Submit / New Hero/[45:58] heroForm/[48:05] no-style .ng-valid/[49:00] get diagnostic()/[49:16] return JSON.stringify(this.model)/[50:48] showFormControls(form: any)/[52:06] active 요소/[52:20] *ngIf="active"/[52:36] type="submit"/[53:51] ngModel (지시문)

샘플확인 : 알지오 검색후 -> 강의검색란 -> Angular.js

※ 다음 강의는 순차적으로 업데이트 진행중입니다.