Take this
course

Software Development / Web Development

Mastering AngularJS UI Development

Master the art of creating amazing, reliable, and dynamic user interfaces for your AngularJS applications with the help of a real-world application

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.

Full details

Curriculum

  • Back to Basics – Learning the Best Practices
    The Course Overview
    This video will offer an overview of the course.
    2:49
    The Project Structure and Scaffolding
    Learn how to scaffold an AngularJS application using best practices. • Get an overview of the TvTracker application project structure • Explore the different sections of the application and see how the routing is configured for each page • Discuss how to integrate AngularUI into the application
    3:36
    Creating Controllers Using AngularJS Best Practices
    Prevent scope bleed and undescriptive code by implementing controllers using the ControllerAs syntax. • Create a controller for each section of the TvTracker app • Learn how to use the ControllerAs syntax and understand its benefits and other controller best practices • Specify the controllers in order to use them within the app routing
    3:04
    Implementing Services Using Best Practice Methods
    Interact with APIs and share data throughout the application using well-structured services. • Understand the different AngularJS service types • Create our first service • Use the value service type to keep the navigation state across pages
    5:19
  • Building a TV Show Tracker App
    Providing TV Show Search Functionality
    This video will explore how to interact with an API and deal with the response. • Interface with the TMDB API using the $http service • Provide a method to retrieve the user query and submit the request • Store the response ready to be displayed within a UI
    3:11
    Building a Search Feature UI
    This video teaches the viewer how to allow users to search for their favorite shows. • Make the show service functions available to the search controller • Create a simple search form to allow the user to enter their search query, and pass this query to the search method within the show factory • Deal with the search results and present the show information on the screen in an attractive user interface
    5:57
    Adding the Tracking Functionality
    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. • Create a store factory service. It will hold the user's selected shows • Update the search UI to provide tracking and untracking functionality • List the tracked shows in the My Shows page
    5:30
    Persisting User Data Using Local Storage
    In this video, the user will learn how to cause the application data to persist, using Local Storage to save the data. • Create a save method within the store factory to add the tracked shows to the Local Storage • Use this method every time a show is added or removed • Load any saved data from the local storage back to the store factory on Bootstrap
    3:08
  • Writing Components with Directives
    Directive Basics and Best Practices
    Understand the complex AngularJS directive API and how to create custom directives. • Know what problem directives solve • Find out the options available • Discuss when to use which options and what directive components we will be creating for the TvTracker app
    6:04
    Creating a showOverview Component
    Encapsulate the show overview functionality so that it can easily be reused throughout the application. • Create a simple showOverview directive • Move the showOverview HTML and JavaScript from the My Shows and Search pages into the directive • Include the showOverview directive where needed
    3:07
    Creating a next-on Widget
    Create a reusable component that encapsulates complex logic to display which of the user's tracked shows is showing next. • Create a next-on directive component • Use multiple API calls to gather the required data to determine which of the user's tracked shows will be shown next • Display this information within a widget that can be added anywhere in the application
    5:07
  • Using AngularUI Bootstrap to Enhance Your App
    Adding Suggested Search
    Allow the user to get a hint of the available TV shows before submitting their search. • Learn about the AngularUI Bootstrap typeahead directive • Add the AngularUI Bootstrap typeahead directive to our search page • Configure the directive to provide typeahead or the suggested search functionality in our search page
    2:55
    Adding Pagination
    Permit the user to navigate through multiple pages worth of search results as opposed to a single, large page. • Learn about the AngularUI Bootstrap pagination directive • Learn how to use the search API to support the pagination directive Implement pagination in the TvTracker application
    3:58
    Adding Ratings
    Let the user add their own personal rating to their tracked shows. • Understand how to use the rating directive provided by AngularUI • Integrate this directive into our own show-overview directive • Persist the user’s personal ratings to the local storage with the tracked shows
    3:05
  • Building Attractive Forms with Validation
    Creating a TV Show Diary Feature
    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. • Extend the show component to display the number of diary entries for each show, and provide a link to add and view entries • Build on top of the show page section to display a list of current diary entries for each individual show • Implement a basic form to allow the user to add a new diary entry to their tracked shows
    8:01
    AngularJS Form Basics
    HTML forms can be a hassle to implement when you need robust client-side validation. Learn how AngularJS makes this easier. • Implement basic validation on the diary entry form • Add the ngMessages module and understand how to use it to display error messages • Utilize Bootstrap CSS classes and the ngClass directive to style form inputs based on validity
    4:21
    Adding Custom Validation to AngularJS Forms
    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. • Create a form directive to provide custom validation on form inputs • Implement custom validation to restrict the number of words allowed within an input • Utilize ngMessage with the custom validation directive to provide a meaningful output for the user
    2:52
    Animating a Form Error Message
    Displaying error messages within forms to users using clever animations can enhance the user experience. Understand how easy this is to do using AngularJS. • We include the ngAnimate module in the TvTracker app so that we can easily add animation to our elements and forms • Understand where to place animations so that you can animate the error messages • Use CSS animations alongside ngAnimate to provide the animations
    2:43
  • Troubleshooting and Enhancements
    Two-way Data Binding Not Working
    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. • See a live example where the bound data is not working as you might expect • Understand the difference between primitive and complex JavaScript objects and why it matters • See how using the controller as syntax easily solves this issue
    2:44
    Horrible Waterfall Effect on Images with Slow Connections
    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. • Understand what the waterfall effect is and why it happens • Learn how this can be solved • Use a third-party AngularJS module to preload images within the TvTracker app
    3:08
    Dealing with 404s
    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. • Learn how to catch missing resources within a route resolve • Create a 404 page and set it as the default route • Redirect the user to the 404 page when they request for a missing resource
    3:06
    Wrapping Up
    Recapping what we covered in the course. • Wrap up the course • Provide further references
    3:40

Skills

  • AngularJS

Similar Courses

More Courses by this Instructor