O'Reilly logo

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Learning AngularJS

Video Description

Overview

Learning AngularJS LiveLessonsprovides developers with a practical introduction to AngularJS, an exciting JavaScript framework for developing web applications called single-page apps (SPAs).

 

Description

AngularJS is a powerful JavaScript framework, maintained by Google, for building web applications (single-page apps [SPAs]) and enhancing various parts of your web pages. It’s a comprehensive framework that makes both development and testing easier by extending web applications with MVC (model-view-controller) capability.

Marc Wandschneider, Senior Developer Advocate at Google, has more than 20 years of experience as a developer and is the author of two programming books and two other LiveLessons video training. In this video training, Marc uses a live-coding approach to show developers how to start from scratch and work their way up to building a meaningful, yet not overly complicated application.

The source code repository for this LiveLesson can be found at https://github.com/marcwan/AngularJSLiveLessons.

About the Instructor

Marc Wandschneiderhas worked extensively with open source platforms and has written an Outlook Express-style email client for Linux using Qt. He travels the globe, consulting as a lead manager for software projects and teams. A graduate of the McGill University School of Computer Science, he spent five years working for Microsoft, where he developed and managed developers on the Visual Basic, Visual J++, and .NET Windows Forms teams.

 

 Skill Level 

  • Beginner

 What You Will Learn

  • The basics of AngularJS, including data binding and filtering
  • How angular uses MVC to let you build up web applications or SPAs
  • How to organize applications using modules and splitting up files into various locations
  • How to load and post data to remove servers
  • How to extend it all by writing directives, filters, and more
  • How to complete an application, implement network access, and test the app

 

Who Should Take This Course

  • Web developers

 

Course Requirements

  • HTML, JavaScript, CSS, and some programming experience beyond writing script for web pages

 

 Table of Contents
 
Introduction

Lesson 1: Getting Started
Learning Objectives
1.1 Understand what AngularJS is and why it's important
1.2 Install AngularJS
1.3 Install Bootstrap
1.4 Write your first AngularJS application
1.5 Look at what you will build with AngularJS
1.6 Understand what you should know before you begin
1.7 Stay up to date and find the help you need

Lesson 2: Working with AngularJS Building Blocks: Binding, Directives, and Filters
Learning Objectives
2.1 Perform more useful data binding with repeating
2.2 Introduce filters to your bindings
2.3 Combine data binding and filters in your application
2.4 Understand more about repeating and directives
2.5 Improve the UI of your sample application

Lesson 3: Using Controllers and Views
Learning Objectives
3.1 Understand how AngularJS organizes MVC
3.2 Use controllers and forms to modify your data
3.3 Perform data validation and communicate between views and controllers
3.4 Understand validation a bit more
3.5 Set up a simple web server (Mac and Linux)
3.6 Set up a simple web server (Windows)
3.7 Set up multiple views and controllers

Lesson 4: Putting It All Together with Modules
Learning Objectives
4.1 Understand the core components of AngularJS modules
4.2 Understand routes and add them to your apps
4.3 Understand how to lay out your applications
4.4 Add an album view to your sample application

Lesson 5: Loading and Saving Data
Learning Objectives
5.1 Understand the various ways you can provide data in Angular—Part I: Services
5.2 Understand the various ways you can provide data in Angular—Part II: Factories, constants, and values
5.3 Use factories and services with remote data
5.4 Upload image files from your AngularJS application

Lesson 6: Filling in the Blanks—Filters, Directives, Cookies, and More
Learning Objectives
6.1 Write your own filters
6.2 Write your own directives I: Simple directives
6.3 Write your own directives II: Scope and user interface
6.4 Work with cookies in your app

Lesson 7: Wrapping Up
Learning Objectives
7.1 Complete your application and look to what's next
7.2 Implement network access with JSONP
7.3 Test your application with Karma

Summary

Lesson 1: Getting Started
Lesson 1 covers what AngularJS is and why it's important. Viewers learn how to install AngularJS and Boostrap, write their first AngularJS application, look at what they will build with AngularJS, and what they should know before they begin.

Lesson 2: Working with AngularJS Building Blocks: Binding, Directives, and Filters
Lesson 2 covers two extremely important and key building blocks: data binding and filtering. Viewers learn how to build up their data binding with repeating, introduce filters to their bindings, and then combine data binding and filters in their application. Viewers will understand more about repeating and directives and how to improve the UI of their sample application.

Lesson 3: Using Controllers and Views
Lesson 3 gets into building up the web application using controllers and views. In this lesson, viewers learn how AngularJS organizes MVC, how to use controllers and forms to modify their data, how to perform data validation and communicate between views and controllers. Viewers will understand more about validation, how to set up a simple web server to run their sample, and how to set up multiple views and controllers to really start building out their SPA.

