Learning Path: Production Angular

This video will give users a good overview of what they will learn throughout the course. Viewers will be presented with some concept keywords that they should learn to master the course

• Author introduction
• Reasons for selecting AngularJS
• Overview of course sections 

Viewers need to make a basic Angular application. If they have an existing web page on which they wish to extend, we will guide them to making that page into an Angular application.

• Include the Angular script file
• Inform Angular to take charge of the page (Add ng-app to the body)
• Declare the application and its components 

Viewers need to create a basic Angular application. We will assist them in building a well-structured project from scratch.

• Pick a seed project or scaffolding tool
• Clone a project or install Yeoman
• Get started with a pre-existing structure 

Viewers need to be able to display data in the template. This is done via a controller, which they will learn to define here.

• Add the ng-controller directive to the HTML markup to make it in charge of that markup
• Defining the controller as an extension of the app
• Inject $scope as an argument of the controller function, which will be the variable that will hold accessible data 

For dynamic web pages, the data comes in the form of objects available in JavaScript, which can be modified, filtered, and so on. Viewers will want to see that data displayed on various parts of the page.

• Define data in the controller on the $scope variable
• Declare data binding in the template using {{ }}
• Declare data binding in the template using ng-bind 

Displaying the same markup for each item of a list is a very common task, for example, the DVD cover and the title of a list of movies. This can be done by defining a repeater to iterate over the data.

• Define the data and make it available on $scope, and hence in the template
• Use an ng-repeat directive to iterate over the list
• Define the markup that will be repeated for each item 

A controller allows to display data and read data from user input, but is limited to a given area, which viewers need to be aware of.

• Show the relationship between the DOM and the scope of a controller
• Show that several controllers can be added to control various parts of the markup
• Show an area where the controller will not have any effect 

Angular needs to know which part of the template will receive user interactions and where to read input from. Adding interactions takes care of it.

• Add ng-model to the inputs and select list
• Add ng-click to buttons
• Add ng-blur and ng-keyup to some inputs 

User actions need to trigger actual JavaScript functions, so we need to define them in the controller.

• Create some default values for ng-model defined in the template
• Create functions to be called 'on click', 'blur', and 'key up'
• Read $scope values 

When users interact and the corresponding actions get triggered (on click, blur, and so on), we often need to read what the current values are for inputs, selects, and so on. This is done by reading from $scope.

• Show how Angular expressions are helpful
• Read an entire object on $scope
• Show how to watch out for mutable object pitfalls 

Developers will often want to easily show or hide some parts of a view, depending on certain logic (for example, validation error messages). Using ng-show and ng-hide makes this possible.

• Add the ng-show and ng-hide statements to the template
• Control the logic via the controller
• Show that logic expressions can be a value, a call to a function, or even a more complex statement 

The content part of the application needs to be routed to various views. You will learn about the components that take care of this routing, namely ng-view, .config, and $routeProvider.

• Ensuring that ng-route is available
• Understanding the ng-view directive
• The .config, $routeProvider, and route definitions 

Developers need to create new routes. We'll learn all the information required to create new routes.

• Make a call to $routeProvider .when method in app.js
• Setting a template and creating it
• Setting the corresponding controller and creating it 

Be able to recognize URLs even though one value changes, for example, /movie/3 and /movie/5, without having to declare all. Also, read the value in the controller for processing.

• Defining a new route with parameter
• $routeParams to read parameter value
• Use the value to display the corresponding data 

Create links to either redirect directly or perform some JavaScript test first and then redirect programmatically. Use ng-href or $location.path.

• Use ng-href
• Use ng-click and $location.path
• HTML5 mode and Angular UI router 

Data mostly can’t be hardcoded into applications. Instead, it is usually loaded from a server database. You will learn how to make simple calls to an API.

• Injecting the $http service
• Making a simple $http.get call
• Reacting to success and using the data provided to display in the template 

Things do not always go as planned when making AJAX calls. That is why success and error callbacks receive more than just the output data.

• Handling errors via .error
• Using status code and headers arguments in .error
• Reviewing other arguments passed in .success 

We need to handle GET requests with queries and other methods, $http.get’s second argument, and $http.post

• Building the options dictionary for use in $http.get
• Making POST calls, $http.posts and passing POST data
• Setting headers on requests 

Browsers have strict security policies when it comes to cross-domain AJAX calls. JSONP allows us to circumvent those if the API supports it.

