Mastering AngularJS UI Development
4.3 (27 ratings)
Instead of using a simple lifetime average, Udemy calculates a course's star rating by considering a number of different factors such as the number of ratings, the age of ratings, and the likelihood of fraudulent ratings.
472 students enrolled
Wishlisted Wishlist

Please confirm that you want to add Mastering AngularJS UI Development to your Wishlist.

Add to Wishlist

Mastering AngularJS UI Development

Master the art of creating amazing, reliable, and dynamic user interfaces for your AngularJS applications
4.3 (27 ratings)
Instead of using a simple lifetime average, Udemy calculates a course's star rating by considering a number of different factors such as the number of ratings, the age of ratings, and the likelihood of fraudulent ratings.
472 students enrolled
Created by Packt Publishing
Last updated 9/2015
Curiosity Sale
Current price: $10 Original price: $95 Discount: 89% off
30-Day Money-Back Guarantee
  • 1.5 hours on-demand video
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
What Will I Learn?
  • Comprehend the process of creating quality AngularJS UI from scratch to completion
  • Understand key concepts related to building AngularJS UI, such as interacting with APIs, writing reusable components, and persisting user data
  • Explore AngularJS UI Bootstrap and implement its key features into your applications
View Curriculum
  • This video course is for those who are already familiar with AngularJS.

Developing powerful, interactive modern web applications is a complex endeavor. Enter AngularJS, the framework par excellence which has clearly emerged the winning solution, due to its simplicity and extensive range of features, including Two Way Data-Binding and Directives. These features enable a developer to write flexible and testable front-end code, and ultimately to build efficient, photogenic web applications.

Though documentation and online tutorials are available to develop with AngularJS UI, it can be difficult to locate the resources to really take advantage of all the available options for great UI design. Mastering AngularJS UI Development takes you step by step through core AngularJS concepts by demonstrating the build of a TV Show tracking app, before showing you how to enhance and beautify the UI.

Firstly, you will start out with a skeleton application and apply best practices for creating controllers and implementing services. Then, you will learn how to connect the application to an API and add various features to it such as search, tracking, and rating functionalities. You will also learn how to persist data with local storage. Here we move on to beautifying your app by creating various components and reusing them with the help of directives. You'll build attractive forms to validate your users and make your app secure. After that, you will learn different ways to troubleshoot issues with routes, two-way bindings, animations, and isolated scopes.

With best practices engrained throughout, and many advanced concepts explained, after this course you will be able to build better, fantastic-looking AngularJS applications.

About The Author

Leon Revill has over three years of commercial AngularJS development experience and is currently working as a Mobile Architect building complex mobile platform applications using AngularJS and other modern web technologies. As an AngularJS mentor at Thinkful, he tutors students all around the world, taking them from AngularJS novices to ninjas in just a few months.

Who is the target audience?
  • This video course is for those who are already familiar with AngularJS, but are interested in honing their UI development skills with the framework, using AngularUI and other methods.
Students Who Viewed This Course Also Viewed
Curriculum For This Course
22 Lectures
Back to Basics – Learning the Best Practices
4 Lectures 14:44

This video will offer an overview of the course.

The Course Overview

Learn how to scaffold an AngularJS application using best practices.

The Project Structure and Scaffolding

Prevent scope bleed and undescriptive code by implementing controllers using the ControllerAs syntax.

Creating Controllers Using AngularJS Best Practices

Interact with APIs and share data throughout the application using well-structured services.

Implementing Services Using Best Practice Methods
Building a TV Show Tracker App
4 Lectures 17:42

This video will explore how to interact with an API and deal with the response.

Preview 03:10

This video teaches the viewer how to allow users to search for their favorite shows.

Building a Search Feature UI

Now the user can search for shows. Give them the option to select from all shows and track their selection, which will then be added to a My Shows page.

Adding the Tracking Functionality

In this video, the user will learn how to cause the application data to persist, using Local Storage to save the data.

Persisting User Data Using Local Storage
Writing Components with Directives
3 Lectures 14:15

Understand the complex AngularJS directive API and how to create custom directives.

Preview 06:03

Encapsulate the show overview functionality so that it can easily be reused throughout the application.

Creating a showOverview Component

Create a reusable component that encapsulates complex logic to display which of the user's tracked shows is showing next.

Creating a next-on Widget
Using AngularUI Bootstrap to Enhance Your App
3 Lectures 09:55

Allow the user to get a hint of the available TV shows before submitting their search.

Preview 02:54

Permit the user to navigate through multiple pages worth of search results as opposed to a single, large page.

Adding Pagination

Let the user add their own personal rating to their tracked shows.

Adding Ratings
Building Attractive Forms with Validation
4 Lectures 17:53

Hardcore TV show enthusiasts will appreciate the ability to track their thoughts as they watch a show, so we will add this to our TvTracker app.

Preview 08:00

HTML forms can be a hassle to implement when you need robust client-side validation. Learn how AngularJS makes this easier.

AngularJS Form Basics

There may be times when the standard form directives don't meet your requirements. Understand how you can extend this functionality to provide custom validation mechanisms.

Adding Custom Validation to AngularJS Forms

Displaying error messages within forms to users using clever animations can enhance the user experience. Understand how easy this is to do using AngularJS.

Animating a Form Error Message
Troubleshooting and Enhancements
4 Lectures 12:34

As an AngularJS developer, you may spend many hours debugging because your data isn't updating as you would expect. This video will provide a better understanding of AngularJS's two-way data binding, and AngularJS objects can go a long way to prevent these kinds of issues.

Preview 02:43

When you are dynamically loading images from an API on a slow connection, even if you are able to use small images, you will often get the dreaded waterfall effect.

Horrible Waterfall Effect on Images with Slow Connections

Now that the user has the ability to freely change URL parameters, they can often break your applications easily by requesting for resources that don't exist.

Dealing with 404s

Recapping what we covered in the course.

Wrapping Up
About the Instructor
Packt Publishing
3.9 Average rating
7,297 Reviews
52,203 Students
616 Courses
Tech Knowledge in Motion

Packt has been committed to developer learning since 2004. A lot has changed in software since then - but Packt has remained responsive to these changes, continuing to look forward at the trends and tools defining the way we work and live. And how to put them to work.

With an extensive library of content - more than 4000 books and video courses -Packt's mission is to help developers stay relevant in a rapidly changing world. From new web frameworks and programming languages, to cutting edge data analytics, and DevOps, Packt takes software professionals in every field to what's important to them now.

From skills that will help you to develop and future proof your career to immediate solutions to every day tech challenges, Packt is a go-to resource to make you a better, smarter developer.

Packt Udemy courses continue this tradition, bringing you comprehensive yet concise video courses straight from the experts.