ONLINE CLASS

Angular.js [1 + 2]

COURSE FOCUS

이 강의에서 배우는 핵심 실무

Angular.js의 ng-model과 ng-bind로 입력 값과 화면을 연결하고 컨트롤러·배열·ng-repeat로 목록을 구성합니다. 필터와 시간 처리, HTTP 요청을 살펴본 뒤 연락처 추가·삭제와 키보드·마우스 이벤트를 다루는 코드를 실습합니다. 대시보드 추가와 수정 작업까지 이어가며 데이터 바인딩을 사용하는 화면이 사용자 조작에 따라 바뀌는 과정을 익힙니다.

?

수강 전 꼭 확인하세요

수강 전 자주 묻는 내용을 간단히 안내드립니다.

Q초보자도 교재 없이 수강 가능한가요? 프로그램 정보는?
A

네, 영상과 실습자료로 쉽게 학습할 수 있습니다. 알지오는 원격평생교육원으로 프로그램 관련 정보는 제공하지 않습니다.

◆
기업이 선택한 신뢰 강의

검증된 커리큘럼과 전문 강사진으로 높은 만족도를 제공합니다.

자세히 보기  >
♥
수강료 일부는 사회환원에 사용됩니다.

작은 나눔이 더 나은 내일을 만듭니다.

자세히 보기  >
REAL REVIEW

수강생 리얼후기!

실제 수강생의 학습 경험을 확인해 보세요.

수강후기를 불러오는 중입니다.

RECENT Q&A

최근 수강질문

최근 등록된 수강질문을 작성순서대로 확인해 보세요.

전체 수강질문 보기
ALZIO DEEP GUIDE

Angular 계열을 더 깊게 이해하기

16강에서 AngularJS 1 계열의 지시자·scope·폼·요청을 익힌 뒤 초기 Angular 2 프로젝트로 이어집니다. 지원 종료된 AngularJS와 현재 Angular를 분리해 기존 프로젝트 이해에 활용합니다.

공식 기술정보 확인16강 커리큘럼 연결2026 현재 기술정보

Angular.js [1 + 2] · 16강 · 8시간 15분

01

Angular 계열은 무엇인가

Angular는 웹 애플리케이션의 화면·상태·처리 구조를 구성하는 프레임워크 계열입니다. AngularJS 1.x와 현재 Angular는 같은 제품 세대가 아니므로 이름만 보고 설치·문법을 섞으면 안 됩니다. 기존 프로젝트를 읽는 목적과 새 프로젝트를 시작하는 목적을 구분하세요.

02

관련 플랫폼과 개발도구의 관계

AngularJS는 JavaScript 기반의 초기 프레임워크이고 Angular는 별도의 발전 경로를 가진 프레임워크입니다. 브라우저·언어·패키지 도구는 프레임워크와 역할이 다릅니다. 프로젝트의 의존성 파일과 사용 문법을 먼저 보고 어떤 세대를 학습하는지 확인해야 합니다.

03

Angular 계열의 핵심 기능

기술 자체의 기능과 이 강좌의 직접 학습 범위는 다릅니다. 아래 연결 표시는 저장된 공개 커리큘럼에 근거합니다.

템플릿과 바인딩

화면 표시를 자료와 연결합니다. 단순 문자열 출력에서 반복·조건 표시로 넓힐 수 있습니다. 사용하는 세대의 지시자 문법과 자료 위치를 확인해야 변경 결과를 추적할 수 있습니다.

강좌에서 직접 학습 · 1~4·12~13강

화면 단위와 상태

관련 표시와 처리 규칙을 묶어 구조를 나눕니다. AngularJS의 controller·scope와 Angular의 component를 같은 API로 이해하지 않습니다. 화면이 커질수록 자료의 소유 위치를 정하는 일이 중요합니다.

강좌에서 직접 학습 · 1~4·15강

폼과 검증

사용자 입력의 상태와 규칙을 다룹니다. 화면에 오류 문구를 표시하는 일과 서버에서 입력을 확인하는 일은 다릅니다. 정상 입력뿐 아니라 빈 입력·범위 밖 값도 살펴야 합니다.

강좌에서 직접 학습 · 5~10강

HTTP와 자료 흐름

서버 자료를 받아 목록·상태를 변경합니다. 요청 완료 시점과 화면 처리의 순서를 구분하면 빈 결과와 오류를 설명하기 쉽습니다. 프레임워크가 응답 자료의 업무 의미까지 자동으로 판단하지는 않습니다.

강좌에서 직접 학습 · 5~10·14강

