Learning Path: Production Angular
This Production Angular learning path will put you on the path to building a dynamic page and render lists of items in one line of code. You will learn to efficiently handle routing between different pages of an application, use AngularJS and Bootstrap to validate and display feedback on forms and do lots more
- Self-paced with Life Time Access
- Certificate on Completion
- Access on Android and iOS App
Build and ship with the first version of AngularJS
Not everybody has the luxury of upgrading to Angular 2 right off the bat. This Learning Path takes you an accelerated journey through Angular 1 so that you can tackle whatever application you might need to maintain or improve without having to dive into a complete refactor.
About the Authors
Mathieu Chauvinc
- Mathieu Chauvinc is a Managing Director at Red Ape Solutions, where he aspires to keep the company at the bleeding edge of web technologies. On a daily basis, he leads the tech team of 15 and collaborates with them in building complex single page applications and neat hybrid mobile apps. He has been involved in web technologies for over a decade, from Django to Node.js and Go, SQL to NoSQL, Mootools to Angular 2, continuously trying to keep the right balance between the excitement of new frameworks and the stability of proven ones. He always has a special place in his heart for Python and Django.
- He holds a Master’s in Engineering from the German University Karlsruhe and a Master’s in Engineering from the French ENSAM (Paris). Despite an engineering background, he has always had a passion for knowledge sharing, which has followed him until today, and he regularly conducts corporate or free training sessions on various IT topics in his country of residence, Malaysia.
- He is also the author of several video courses, published by Packt, such as Learning JavaScript Promises and Introducing Ionic 2. He has recently enjoyed the chance of reviewing courses for Packt.
Simeon Cheeseman
- Simeon Cheeseman is a JavaScript developer primarily focussed on AngularJS and NodeJS. He started off his career coding Coldfusion HTML pages before teaching himself AngularJS and later NodeJS as they started getting traction. He has been employed building a variety of web-based applications from content management systems, phone bill re-rating programs, customer resource management, and billings systems. He is currently heavily involved in several open source AngularJS projects and when he has the time, he helps out on StackOverflow and Wizperts.
Leon Revill
- 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.
- Leon is also interested in writing free articles and tutorials covering a wide range of web development topics via his blog http://www.revillweb.com.
John Munsch
- John Munsch is a professional software developer with over 29 years of experience. For the last three years, he's been leading a team building modern web app front ends with AngularJS after a couple of years spent doing the same kind of work with Backbone.js, Underscore.js, and Handlebars.js. He's definitely enjoying a life filled with JavaScript, AngularJS, and Node.js after more than 20 years spent in the Java, C++, and C world.
- Prior to this course, he developed a video course called Learning AngularJS Directives, also for Packt Publishing.
Thomas Tuts
- Thomas Tuts is a web developer who is completely in love with JavaScript, HTML, build systems, and AngularJS. He gets a great sense of joy when he’s helping people out with their code or mentoring them. He is an active AngularJS community member on the #angularjs IRC channel, usually hanging out to help people when he can. He is currently working as a Software Engineer, developing an application for content marketers to increase their performance.
- Requires a working knowledge of JavaScript
- Kick-start your application in minutes by scaffolding it entirely with Yeoman
- Build a dynamic page and render lists of items in one line of code
- Program Reactions on user-interactions such as clicks, selection change, blur, and more
- Easily validate data present in forms, from simple required fields to complex custom form validation
- Efficiently handle routing between different pages of an application
- Load data from external sources in the background by using AJAX calls with Angular
- Master the use of performing actions asynchronously by creating worker threads
- Explore the documentation for AngularJS and Bootstrap
- Navigate through the basic steps to get going with AngularJS and Bootstrap
- Use AngularJS and Bootstrap to validate and display feedback on forms
- Display multiple views without needing to refresh the page
- Implement AngularJS’ AJAX POST and GET functions to send and receive data
- Excel at one way and two way bindings to display and store data from the user
- Display repeating data dynamically
- Create filters to format data according to your expectations
- Utilize third-party modules to improve the look and feel of your application
- Build a richly-featured application with dynamic functionalities and a stunning UI
- Employ project scaffolding and use naming conventions in an optimal way
- Gain best practices to perform various tasks such as creating controllers to work with scopes and implement services
- Configure and implement routing to create content-specific URLs for your application
- Persist user data with local storage
- Understand how to write components using directives to build reusable features for your application
- Make use of various AngularUI Bootstrap features such as pagination, ratings, and auto-suggest to enhance the application
- Implement attractive web forms with validation to secure your AngularJS projects
- Solve common AngularJS issues such as two-way binding issues and slow-loading images
- Create a directive to replace ng-include and make code more efficient
- Implement isolate scope in the coding to build reusable directives
- Understand the difference between various scope bindings to make flexible directives
- Establish the communication between directives and the app by binding them with functions
- Discover and apply the concept of transclusion to make better directives
- Learn how to specifically use a directive as an element or attribute
- Explore and use the different functions available for directives
- Connect directives to create powerful sets which work together
- Test your code with Karma to automate the testing process
- Use JSHint to lint your code and adhere to best practices
- Explore Gulp to serve a BrowserSync server and compile your SASS files
- Leverage localStorage to add a basic form of persistence to your application
- Prepare the AngularJS code for minification
- Optimize CSS and JS assets for production
- Add monitoring tools to your application to track possible application errors
- Deploy the application to Heroku
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
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