• A reminder of the cross-domain policy, CORS, and JSONP
• Using $http.jsonp to make cross-domain calls when CORS is not enabled
• The need for a callback and the JSON_CALLBACK Angular keyword 

As applications grow, they become more difficult to handle, with risks of repetitions, difficulty to debug code, and so on. Principles such as DRY and separation of concerns help avoid these pitfalls.

• Reviewing code and highlighting structure issues
• Understanding separation of concerns – what it is and why it is important
• The data layer level in Angular: Services 

Loading of data needs to be handled by a service, not in each controller. We will set a factory service to do that.

• Presenting the different ways to generate a service: value, service/factory, and provider
• Using a factory function and coding the service object itself
• Factory functions allow us a "private" area, we'll learn what can it be used for, and implement caching as a practical example  

The service has been created in a file different from the controllers. How will we be able to access its features? The solution is a built-in system of dependency injection that allows to request services simply by name.

• Dependency-injecting the service using its name
• Fixing the existing code to use service abstraction
• The dark magic of relying on argument names for service injection, and how the new Angular notation deals with it 

Although we add movies, they were immediately discarded upon page change. And although this would be more of backend kind of responsibility, we can implement a local version of persistence using a localStorage module.

• Synchronous versus asynchronous actions, results, and making the right decision
• How we can use a localStorage module as a storage, and how it affects the existing code
• Making a localStorage module appear asynchronous by using promises and the $q service 

An overview of the course will be presented, and the presenter will be introduced.

• Demonstrate the app that we will have built on completion of this course
• Describe the technologies and libraries we need to be familiar with
• Outline the steps we will perform to understand the concepts 

How Bootstrap and AngularJS improve the classic HTML Input field?

• Show bootstrap.com, the download page, and how to look up things in the documents
• Show angularjs.org, the download page, and how to navigate the documents
• Take a look at the examples on the angularjs.com home page that explains how to integrate AngularJS and Bootstrap  

Set up a very basic AngularJS and Bootstrap web page as a basis for the rest of the course.

• Build the basic HTML page, add libraries, standard bindings for AngularJS, and basic classes from Bootstrap
• Describe the difference between modules, controllers, and directives in JavaScript
• Write the code to demonstrate data being passed back and forth from JavaScript to the front page 

Introduce the input as read by Bootstrap and AngularJS.

• Show the document page on angularjs.org
• Add some input to our page with the Bootstrap styling
• Demonstrate how the data is being stored 

Use Bootstrap and AngularJS to show the user feedback on the input’s validity.

• Get the styling we want from the Bootstrap site and make it appear on our page statically
• Describe ng-class by referencing the AngularJS documents
• Add the code to make the validations appear/disappear at the correct time 

What is ngModel and how can it be used?

• Examine the ngModel documentation
• Specify where we have used ngModel in the code
• Explore what goes on in validation 

Integrating open-source libraries into your application.

• Get the library from the site
• Add dependencies to the project, touching on Directive Insertion
• Display the elegance of the site 

Use AngularJS and Bootstrap to prevent a user from clicking on a button when the form is invalid.

• Look at how AngularJS and Bootstrap help in disabling buttons
• Learn how to detect the valid state of the form
• Create a button that is disabled when the form is invalid, and enabled when the form is valid 

Understanding form and ng-submit and how they relate to how the data is sent.

• Read up on form and ng-submit on the AngularJS site
• Set up our form to dump out the data that we want to submit
• Make sure that our form isn’t being submitted when it’s invalid 

How to submit a form via Ajax over the $http service and how to simulate this for testing?

• Look at the $http service documentation
• Set up a simulation for posting to a service
• Submit the form data over the $http service 

Use feedback to display the current state of the form and its submission process.

• Prevent multiple Ajax calls until a response is received
• Show the user some better feedback on what the form is doing
• Display error messages if the post data is incorrect 

What is routing and why do we need it?

• Show an example of what ng-route does
• Look at the documents for how to set up routing
• Set up our current app to be route-compatible 

How to make a route change and react to it?

• Set up a second route
• How to trigger a route change
• How to load data with the route 

Use a service to share data between routes.

• Build a simple data service
• Learn how to inject the data into the controllers
• Use the service to show the input e-mail on the second page 

Use CSS animations to give nice transitions to route changes.

• Look at the animation section of ng-route
• Animate our route changes 

Use ng-repeat to display an array of objects.

• Read the ng-repeat documets and adapt it to a table
• Read the table documents in Bootstrap to apply better looking styling to the data  

Use the filters to display the data in a more user friendly way.