목록·검색·필터

자료를 반복 표시하고 조건에 맞게 보여줍니다. 원본 자료 변경과 표시 순서 변경을 구분해야 합니다. 검색 결과가 비었을 때 실제 원본이 지워진 것은 아닌지 확인하세요.

강좌에서 직접 학습 · 4~10·13~14강

프로젝트 도구와 현대 기능

패키지·빌드 도구와 프레임워크를 함께 관리합니다. 현재 Angular의 독립 구성요소·Signals 등은 초기 Angular 강좌와 별도 범위입니다. 새 도구 이름을 알고 있다고 기존 프로젝트가 자동으로 전환되는 것은 아닙니다.

현재 Angular 참고 · 현대 기능 직접 학습 미확인
04

이 과정의 실제 작업 흐름

1~10강은 ng-app·ng-model·controller·scope·필터·HTTP·이벤트 등 AngularJS 계열입니다. 이 구간은 현재 Angular의 API 설명으로 읽지 않습니다. 11강부터 패키지·프로젝트와 Angular 2 문법으로 넘어가는 경계를 먼저 표시해 두세요.

12~15강은 템플릿의 반복·조건과 대시보드·검색·자료 변경·모듈·컴포넌트입니다. 16강 공개 제목은 Chapter 6이고 세부 설명이 비어 있으므로 최신 기능을 추측해 추가하지 않았습니다. 세대별 설치와 예제를 분리하는 것이 복습의 출발점입니다.

  1. AngularJS 문법 확인
  2. scope·목록·폼
  3. 요청·이벤트
  4. 세대 경계 확인
  5. Angular 2 프로젝트
  6. 검색·모델·검증
05

핵심 구조를 이해하는 방법

화면의 템플릿과 자료를 연결하는 일, 입력을 검증하는 일, 서버 자료를 읽는 일은 서로 다른 책임입니다. 연결 규칙을 이해하면 화면에 값이 안 나타나는 원인이 템플릿인지 자료 변경인지 요청 실패인지 나눌 수 있습니다. 세대별 용어가 비슷해도 API를 그대로 교환할 수는 없습니다.

06

실무 적용과 결과 확인

1~10강 복습에서는 화면의 표시값·scope의 자료·HTTP 응답을 나눠 확인해 보세요. 필터링으로 보이지 않는 항목과 실제 원본에서 삭제한 항목의 차이를 점검하는 것은 추가 응용 제안입니다.

14~15강에서는 검색·수정·추가 후 목록에 어떤 값이 남는지 확인하세요. 같은 이름의 지시자라도 AngularJS와 Angular 템플릿에서 문법이 다를 수 있습니다. 한 프로젝트에 두 세대의 코드를 임의로 섞지 않는 것이 중요합니다.

기존 AngularJS 코드 이해

1~10강은 지원 종료된 AngularJS 프로젝트의 지시자·scope·폼·요청을 읽는 기반입니다. 신규 서비스의 현재 프레임워크 선택과는 다른 학습 목적입니다.

강좌 연결과 추가 적용의 범위 구분

초기 Angular 구조 비교

11~15강은 초기 컴포넌트·템플릿·모듈을 비교하는 학습입니다. 현재 Angular로 이식하는 전체 도구와 절차를 제공하는 것으로 표시하지 않습니다.

강좌 연결과 추가 적용의 범위 구분
07

이 강좌에서 집중할 전문주제

이 강좌의 고유 전문주제는 두 세대의 화면·자료 연결 방식 비교입니다. 1~10강의 scope와 11~15강의 컴포넌트·모듈을 분리해서 기록하면 오래된 소스를 읽을 때 세대를 판단하기 쉽습니다.

신규 프로젝트의 현재 설계 전체를 학습하는 과정과 구분합니다. 기존 프로젝트 이해를 위해 당시의 예제를 살펴보고 현재 Angular로 새로 시작할 경우 별도의 프로젝트·API·빌드 조건을 학습해야 합니다.

08

현재 기술과 강좌 환경의 관계

강좌명과 공개 내용은 AngularJS 1 및 초기 Angular 2를 나타냅니다. 세부 패치 버전은 공개 자료만으로 확정되지 않습니다. AngularJS 공식 지원은 2022년 1월 종료되었습니다.

현재 Angular는 별도 프레임워크로 개발되고 있습니다. 현재 Signals·독립 구성요소·SSR 등 전체 기능은 직접 학습으로 확인되지 않습니다. AngularJS 지원 종료를 현재 Angular의 지원 종료로 해석하지 않고, 본 과정은 두 세대의 기존 코드 학습이라는 성격을 명확히 구분합니다.

