- \n
- AngularJS<\/li>\n
- Bower<\/li>\n
- Twitter’s Bootstrap<\/li>\n<\/ul>\n
Getting started<\/h2>\n
To go on with the project you might want to download Bootstrap<\/a> and also Bower (here<\/a> you will find every information you need on how to do that).<\/p>\n
Firstly, we create a folder named
SinglePageApp<\/code> (you can name it anything you wish), an HTML file namedindex.html<\/code> and a Javascript file namedapp.js<\/code> inside of it, and we’re good to go.<\/p>\nSetting up AngularJS<\/h2>\n
First we ask Bower to install the Angular package by executing this in the terminal (make sure you\u2019re in your project\u2019s directory):<\/p>\n
bower install angular<\/pre>\n
Then, again using Bower we install the Angular-Route package by executing:<\/p>\n
bower install angular-route<\/pre>\n
After executing these commands we will notice that in our project\u2019s directory a
bower_components<\/code> directory is added, inside of which are two folders, one namedangular<\/code> and one namedangular-route<\/code>. We will use them later. Then we open theapp.js<\/code> and write the JavaScript code for creating the Angular module, while addingngRoute<\/code> dependency to it. It should look like this:<\/p>\nvar app=angular.module('app',['ngRoute']);<\/pre>\nNow is time to define routes by using the
config()<\/code> function, provided by angular.module. Right under the code for the angular module, in theapp.js<\/code> file we place this code:<\/p>\napp.config(function($routeProvider){\r\n\t$routeProvider\r\n\t\r\n\t\t\/\/default page\r\n\t\t.when('\/',{\r\n\t\t\ttemplateUrl : 'pages\/homepage.html',\r\n\t\t\tcontroller : 'Homepage'\r\n\t\t})\r\n\t\t\r\n\t\t\/\/about page\r\n\t\t.when('\/about',{\r\n\t\t\ttemplateUrl : 'pages\/about.html',\r\n\t\t\tcontroller : 'About'\r\n\t\t})\r\n\t\t\r\n\t\t\/\/date page\r\n\t\t.when('\/date',{\r\n\t\t\ttemplateUrl : 'pages\/date.html',\r\n\t\t\tcontroller : 'Date'\r\n\t\t});\r\n});\r\n<\/pre>\nWe have injected
$routeProvider<\/code> as a parameter to the function. Now thewhen()<\/code> function of the$routeProvider<\/code> can be used to configure the routes. This function takes two parameters: the route name and the route definition object which in itself contains various details for a route. We will use only two of those properties: thetemplateURL<\/code> which is a relative location of the view file, starting fromindex.html<\/code>; and the controller associated with the view.<\/p>\nWe have reached the point where we should create the controllers for the different views. First we create a directory named
controllers<\/code> in thejs<\/code> folder, and inside of it we create a JavaScript file namedcontrollers.js<\/code> where we will put this code snippet:<\/p>\napp.controller('Homepage',['$scope',function($scope){\r\n\t$scope.homepage = "Homepage";\r\n}]);\r\n\t\r\napp.controller('About',['$scope', function($scope){\r\n\t$scope.about = "Lorem ipsum...";\r\n}]);\r\n\t\r\napp.controller('Date',['$scope', function($scope) {\r\n\t$scope.now = new Date();\r\n}]);\r\n<\/pre>\nDon\u2019t forget to script the file
controllers.js<\/code> in theindex.html<\/code> file. You can even place the above code in theapp.js<\/code> file but it is not recommended as it could reduce the readability of the code and in heavier applications could complicate stuff.<\/p>\nThe HTML markup of our app<\/h2>\n
An important thing to do if we want our app to function properly is to link and script all the files we’ve downloaded. First we link Bootstrap\u2019s CSS file by adding this right under the
<\/title><\/code> tag:<\/p>\n<link rel="stylesheet" href="css\/bootstrap.min.css">\r\n<\/pre>\n
Now let\u2019s script Bootstrap\u2019s, Angular\u2019s and Angular-Route\u2019s JavaScript files by adding this code after the
<link><\/code> tag:<\/p>\n\r\n<script src="js\/bootstrap.min.js"><\/script>\r\n<script src="bower_components\/angular\/angular.min.js"><\/script>\r\n<script src="bower_components\/angular-route\/angular-route.min.js"><\/script>\r\n<\/pre>\n
Also we script the
app.js<\/code> file, as it contains our angular module and also other necessary things, like this:<\/p>\n<script src="js\/app.js"><\/script>\r\n<\/pre>\n
You might want to place all this in the
<body><\/code>\u00a0section, right before the<\/body><\/code>\u00a0tag, for performance reasons, as the browser will render the HTML markup first and then the JavaScript code is loaded. Please bear in mind that the scripting ofangular-route<\/code> andapp.js<\/code> should come after the scripting ofangular<\/code>, andcontroller.js<\/code> should come after the scripting ofapp.js<\/code>.<\/p>\nNow let\u2019s create a directory named
pages<\/code> inside of which we will place the HTML files for the views. Beware that the files for the views should not be complete HTML files, they should only have the markup for the specific view.<\/p>\nIn the
homepage.html<\/code> file we will only place the{{homepage}}<\/code> expression.<\/p>\nThe About page will be a typical descriptive page, so we will only need this code:<\/p>\n
{{ about }}\r\n<\/pre>\nThe date page will show us the date of today. The code will go like this:<\/p>\n
{{ now | date:'medium' }}\r\n<\/pre>\nWhile by now you know that what we have placed inside the double curly brackets is an expression, it is worth noting that
\n| date:'medium'<\/code> is a filter, a short way to format some of the most used expressions, such as dates, numbers, currency etc. Angular gives us several built-in filters as well as an easy way to create our own. This particular filter formats the date so as to show the month, date and then the year, and also the time in hours, minutes and seconds in AM\/PM format.<\/p>\nTime to have a look at
index.html<\/code>. We will have to tell Angular in which part of the application it should be active. You saw that when declaring the angular module we named itapp<\/code>. To tell it where it should be active we add the attributeng-app=\"app\"<\/code> in the tag and everything inside of it turns into an AngularJS application. In our case, as the whole page will be anng-app<\/code> it is better to place the attribute in the<html><\/code> tag or in the<body><\/code> tag. I\u2019m choosing the second.<\/p>\nIn the
<body><\/code>\u00a0section we will add the buttons, one for each view. We will use Bootstrap to create them easily but also to make them look stylish. The code will go like this:<\/p>\n\r\n<a href="#\/"><button class="btn btn-danger">Homepage<\/button><\/a>\r\n<a href="#\/about"><button class="btn btn-success">About<\/button><\/a>\r\n<a href="#\/date"><button class="btn btn-warning">Date<\/button><\/a>\u00a0\r\n<\/pre>\n
Take a look at the
href<\/code> attribute in each of the links. Familiar? It is the route we specified when we usedwhen()<\/code> function, only it has a # (hashbang) before it. The class attribute you see in the<button><\/code> tags is a class provided by Bootstrap, which makes them look fancy and have specific colors (red forbtn-danger<\/code>, green forbtn-success<\/code> and orange forbtn-warning<\/code>).<\/p>\nBut where is the app going to display the views we created? We will tell it where, by placing a
<div><\/code>\u00a0element containing the attributeng-view<\/code>. It will look like this:<\/p>\n<div class="row">\r\n <div ng-view>\r\n <!-- Views go here -->\r\n <\/div>\r\n<\/div>\r\n<\/pre>\n
I have placed it inside another
<div><\/code>\u00a0element, but you can place it anywhere in the application’s body. AngularRoute gives it the opportunity to completely replace the<div ng-app><\/code> element with the element<ng-app> <\/ng-app><\/code>, but is not recommended if your target users will use IE as it does not support the element version.<\/p>\nYou may have noticed the “row” attribute I gave to the
div<\/code> containing theng-view<\/code> element. It is there for styling purposes only. To make the website look a little more fancy, you create astyling.css<\/code> file inside thecss<\/code> folder (don\u2019t forget to link it), and place this code inside it:<\/p>\n.row{\r\n\ttext-align: center;\r\n\tbackground-color: steelblue;\r\n\tfont-family: "Georgia", serif , sans-serif;\r\n\tfont-size: 30px;\r\n}\r\n<\/pre>\nYou can now open your Single-Page App and it will show you different views each time you click the buttons, without reloading the page, looking like this:<\/p>\n
![\"Single](\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/Untitled.jpg\")
<\/a>Single Page App when the About button is pressed.<\/figcaption><\/figure>\n Such is the magic of AngularJS.<\/p>\n
Download the source code for Single Page App<\/h2>\n
This was an example of Single Page Apps in AngularJS.<\/p>\n