Lesson 4: Putting It All Together with Modules
Lesson 4 helps viewers organize their SPA by learning about and utilizing AngularJS modules. In this lesson, viewers learn about the core components of AngularJS modules. They also learn about routes, how to add routes to their apps, how to lay out their applications, and how to add an album view to the sample application.

Lesson 5: Loading and Saving Data
Lesson 5 looks at data access in AngularJS, specifically how to load in data and send data back to remote servers. In this lesson, viewers learn the various ways to provide data in Angular and how to use these ways (factories and services) with remote data. Viewers also learn about file handing, so they can upload image files from their AngularJS application to the server.

Lesson 6: Filling in the Blanks—Filters, Directives, Cookies, and More
Lesson 6 shows viewers how to write their own filters and directives on top of the core system. In this lesson, viewers learn how to write their own filters, write their own simple directives, and work with cookies in their app.

Lesson 7: Wrapping Up
Lesson 7 wraps up these LiveLessons by showing viewers how to complete their application and look to what's next, implement network access with JSONP, and test their application with Karma.

 

About LiveLessons Video Training
 
LiveLessons Video Training series publishes hundreds of hands-on, expert-led video tutorials covering a wide selection of technology topics designed to teach you the skills you need to succeed. This professional and personal technology video series features world-leading author instructors published by your trusted technology brands: Addison-Wesley, Cisco Press, IBM Press, Pearson IT Certification, Prentice Hall, Sams, and Que. Topics include IT Certification, Programming, Web Development, Mobile Development, Home and Office Technologies, Business and Management, and more. View all LiveLessons on InformIT at http://www.informit.com/livelessons.

Table of Contents

  1. Introduction
    1. Learning AngularJS: Introduction 00:09:15
  2. Lesson 1: Getting Started
    1. Learning objectives 00:00:53
    2. 1.1 Understand what AngularJS is and why it's important 00:05:26
    3. 1.2 Install AngularJS 00:04:10
    4. 1.3 Install Bootstrap 00:05:17
    5. 1.4 Write your first AngularJS application 00:10:26
    6. 1.5 Look at what you will build with AngularJS 00:02:41
    7. 1.6 Understand what you should know before you begin 00:10:24
    8. 1.7 Stay up to date and find the help you need 00:02:03
  3. Lesson 2: Working with AngularJS Building Blocks: Binding, Directives, and Filters
    1. Learning objectives 00:01:03
    2. 2.1 Perform more useful data binding with repeating 00:09:16
    3. 2.2 Introduce filters to your bindings 00:03:17
    4. 2.3 Combine data binding and filters in your application 00:03:16
    5. 2.4 Understand more about repeating and directives 00:05:25
    6. 2.5 Improve the UI of your sample application 00:11:44
  4. Lesson 3: Using Controllers and Views
    1. Learning objectives 00:01:03
    2. 3.1 Understand how AngularJS organizes MVC 00:08:53
    3. 3.2 Use controllers and forms to modify your data 00:14:36
    4. 3.3 Perform data validation and communicate between views and controllers 00:13:27
    5. 3.4 Understand validation a bit more 00:11:36
    6. 3.5 Set up a simple web server (Mac and Linux) 00:03:28
    7. 3.6 Set up a simple web server (Windows) 00:02:11
    8. 3.7 Set up multiple views and controllers 00:04:39
  5. Lesson 4: Putting It All Together with Modules
    1. Learning objectives 00:01:00
    2. 4.1 Understand the core components of AngularJS modules 00:04:27
    3. 4.2 Understand routes and add them to your apps 00:08:46
    4. 4.3 Understand how to lay out your applications 00:09:05
    5. 4.4 Add an album view to your sample application 00:15:14
  6. Lesson 5: Loading and Saving Data
    1. Learning objectives 00:01:04
    2. 5.1 Understand the various ways you can provide data in Angular—Part I: Services 00:22:17
    3. 5.2 Understand the various ways you can provide data in Angular—Part II: Factories, constants, and values 00:09:36
    4. 5.3 Use factories and services with remote data 00:35:52
    5. 5.4 Upload Image files from your AngularJS application 00:41:42
  7. Lesson 6: Filling in the Blanks — Filters, Directives, Cookies, and More
    1. Learning objectives 00:00:59
    2. 6.1 Write your own filters 00:17:46
    3. 6.2 Write your own directives I: simple directives 00:09:38
    4. 6.3 Write your own directives II: scope and user interface 00:11:28
    5. 6.4 Work with cookies in your app 00:05:37
  8. Lesson 7: Wrapping Up
    1. Learning objectives 00:00:51
    2. 7.1 Complete your application and look to what's next 00:13:06
    3. 7.2 Implement network access with JSONP 00:09:04
    4. 7.3 Test your application with Karma 00:27:11
  9. Summary
    1. Learning AngularJS LiveLessons: Summary 00:02:34