09

목적에 맞는 기술 선택과 비교

아래 비교는 목적과 작업 구조를 선택하기 위한 안내입니다. 다른 기술 전체를 본 강좌에서 가르친다는 뜻은 아닙니다.

목적에 맞는 기술 선택과 비교
선택지작업 접근이 강좌와의 관계
AngularJS 1scope·지시자 중심의 초기 체계1~10강 · 지원 종료
초기 Angular 2컴포넌트·템플릿·모듈11~15강의 공개 범위
현재 Angular현재 프로젝트·반응성·도구 체계다음 학습 · 강좌 범위와 분리
10

기술개념과 알지오 커리큘럼 연결

회차는 공개 커리큘럼의 실제 순서입니다. 실습 후 응용 제안과 현재 기술 참고정보를 강의에서 제공하는 실습으로 해석하지 않습니다.

기술개념과 알지오 커리큘럼 연결
기능·개념무엇인가실무 의미강좌 회차학습 상태
AngularJS 기초·자료 연결지시자·controller·scope초기 화면 상태 이해1·2·3·4강강좌에서 직접 학습
폼·필터·요청·이벤트입력과 서버 자료 처리AngularJS 실행 흐름 확인5·6·7·8·9·10강강좌에서 직접 학습
초기 Angular 프로젝트패키지·템플릿·컴포넌트두 세대의 차이 확인11·12·13강강좌에서 직접 학습
검색·변경·모듈자료와 화면 구조 연결초기 Angular 예제 이해14·15강강좌에서 직접 학습
공개 제목 기준 기초 소개Chapter 6의 공개 제목세부 기능 미확정16강기초 소개 · 세부 범위 미확정
11

처음 배울 때 자주 생기는 오해

AngularJS와 Angular는 같은가?

별도 세대를 구분해야 합니다. 10강과 11강 사이가 이 과정의 경계입니다. 이름만 보고 설치와 API를 혼용하지 않습니다.

AngularJS도 현재 지원되나?

공식 지원은 2022년 1월 종료됐습니다. 기존 코드 이해의 학습 가치와 현재 지원을 구분합니다. 새 개발 환경처럼 소개하지 않습니다.

Angular 2를 배우면 현재 기능도 모두 아나?

초기 문법과 현재 기능 범위는 다릅니다. 11~15강의 실제 항목만 직접 학습으로 표시합니다. 현대 기능은 별도 다음 단계입니다.

필터를 쓰면 원본도 삭제되나?

화면에서 선택해 보여주는 것과 원본 변경은 다릅니다. 목록·검색 실습에서 두 상태를 대조하세요. 표시 결과만 보고 데이터가 삭제됐다고 판단하지 않습니다.

입력 검증이면 서버 확인도 끝인가?

폼 상태와 서버의 확인은 별개입니다. 10·16강을 이유로 운영 보안 전체를 배운다고 확대하지 않습니다. 실제 서버 조건은 별도로 확인해야 합니다.

16강에 최신 기능이 들어 있나?

공개 제목은 Chapter 6이고 세부 설명이 없습니다. 최신 API를 추측해 연결하지 않았습니다. 확인 가능한 범위만 안내합니다.

12

다음 학습 방향

자바스크립트 ES6 [입문부터 고급까지]

JavaScript의 언어 기반을 먼저 보강할 때 비교합니다.

자료 보기 →

Angular 계열 관련 과정 비교

입문·실무·심화 과정의 실제 커리큘럼을 목적에 맞게 비교합니다.

자료 보기 →

실습과 복습 계획

새 환경에서 예제를 확인하고 학습 계획을 세우는 방법을 살펴봅니다.

자료 보기 →

기술정보는 Google Angular 및 AngularJS 프로젝트의 공식자료를 기준으로 검토했으며, 강좌 범위는 Angular.js [1 + 2]의 공개 커리큘럼과 구분했습니다.

공식 기술정보 확인일: 2026-10-05 · 강좌 업데이트일을 의미하지 않습니다.

Angular.js [1 + 2] Angular.js [1 + 2]

  • Angular.js [1 + 2]

  • 강의구성
  • (16강) 전체 : 8시간 15분|평균 : 30분56초
  • 이용기간/강사
  • 1개월2개월
    알지오 R&D [IT]
  • 증빙가능
  • 수료증, 수강증, 학습진도
  • 수강료
  • 190,000원할인95,000원
?

수강 전 꼭 확인하세요