• Use in-built filters to display the data in a more friendly way
• Use filters to order the table
• Use filters to filter the table 

Using buttons and input inside ng-repeat to interact with the data.

• Use a checkbox column to output a list of checked names
• Add a button onto each row to delete the row
• Use nested ng-repeat 

What is AngularStrap and how do we use it?

• Introduction to the angular-strap site, showing the components in Bootstrap that are being replaced
• Add angular-strap to our application
• Use popovers to explain the login form using help buttons

Using AngularStrap to create a better user interface for the user.

• Explain ngTemplates using the documents
• Use a modal triggered from the controller to display information about the report page
• Use a typeahead to help fill out the name filter input

This video will offer an overview of the course.

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 

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 

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 

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 

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 

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 

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 

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 

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 

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 

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 

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 

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 

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 

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 

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 

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 

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 

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 

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 

Recapping what we covered in the course.

• Wrap up the course
• Provide further references 

This first video will provide information about what we are going to cover in this course.

Including snippets of HTML can be done in many ways, but an AngularJS directive is one of the best.

• Add an SVG image using <img>, pasting it directly, and ng-include
• Look at some downsides of using any of these solutions
• Use a prebuilt helmet directive to do the same thing  

Getting started with directives seems difficult. We will show you that a basic directive is only a handful of code.

• Creating a super-simple "Hello World" directive
• Learning how AngularJS directive naming works
• Creating a helmet directive that uses templateUrl to reference an external file 

Directives often need to be individually configured. By having an isolate scope on the directive, it’s easy to do so.

• We can add "scope: { }" to hide the scope outside our scope
• We look at a variety of bindings that we can use inside the scope
• Finally, we add a single binding to the HelloWorld! directive and demonstrate its use 

We want to be able to create attributes on our directives. Understanding the two most common kinds of bindings makes this easy.

• Understanding the difference between @ and = is easy with some examples
• We can assign values inside a directive, which can then be assigned to a variable outside the directive
• We can work around some problems we might have using "?" in a binding or $parent

Understanding the basics of scope isn’t always enough. You’ll learn just a few more things to become power users of scope.

• Look at how =* can be used when dealing with lots of content
• Learn a third way to create a scope on a directive—one that inherits from the parent scope rather than hiding it
• Use the AngularJS "controllerAs" syntax with a directive 

Binding data into and out of a directive is great, but sometimes we need interactivity. The & operator gives us a way to bind functions and use them.

• Learn that using the & operator to bind a function is as easy as @ and = operators
• Learn that we can pass information from inside our directive to the function
• Demonstrate that our directive can adjust to whether a function was bound or not 

Transclusion is poorly understood (and sometimes poorly explained). The solution is a simple, straightforward explanation and demonstration.

• A transcluded directive is explained via the simile of a picture frame
• Then a simple directive is built in just a handful of lines
• Finally, the directive is demonstrated with both HTML and AngularJS directives as the filling

Transclusion is important, and people need to be comfortable with it. We demonstrate it further by building a UI element and a variety of content for it.

• A simple directive that can be used as a player UI in our game is built
• Then a series of simple directives that can be used inside or outside the UI are built
• Finally, the pieces are put together and I really hammer home the idea that this set of stuff gives us a real domain-specific language (DSL) with which we can extend HTML

Directives can be declared in multiple ways, but it might not be clear how to restrict that. Explaining the different kinds of directive restrictions helps.

• Exploring the two basic ways in which directives are usually used
• Understanding the two other ways of using directives from HTML (class and comment) and showing how to make them work
• Sometimes, you want to specify that a directive is to be used only as an element or only as an attribute, and "restrict" helps you do that

You can’t accomplish everything you need to do in directives with just the scope and templates. We’ll introduce functions you can add to handle everything else.

• Explore the various functions available for a directive during its life cycle
• We perform an experiment to see when different functions are run
• Finally, we concentrate on the functions we need the most—80 percent of the time

Sometimes, you will want to service or data in your directives. Dependency injection will come to the rescue, but some functions don’t need it.

• We see the two spots at which we can inject dependencies in a directive, and items specific to a directive that can be injected
• Then we look at the link function and notice that it receives a commonly used set of parameters without injection
• We briefly talk about why dependency injection isn’t just for other parts of our code 

Understanding small snippets of code isn’t the same as understanding a complete program. So, we look at a working program with more moving pieces.

• We examine the UI of a working version of the racetrack game
• Then we take a look at the HTML5 Canvas service
• Next, we see how this service is used by a directive to draw the graphical track  

