Mastering AngularJS UI Development

Master the art of creating amazing, reliable, and dynamic user interfaces for your AngularJS applications
4.2 (24 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.
426 students enrolled
Sale Ends Today!
84% off
Take This Course
  • Lectures 22
  • Length 1.5 hours
  • Skill Level Expert Level
  • Languages English
  • Includes Lifetime access
    30 day money back guarantee!
    Available on iOS and Android
    Certificate of Completion
Wishlisted Wishlist

How taking a course works


Find online courses made by experts from around the world.


Take your courses with you and learn anywhere, anytime.


Learn and practice real-world skills and achieve your goals.

About This Course

Published 9/2015 English

Course Description

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.

What are the requirements?

  • This video course is for those who are already familiar with AngularJS.

What am I going to get from this course?

  • 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

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.

What you get with this course?

Not for you? No problem.
30 day money back guarantee.

Forever yours.
Lifetime access.

Learn on the go.
Desktop, iOS and Android.

Get rewarded.
Certificate of completion.


Section 1: Back to Basics – Learning the Best Practices

This video will offer an overview of the course.


Learn how to scaffold an AngularJS application using best practices.


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


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

Section 2: Building a TV Show Tracker App

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


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


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.


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

Section 3: Writing Components with Directives

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


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


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

Section 4: Using AngularUI Bootstrap to Enhance Your App

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


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


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

Section 5: Building Attractive Forms with Validation

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.


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


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.


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

Section 6: Troubleshooting and Enhancements

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.


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.


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.


Recapping what we covered in the course.

Students Who Viewed This Course Also Viewed

  • Loading
  • Loading
  • Loading

Instructor Biography

Packt Publishing, 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.

Ready to start learning?
Take This Course