Home > Article > Web Front-end > Programming guidelines for creating single-page applications using AngularJS_AngularJS
Overview
Single page apps are becoming more and more popular nowadays. Any website that emulates the behavior of a single-page application can provide the feel of a mobile/tablet application. Angular can help us create such applications easily
Simple application
We are going to create a simple app involving home, about and contact us pages. Although Angular is designed for creating more complex applications than this, this tutorial demonstrates many of the concepts we'll need in larger projects.
Goal
Although the above functions can be achieved using Javascript and Ajax, in our application, Angular can make it easier for us to handle.
Document Structure
HTML page
This part is relatively simple. We use Bootstrap and Font Awesome. Open your index.html file, and then we use the navigation bar to add a simple layout.
<!-- index.html --> <!DOCTYPE html> <html> <head> <!-- SCROLLS --> <!-- load bootstrap and fontawesome via CDN --> <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" /> <link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.0.0/css/font-awesome.css" /> <!-- SPELLS --> <!-- load angular via CDN --> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js"></script> <script src="script.js"></script> </head> <body> <!-- HEADER AND NAVBAR --> <header> <nav class="navbar navbar-default"> <div class="container"> <div class="navbar-header"> <a class="navbar-brand" href="/">Angular Routing Example</a> </div> <ul class="nav navbar-nav navbar-right"> <li><a href="#"><i class="fa fa-home"></i> Home</a></li> <li><a href="#about"><i class="fa fa-shield"></i> About</a></li> <li><a href="#contact"><i class="fa fa-comment"></i> Contact</a></li> </ul> </div> </nav> </header> <!-- MAIN CONTENT AND INJECTED VIEWS --> <div id="main"> <!-- angular templating --> <!-- this is where content will be injected --> </div> <!-- FOOTER --> <footer class="text-center"> View the tutorial on <a href="http://scotch.io/tutorials/angular-routing-and-templating-tutorial">Scotch.io</a> </footer> </body> </html>In page hyperlinks, we use "#". We don't want the browser to think that we are actually linking to about.html and contact.html.
Angular Application
Models and Controllers
At this point we are ready to set up our application. Let's create the angular model and controller first. Regarding models and controllers, check out the documentation for more information.
First, we need to create our model and controller in javascript, we put this operation in script.js:
// script.js // create the module and name it scotchApp var scotchApp = angular.module('scotchApp', []); // create the controller and inject Angular's $scope scotchApp.controller('mainController', function($scope) { // create a message to display in our view $scope.message = 'Everyone come and see how good I look!'; });Next let’s add models and controllers to our HTML page so Angular knows how to bootstrap our application. To test that the functionality works, we will also display the value of a variable we created called $scope.message.
<!-- index.html --> <!DOCTYPE html> <!-- define angular app --> <html ng-app="scotchApp"> <head> <!-- SCROLLS --> <!-- load bootstrap and fontawesome via CDN --> <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" /> <link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.0.0/css/font-awesome.css" /> <!-- SPELLS --> <!-- load angular via CDN --> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.10/angular.min.js"></script> <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.10/angular-route.js"></script> <script src="script.js"></script> </head> <!-- define angular controller --> <body ng-controller="mainController"> ... <!-- MAIN CONTENT AND INJECTED VIEWS --> <div id="main"> {{ message }} <!-- angular templating --> <!-- this is where content will be injected --> </div>In the main div layer, we can now see the message we created. Now that our models and controllers are set up and Angular is running properly, we're going to start using this layer to display different pages.
ng-view is an angular directive used to include the template of the current route (/home, /about, or /contact). It will get the file based on the specific route and put it into the main layout (index.html ).
We will add ng-view code to the site in div#main to tell Angular where to place the page we render.
<!-- index.html --> ... <!-- MAIN CONTENT AND INJECTED VIEWS --> <div id="main"> <!-- angular templating --> <!-- this is where content will be injected --> <div ng-view></div> </div> ...
Since we are creating a single-page application and do not want the page to refresh, we will use Angular routing capabilities.
Let’s take a look at our Angular files and add them to our app. We will use $routeProvider in Angular to handle our routing. This way, Angular will handle all the magic requests by fetching a new file and injecting it into our layout.
AngularJS 1.2 and RoutingAfter version 1.1.6, the ngRoute model is no longer included in Angular. You need to use the model by declaring it at the beginning of the document. This tutorial has been updated for AngularJS1.2:
// script.js // create the module and name it scotchApp // also include ngRoute for all our routing needs var scotchApp = angular.module('scotchApp', ['ngRoute']); // configure our routes scotchApp.config(function($routeProvider) { $routeProvider // route for the home page .when('/', { templateUrl : 'pages/home.html', controller : 'mainController' }) // route for the about page .when('/about', { templateUrl : 'pages/about.html', controller : 'aboutController' }) // route for the contact page .when('/contact', { templateUrl : 'pages/contact.html', controller : 'contactController' }); }); // create the controller and inject Angular's $scope scotchApp.controller('mainController', function($scope) { // create a message to display in our view $scope.message = 'Everyone come and see how good I look!'; }); scotchApp.controller('aboutController', function($scope) { $scope.message = 'Look! I am an about page.'; }); scotchApp.controller('contactController', function($scope) { $scope.message = 'Contact us! JK. This is just a demo.'; });Now, we have defined our route through $routeProvider. Through configuration, you will find that you can use specified routes, template files and even controllers. With this approach, each part of our application uses an Angular controller and its own view.
To complete this tutorial, we only need to define the pages that will be injected. We will also make each of them display messages from the controller associated with them.
Run locally: Angular routing will only work in the environment you set for it. You need to make sure you are using http://localhost or some type of environment. Otherwise angular will say that cross-domain requests support HTTP.
Animation for Angular applications
Once you have all the routing done, you can start playing with your site and adding animations to it. To do this, you need to use the ngAnimate module provided by angular. Later you can Use CSS animation to switch views animatedly.
SEO on Single Page App
Ideally, this technique might be used in an application where the user is logged in. You certainly don’t really want pages that are private to a specific user to be indexed by search engines. For example, you wouldn’t want your reader account, Facebook login page, or blog CMS page to be indexed.
If you do want to do SEO for your app, then how do you make SEO effective on apps/sites that use js to build pages? Search engines have a hard time processing these apps because the content is dynamically built by the browser, and Invisible to crawlers.
Make your app SEO friendly
The techniques that make js single page applications SEO-friendly require regular maintenance. According to the official Google recommendations, you need to create HTML snapshots. An overview of how it works is as follows:
For more information on this process, check out Google's AJAX Crawler and their guide on Creating HTML Snapshots.