Sometimes, we want directives to do more than just wrap one another. We’ll use require to get access to another directive.

• The idea of how directives can work together via controllers is explained
• Just as scopes have attributes for describing bindings, require offers a set of attribute characters as well for finding controllers
• By building an example of two directives that interact via a shared controller, we see how directives can connect 

It’s great to understand "require" from an explanation point of view, but it’s better to see it being put to use.

• In a more realistic example of directive coordination, we demonstrate a second directive attached to our racetrack directive
• How the directives work together is explained in depth
• We close the course with a look at some ideas for further exploration, the source code, and an overview of all the material covered

To use all the tools that we require to build our application and deploy it, we need to install some things first.

• Install NodeJS
• Set up global NodeJS modules
• Add Heroku Toolbelt to our system 

To get started, we’ll need a good starting point with a clear separation of concerns for our codebase architecture.

• Initialize the Bower manifest
• Initialize the npm manifest
• Add local Gulp and create a basic task 

It’s always nice to see what our hard work will amount to. This is where you get to see the final application that we’ll create along the way.

• Explain the concept of the application
• Show what the final application will look like 

Manually testing your code for intended behavior is time-consuming and tedious. We will automate this process with Karma and JSHint.

• Add Karma and configure it
• Add JSHint
• Verify that all tasks work as intended

BrowserSync allows us to create a LiveReload server with additional functionality, while SASS will make sure we can author our CSS in an easy way. This will result in a fully automated build system that we can use while developing.

• Add BrowserSync to serve our application in a local environment
• Add SASS compilation
• Add LiveReload and watcher tasks for SASS, HTML, and JS files 

We’ll use localStorage to store data for some persistence. Think of data like favorite animals, past matches, and so on.

• Add Angular dependencies and bootstrap the application
• Link the external localStorage module
• Implement the storage service 

Our application obviously needs some data. We’ll add a list of animal data and write a service to query that data.

• Add animal data
• Create test spec for Animals service
• Construct Animals service to pass the test specifications 

A matchup obviously needs a random opponent and a random terrain. That‘s exactly what we’re going to do here.

• Add methods to get a random animal and terrain
• Write a specification to generate a matchup
• Implement a method to generate a matchup with random animal and terrain 

Every animal is assigned a couple of statistics, along with their terrain performance. We’ll need to calculate their total score to determine a winner.

• Calculate the combat score
• Calculate the terrain influence
• Combine the combat score and terrain influence to calculate the total score 

Now that we have all the separate pieces, we’ll combine them to determine a winner in a matchup.

• Write the specification to determine the winner
• Implement the method to determine the winner
• Save the match results to storage 

We have all the logic needed to generate a match, but we can’t display it to the user yet. Time to create a view and show that information.

• Add Angular-UI router to project
• Scaffold the Arena view and controller
• Generate a matchup with slight delay and show it in the view 

We need to display the animal and terrain information in an easily digestible way. We’ll use directives for this purpose so that we can re-use them later on, if needed.

• Add an animal card directive
• Add a terrain directive 

After we’ve generated a matchup containing an opponent and a terrain, we need to select our own animal to fight with. We’ll implement that in this section.

• Add an animal grid directive
• Add the logic for selecting our animal
• Add the logic for fighting the match 

Instead of starting the application in the Arena view, having a dashboard with some metadata would be a lot cooler.

• Scaffold the dashboard controller and view
• Add methods to animals and arena service for the home view data
• Add data to the home view 

If we get any errors in the application, we’d like to know about it. Using Bugsnag will allow us to track any JS errors that might occur.

• Integrate Bugsnag
• Track AngularJS errors in Bugsnag
• Verify that Bugsnag tracks the errors 

Our production version will use minified source and vendor code, along with optimized CSS. We’ll create a new app folder that contains these production-ready assets.

• Bundle source and vendor files and replace the script references
• Optimize CSS with autoprefixer and CSSO
• Copy all files to the production folder 

Now that our application is ready for production, all that’s left to do is host it somewhere. We’ll use Heroku and NodeJS to serve the application.

• Create the Heroku application with a custom Gulp build pack
• Add basic ExpressJS server and Heroku Procfile
• Deploy to Heroku 

We will briefly go over the entire application to see what we’ve accomplished, and for additional information we will go through some links and references.

• A quick run-through of our entire application
• Go through some links and references 

We briefly discuss a couple of problems that we experienced during the development of the application and any future steps the reader might take in order to improve the application.

• Review some problems that may be encountered
• A look into important considerations to improve the application