With seven chapters under our belts, it should feel nice. What we have learned thus far is a direct consequence of the apps we have built in the last few chapters. I believe we now have an adequate understanding of the framework, how it works, and what it supports. Armed with this knowledge, as soon as we start to build some decent-sized apps, there are some common problems/patterns that will invariably surface, such as:
- How to authenticate the user and control his/her access (authorization)?
- How to make sure that the app is performing enough?
- My app requires localized content. What should I do?
- What tools can I use to expedite app development?
And many more!
In this chapter, we try to address such common scenarios and provide a working solution and/or prescriptive guidance to help you handle such use cases.
The topics we cover in this chapter include:
- Angular seed projects: You learn how some seed projects in Angular can help us when starting a new engagement.
- Multilocal/lingual support: AngularJS has decent support for app localization. We cover the Angular constructs that help us localize an application and some libraries that extend multi-locale support in Angular.
- Authenticating Angular applications: This is a common requirement; we look at how to support cookie- and token-based Authentication in Angular.
- Communication and data sharing patterns: You learn how to share data and communicate across controllers, directives, filters, and services.
- Angular performance: A customary performance section is a must as we try to layout some tips and guidelines on how to make our Angular more performant with regard to apps.
Let's start from the beginning!
Image a scenario here. We are building a new application and given the super awesomeness of the Angular framework, we have unanimously decided to use Angular. Great! What next? Next is the mundane process of setting up the project.
Although setting up a project/codebase may be a mundane activity, it's still a critical part of any engagement. This activity typically involves:
- Creating a standard folder structure. This is at times influenced by the server framework (such as RoR, ASP.Net, NodeJS, and others).
- Adding some standard assets to specific folders.
- Including any third-party dependency upfront.
- Setting up unit/E2E testing.
- Setting up app builds for different environments such as dev, test, and production, again influenced by the server technology involved.
What if we can short-circuit the setup process? This is indeed possible; we just need a seed project or a starter site.
AngularJS has a number of seed projects that can get us started in no time. Some seed projects integrate an Angular framework with a specific backend and some only dictate/provide Angular-specific content. Some come preconfigured with vendor-specific libraries/frameworks (such as LESS, SASS, Bootstrap, and Fontawesome) whereas others just provide a plain vanilla setup.
Two of the notable seed projects that are not tied to a backend but are pretty useful are:
angular-seed(https://github.com/angular/angular-seed): This is a prescriptive guide for the Angular team itself. It specifically targets how to set up code for development and unit testing an Angular application. It does not come with any third-part integration. Download/clone it and we are ready to go.ng-boilerplate(http://joshdmiller.github.io/ng-boilerplate/): This is a more complete and a very useful seed project. The project structure we have used for our apps derives heavily fromng-boilerplate. It has basically everything and uses LESS for CSS, Twitter Bootstrap for views, Font Awesome for icons/images, and the ever awesomeangular-uifor some handy directives. It even comes with a predefined build setup using Grunt.
These projects provide a head start when building with Angular.
If the app is tied to a specific backend stack, you have two choices:
- To use one of these seed projects and integrate it with the backend manually.
- To find a seed project/implementation that does it for us. Angular has been there for a long time. There is a good probability that we can find an integrated solution.
Note
Dan Cancro did a comprehensive study on available starter/seed projects and has made it available on his blog. Check it out here at http://www.dancancro.com/comparison-of-angularjs-application-starters/.
This discussion cannot be complete without mentioning Yeoman. If we want a bit more automation, a standardized build, tests, and a release workflow, Yeoman is a good choice.
Yeoman (http://yeoman.io/) is a suite of tools targeted toward web application development. It defines a workflow to build modern web applications. Yeoman consists of:
The scaffolding component of Yeoman is quite interesting. yo as it is named uses the concept of a generator to achieve scaffolding.
Generators in Yeoman are used to set up the initial seed project and later, for individual script generation too. Since Yeoman is not targeted specifically towards Angular, there are generators for various client and server stacks. There are also generators for Angular, Angular + Express (the Node web framework), mobile apps, and many more.
Note
Checkout http://yeoman.io/generators/ for an exhaustive list of generators supported on Yeoman!
Let's try to understand the Yeoman workflow from the Angular perspective. Before we start, make sure you have Yeoman, Bower, and Grunt installed on your machine:
- Our first task is to select a generator. Since we are targeting Angular, our choices are limited to generators that support Angular. For this quick walkthrough, we will use the Angular generator (https://github.com/yeoman/generator-angular), which is the official Angular generator supported on Yeoman.
- Install the generator from the command line:
npm install -g generator-angular - Post-installation creates a project directory that hosts the project. Then, navigate to the directory and run the generator:
mkdir angularApp cd angularApp yo angular
- Follow the wizard and within no time a seed project is generated. Depending upon the generator used, the final code may vary, but the resultant project code uses Bower to manage script dependency and comes preconfigured with Grunt build tasks.
- It is easy to verify that everything was set up correctly. Just run Grunt from the command line to compile and build the application, and it serves to see the new app in action.
- Once the app is set up and running, we can use the yo subgenerators to generate routes, controllers, views, directives, and services. And the awesome part is that they are all included in the build automatically. No more updating the
index.htmlfile and adding dependencies; everything is taken care by Grunt. Pretty awesome! - If not already started, start the newly created app using Grunt, open another command window, and run the following command:
yo angular:route exercise - The Angular generator generates a view, a controller, and a controller test spec and also sets up the route for exercise. Grunt is watching and automatically picks the changes and refreshes the app. We can now load the page
#/exerciseand a standard view template is loaded. Automation at its very best!
A word of caution here! What Yeoman generators create is opinionated to say the least. It may or may not fit the app requirements. Some aspects of the generated code can be tweaked easily, for example, we may be able to tweak the Grunt configuration file and adapt it to our project needs. But things like the default generated code, the organization of files and folders, and the result of code generated using subgenerator may require us to tinker with the generator implementation, not a trivial affair by any stretch of the imagination.