수강 전 자주 묻는 내용을 간단히 안내드립니다.

Q 초보자도 교재 없이 수강 가능한가요? 프로그램 정보는?
A

네, 영상과 실습자료로 쉽게 학습할 수 있습니다. 알지오는 원격평생교육원으로 프로그램 관련 정보는 제공하지 않습니다.

수강료 일부는 사회환원에 사용됩니다.

작은 나눔이 더 나은 내일을 만듭니다.

자세히 보기 >
  • Angular.js 1
  • 01.26분 Chapter 1
    UTF-8, 구문출력, ng-app, ng-init, ng-bind, ng-model, controller 함수, angular.module, 스타일시트, 변수 정의,입력,연산, ng-scope, ng-binding
    문서 UTF-8로 저장, angular.module, input 추가, class="ng-binding"
  • 02.28분 Chapter 2
    Value값, 앱 띄우기, 자식 존속 변수, 배열, input type, data-ng-model, list, list * mon, 내장 변수, g in menu, ng-repeat, attribute, directive, template
    변수, 값, Value값 생성, HTML 문서에 적용, 중복 출력안함, init, app, model, 대문자 앞에 - 표시
  • 03.31분 Chapter 3
    restrict, directive, restrict, replace, binding-ng-model, ng-show, ng-hide, $valid, touched, ng-not-empty, ng-bind, $scope
    restrict : "C", var apoo, 검사, input ng-model
  • 04.28분 Chapter 4
    input ng-model, ng-click, changeName, uppercase, lowercase, orderBy, currency, Filter Array, 배열생성
    input ng-model, 변수범위, ng-repeat, orderBy $scope
  • 05.27분 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
    Upper 메소드, link 출력, $interval(function (), response.statusText
  • 06.35분 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
    변수 정의, $scope.good, ng-options, on=true, $scope.ole=function()
  • 07.27분 Chapter 7
    ng-click, ng-show, $scope.viwee, mousemove, $scope.drags, function(dragseve), function(ew), drags($event), input type=
    숨김 효과, input type="checkbox", ng-model="anew", anew(변수), input type="email"
  • 08.29분 Chapter 8
    $touched, $invalid, $scope.carn, placeholder=
    입력 필드, input type="date", angular.module, input type="url", ng-repeat="name in alzioa"
  • 09.33분 Chapter 9
    prototype.greet, ace as alsett, alnam, ace.prototype.addContact, removeContact, function(contactToRemove), splice, clearContact(alcont), ng-dblclick, href ng-click, ng-keydown, ng-keypress, ng-keyup
    자바스크립트 세팅 방법, push, removeContact(alcont), option값, ng-keypress ng-keyup
  • 10.32분 Chapter 10
    $scope.max, ng-maxlength, alfoa.inn.$valid, ng-minlength, anchor, padding-top, $anchorScroll, $location, anchor, cacheFactory, ng-controller=controllida, cache.info(), isUndefined
    controller, form, padding-top, ng-controller=controllida, $scope.cache.get(ininp), $scope.al3
  • Angular.js 2
  • 11.23분 Chapter 1
    npm cache clean, npm update npm -g, cd angular2project, package.json, my-app, Connected to BrowserSync, npm-debug.log, openab.ade
    Shift + 마우스 우측, my-app, my-app, app.component.ts
  • 12.29분 Chapter 2
    템플릿 수정하기, *ngFor, *ngIf
    트리 구조, 로그, .selected, hero.id, *ngIf
  • 13.29분 Chapter 3
    dashboard 추가 및 튜닝하기, slice()
    import {hero}, a:hover, @media (max-width: 1024px), hero.id, uppercase
  • 14.32분 Chapter 4
    search(), 동기/비동기 방식, save(), update(), add(), $event.stopPropagation()
    백업 폴더와 압축파일 만드는 이유, hero.name, onSelect(hero), package.json, 로그 확인
  • 15.32분 Chapter 5
    import, BrowserModule, FormsModule, NgModule, AppComponent, HeroDetailComponent, HeroListComponent, SalesTaxComponent, currency, HeroService, BackendService, Logger
    node 실행, @Input(), amounBox, platformBrowserDynamic, *ngFor
  • 16.54분 Chapter 6
    npm start, this.clicks++, key-up3, FormsModule, heroForm, model.alterEgo, showFormControls

강의목록 다운로드                        1:1 강의 질문&답변






도움이 필요하신가요?
💬
알지오 학습·수강 도우미
운영진이 확인한 안내를 자세히 보고, 필요하면 바로 상담하세요.
상담 상태 확인 중