CF

Using Angular 2 Patterns in Angular 1.x Apps

1h 3m 22s
English
Free
Updated September 2026

Using Angular 2 Patterns in Angular 1.x Apps is a 13-lesson 1 hour 3 minutes self-paced course by egghead.io. Using Angular 2 Patterns in Angular 1.

Course facts

Lessons
13
Duration
1 hour 3 minutes
Level
All levels
Language
English
Updated
2026-09-11
Instructor
egghead.io
Price
Free

Using Angular 2 Patterns in Angular 1.x Apps, from egghead.io, is a free course for teams not ready to migrate off Angular 1.x but who want their codebase to age well.

Eggly, in Angular 2's Image

Working through Eggly, a real Angular 1.x bookmarking app, you rebuild its architecture using component-based patterns inspired by Angular 2 — including ES6 via Babel.

What You'll Learn

  • Component-based architecture inside an existing Angular 1.x app
  • Using ES6 in Angular 1 projects with Babel
  • Core patterns for composing a modular, future-ready application

Across 10 free lessons, the aim is preparing an Angular 1.x codebase for what comes next, without a full rewrite.

Who teaches Using Angular 2 Patterns in Angular 1.x Apps? egghead.io

egghead.io thumbnail

egghead.io is a US-based subscription video platform focused on short, focused screencasts on JavaScript ecosystem topics. Founded in 2012 by John Lindquist (a Google Developer Expert) and run by Joel Hooks, egghead pioneered the short-screencast format that most modern developer-education platforms now use — courses are typically broken into 2-5 minute lessons that each cover one specific concept or API.

The instructor roster includes many of the most cited names in the JavaScript ecosystem — Kent C. Dodds (whose Testing JavaScript launched on egghead before EpicWeb.dev), Andrew Del Prete, Hannah Davis, Lukas Ruebbelke, Tomasz Łakomy, Andy Van Slaars, and many others. Course material covers React, Next.js, TypeScript, Node.js, GraphQL, Vue, the testing tracks, RxJS / observables, and a long list of smaller libraries and tools.

The CourseFlix listing under this source carries over 20 egghead courses spanning that range. Material is paid; egghead itself runs on a monthly / annual subscription on the original platform. The bite-sized format suits developers learning incrementally during work hours rather than committing to multi-hour video sessions.

What lessons are included in Using Angular 2 Patterns in Angular 1.x Apps?

  • Space or K: play or pause
  • J: rewind 10 seconds
  • L: forward 10 seconds
  • Left Arrow: rewind 5 seconds
  • Right Arrow: forward 5 seconds
  • Up Arrow: volume up
  • Down Arrow: volume down
  • M: mute or unmute
  • F: toggle fullscreen
  • T: toggle theater mode
  • I: toggle mini player
  • 0 to 9: seek to 0 to 90 percent of the video
  • Shift plus N: next video
  • Shift plus P: previous video
0:00 0:00
#Lesson TitleDuration
1Introducing Angular 2 Concepts in Angular 1 02:43
2Compile an Angular Application Written in ES6 05:32
3Create a Top Level Angular Application Component 04:32
4Structure a Complex Angular Component using Subcomponents 05:14
5Build an Angular Component Controller Using ES6 Class 03:59
6Refactor Angular Controller Logic to Services 03:29
7Use Dependency Injection with ES6 and Angular 03:10
8Container and Presentation Components Using Angular Component Bindings 06:10
9Initialize Angular Components with Lifecycle Hooks 03:36
10Build Lightweight Controllers by Binding to Models in Angular 10:03
11Isolate State Mutations in Angular Components 08:07
12Communicate State Changes in Angular with an Event Bus 02:50
13Test an Angular Component with $componentController 03:57

What courses are similar to Using Angular 2 Patterns in Angular 1.x Apps?

More courses by egghead.io

Frequently asked questions

What are the prerequisites for enrolling in this course?
Prospective students should have a working knowledge of Angular 1.x and some familiarity with JavaScript. Understanding ES6, while not mandatory, would be beneficial as the course utilizes ES6 with Babel for transpiling code. Familiarity with basic concepts of component-based architecture will help but is not required.
What will I build during the course?
Throughout the course, students will work on transforming an Angular 1.x application called Eggly that organizes bookmarks. By applying modern component-based architecture techniques inspired by Angular 2, participants will refactor and enhance the existing application, making it modular and ready for future developments.
Who is the target audience for this course?
This course is aimed at developers with experience in Angular 1.x who are looking to modernize their applications by integrating Angular 2 design patterns. It's ideal for those who want to future-proof their applications and gain a deeper understanding of component-based architecture and ES6 in the context of Angular.
How does this course compare to other Angular courses?
Unlike courses that teach Angular 2 or later versions from scratch, this course focuses on modernizing existing Angular 1.x applications. It offers practical insights into integrating Angular 2-inspired patterns without fully transitioning to a new framework, making it unique for developers maintaining legacy Angular 1.x projects.
Which specific tools will be used in the course?
The course makes extensive use of Babel to transpile ES6 code in Angular 1.x applications. It also incorporates Angular 2-inspired design patterns, such as component-based architecture and dependency injection, to modernize and modularize legacy applications.
What topics are not covered in this course?
The course does not cover Angular 2 or later versions in their entirety. It focuses on introducing Angular 2 concepts within the context of Angular 1.x applications. It also does not delve into non-Angular specific web development topics, such as server-side programming or database management.
What is the time commitment for completing the course?
The course consists of 13 lessons and offers a flexible runtime, allowing students to learn at their own pace. While the exact duration varies, students should allocate sufficient time to engage with practical examples and hands-on exercises to fully grasp the implementation of modern patterns in Angular 1.x applications.