03 Dec 2016
Single-Page Application (SPA) with AngularJS Routing and Animation
In this tutorial, we're going to build a basic single-page app that uses Angular routing, and finally include an animation module to create smooth page changes.
The index.html page will call in the Angular framework and routing library, and communicate with the script.js controllers to provide dynamic updates to the app.
In the head section, add ng-app to the html tag. This tells Angular that this is the start of our app, therefore, look for any Angular directives. I named it "app", but this can be whatever you like.
Place Angular Libraries in the head section
It is recommended to place Angular libraries in the head or beginning of the body, oppose to the bottom. The reason for this is so that modules can correctly compile from an initially called library. http://www.w3schools.com/angular/angular_modules.asp
Angular can be loaded at the bottom of the page, however, directives (ng-cloak or ng-bind) would need to be used to avoid a "flash" from uncompiled content. http://stackoverflow.com/questions/15538125/angularjs-in-head-vs-body
jQuery / jQLite
Angular uses its own built-in version of jQuery, called jQLite, which is a stripped down version. If jQuery is called before Angular, Angular will use jQuery, hence the initial call. It is recommended, however, to avoid using jQuery unless necessary and find Angular alternatives. Consequently, application performance would increase. http://stackoverflow.com/questions/15722066/does-angularjs-really-need-jquery
Following the head section, attach "mainController" to the body which will communicate with our script.js logic. This allows us to dynamically add content to the view, producing a web page that users can see and interact with.
In the body, add the navigation.
Hashtag links are used for the routing system to locate and generate content. Below the navigation, add a div that contains the ng-view directive.
The ng-view directive renders routed templates into the index.html file and dynamically injects content between the div tags.
At the bottom, add our script.js file.
First, we'll store our modules into a variable called "app". The first one is the name of our app and the second, ngRoute, provides us with routing capabilities.
Next, we'll configure the routes using $routeProvider. When a link is link is clicked, the page will route to a specified template and use a specified controller.
Following our routing system, we'll use controllers to setup the $scope's (application object) initial state and to add behaviour to the object such as data binding.
Animate Angular page views
In the head section, include Angular's Animate library.
Attach the directive, `ng-class="animation"` to the body tag.
In our script.js, add 'ngAnimate' within our module variable.
At the bottom of our script.js file, attach the animation function to our mainController.
Now that our index.html and script.js files are setup, let's add templates to our pages folder so we can test out our application. Note: To test routing, run the application on a web server such as WAMP or LAMP.
And finally, some CSS.