Packaging and Deploying AngularJS Web Applications
Improving network-related performance
As web developers we should offer our users functional applications with an
intuitive user interface. Users should have a snappy experience even before an
application starts. To do so we can limit HTTP traffic and reduce application's
loading time by downloading less data in each request and limiting the number
of HTTP requests.
Minifying static resources
One way of minimizing download times over a network is to reduce the number of
bytes that are sent between the web server and the browser. Nowadays minification of
JavaScript, CSS, and HTML code is one of the standard practices in web development.
Minification reduces size of data that needs to be downloaded into a browser.
Additionally it makes the source code much harder to read and adds minimal
protection from the unwelcomed eyes.
While you can safely continue using all the CSS and HTML minification techniques
you know and love, AngularJS-specific JavaScript code needs some attention before
it can be processed by standard tools.
How does AngularJS infer dependencies?
AngularJS heavily relies on the Dependency Injection (DI) pattern throughout
the framework. In our own AngularJS application code we can easily express
dependencies on registered services and have them injected into our code.
AngularJS can infer the dependencies of a given function, fetch them from the
$injector service, and provide them as arguments to our functions. The AngularJS
DI engine introspects dependencies for a function using a surprisingly simple
technique. To see how it works let's take an example from one of the controllers in
our sample SCRUM application:
angular.module('projects', ['resources.projects'])
.controller('ProjectsViewCtrl', function ($scope, $location) {
//controller's code
});A function for the ProjectsViewCtrl parameter declares dependencies on two
services: $scope and $location. AngularJS parses out those dependencies by
converting function definition to a string and using a regular expression to match
the function's argument names. We can see this technique using the following
minimal example: