Chapter 9. Building a single-page application with Angular: Foundations

 

This chapter covers

  • Setting up Express to deliver a single-page application
  • Best practices for organizing code in a large Angular application
  • Using Angular to do the URL routing instead of Express
  • Combining and minifying several Angular files into one

We saw in chapter 8 how to use Angular to add a component to an existing page. Over the next two chapters we’re going to take Angular to the next level and use it to create a single-page application. This means that instead of running the entire application logic on the server using Express, we’ll be running it all in the browser using Angular. By the end of this chapter we’ll have the framework for an SPA in place, and have the first part up and running by using Angular to route to the homepage and display the content.

Figure 9.1 shows where we’re at in the overall plan, recreating the main application as an Angular SPA.

Figure 9.1. This chapter will recreate the Loc8r application as an Angular SPA, moving the application logic from the back end to the front end.

9.1. Setting the groundwork for an Angular SPA

9.1.1. Getting base files in place

9.2. Switching from Express routing to Angular routing

9.2.1. Switching off the Express routing

9.2.2. Adding ngRoute (angular-route) to the application

9.3. Adding the first views, controllers, and services

9.3.1. Creating an Angular view

9.3.2. Adding a controller to a route

9.3.3. Controller best practice: Using the controllerAs syntax

9.3.4. Using services

9.3.5. Using filters and directives

9.4. Improving browser performance

9.4.1. Wrap each file in an IIFE

9.4.2. Manually injecting dependencies to protect against minification

9.4.3. Using UglifyJS to minify and concatenate scripts

9.5. Summary

sitemap