{"id":12498,"date":"2016-05-24T16:15:58","date_gmt":"2016-05-24T13:15:58","guid":{"rendered":"http:\/\/www.webcodegeeks.com\/?p=12498"},"modified":"2017-12-19T16:27:37","modified_gmt":"2017-12-19T14:27:37","slug":"angular-js-single-page-application-example","status":"publish","type":"post","link":"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/angular-js-single-page-application-example\/","title":{"rendered":"Angular.js Single Page Application Example"},"content":{"rendered":"

Angular.js is one of the frameworks in the programming world that is acutely becoming one of the most widely-used of them, as it’s incomparable in providing us with the means to create dynamic and efficient web-apps.<\/p>\n

There are a number of useful features that have made Angular not only famous for, but also irreplaceable in web-developing. One of these features is routing, or more accurately ng-route<\/code>, which is best represented by it’s most characteristic form of usage: Single Page Apps!
\n 
\n 
\n 
\n[ulp id=’LXJcMJZXSsqGXYW8′]<\/p>\n

\n

Table Of Contents<\/h3>\n
\n
1. What are Single Page apps?<\/a><\/dt>\n
\n
\n
1.1 The good<\/a><\/dt>\n<\/dl>\n<\/dd>\n
\n
\n
1.2 The Bad<\/a><\/dt>\n<\/dl>\n<\/dd>\n
2. A Head Start on our SPA<\/a><\/dt>\n
\n
\n
2.1 What we’ll use<\/a><\/dt>\n<\/dl>\n<\/dd>\n
\n
\n
2.2 Getting everything ready<\/a><\/dt>\n<\/dl>\n<\/dd>\n
3. The HTML Part<\/a><\/dt>\n
\n
\n
3.1. Linking and Scripting external parts<\/a><\/dt>\n<\/dl>\n<\/dd>\n
\n
\n
3.2 The common part<\/a><\/dt>\n<\/dl>\n<\/dd>\n
4. The Javascript part<\/a><\/dt>\n
\n
\n
4.1 Creating the main module<\/a><\/dt>\n<\/dl>\n<\/dd>\n
\n
\n
4.2 Configuring the routes<\/a><\/dt>\n<\/dl>\n<\/dd>\n
\n
\n
4.3 Creating the controllers<\/a><\/dt>\n<\/dl>\n<\/dd>\n
5. The HTML for the pages<\/a><\/dt>\n
6. Wrapping up<\/a><\/dt>\n
7. Making your App SEO friendly<\/a><\/dt>\n
8. Download the source code<\/a><\/dt>\n<\/dl>\n<\/div>\n

<\/a>1. What are Single Page Apps?<\/h2>\n

<\/a>1.1 The Good<\/h3>\n

If you are even remotely familiar with Angular.js’ benefits, then you have had the chance to already hear about “Single Page Applications” or SPAs. Single Page Apps are websites that are built with the concept of phone\/tablet apps in mind. That means that you only have to load the website once and when going from one page to another you’ll have the view automatically loaded ahead of time, so that you don’t have to wait for them loading each time you click something.<\/p>\n

Of course it has a number of benefits, one of the most obvious ones being having a very sleek, not-annoying appearance. In fact, not only \u00a0it is simply not annoying, but your app will be fast and responsive, giving the user the feel of a native app. Which immediately translates to improved user experience, and a considerable one at that.<\/p>\n

To get you different views in each page loaded without having to reload or refresh the app is one of the ways this goal is reached. Angular pre-loads and caches all your pages, so that is not needed. That also gives your app the ability to work offline too, as the views are already loaded and cached, and ready for use.<\/p>\n

Another benefit for the programmer is the fact that you will not have to repeat and copy paste code from one view to the other to give your app a coherent feel. You will only have to write that code once, and just go on coding the part that will be different. No more repeating anything, and while practice makes perfect, it can become so burdensome at times that you might feel tempted to give it up for good. With SPAs this temptation is definitely gone.<\/p>\n

Is Angular the only one able to provide us with these perks? No, you can also use vanilla Javascript and AJAX calls, but Angular does make it simpler and easier to understand, while being more efficient at that.<\/p>\n

<\/a>1.2 The Bad<\/h3>\n

So what is the catch? Well, nothing is perfectly perfect, Angular SPAs have their own pitfalls too. One of the most obvious ones is that while you don’t have to reload each page whenever you click something, the initial load of your app will take longer. That’s because you are loading everything at once and every resource your app will need should be downloaded right away.<\/p>\n

Another thing that you may or may not encounter depending on the level of expertise you have on Angular is the fact that while your code will be shorter, it will also be more complex. There’s a saying in my country which basically translates to “it’s harder to write short and explain all I mean”, and it’s very fitting in this case. You will have to write less code, but you’ll have to think well every line of it.<\/p>\n

Another negative aspect of SPAs is the fact that to make your app SEO friendly, you will have to use special techniques and perform regular maintenance on them, as Javascript apps are not automatically SEO friendly. That happens because the content is built dynamically and it’s very difficult for these things named crawlers to index your page content. While we will not go too deep into explaining them, Google has already provided us with a guide<\/a> which can be used to make these kind of apps crawlable.<\/p>\n

Finally, your user will have to have Javascript enabled in their browser in order for your Single Page Application to work properly. However, almost everyone has it nowadays, so I’d say it is not that big of a deal.<\/p>\n

<\/a>2. A Head start on our SPA<\/h2>\n

The Single Page App that we will build in this example will be a very simple one that will only have three pages so that our point can be illustrated but we won’t add any fancy stuff there. That is an opportunity for you to use the knowledge and build bigger and more complex apps similar to this one in the future, combining Angular.js with a number of other technologies, be it front or back-end.<\/p>\n

<\/a>2.1 What we’ll use<\/h3>\n

We will use a number of other technologies except AngularJS to make our project more complete and to give a head start to those of you who are still in the beginning of your journey as a developer. Those would be:<\/p>\n

    \n
  1. npm<\/a> as a packet manager for Javascript. It will help us find the necessary packages for our project. Of course, in this one, it’s use will be minimal, so if you’re here only for the Angular part, you don’t have to worry at all. However, if you’re working on a team it can facilitate your work in a lot of ways.<\/li>\n
  2. Bower<\/a> will be our manager of every framework, library, asset and utility, helping us keep track of them and making sure they’re up to date. Bower is more focused on front-end technologies, while npm<\/code> is usually used for backend and everything else.<\/li>\n
  3. Twitter’s Bootstrap<\/a> will be the visuals of the website. It’s a framework that will take care of all the styling part of the app, from grids, to button, to colors, to everything CSS as it’s a framework of exactly that.<\/li>\n
  4. As an alternative to Bootstrap you might want to use MaterializeCSS<\/a> which some people might find easier to use and in very small projects like ours, it might be more fitting. However, we’ll stick to Bootstrap with this one, as it’s usually a more popular choice and this way this tutorial will help more people.<\/li>\n<\/ol>\n

    Let’s see how to get everything ready!<\/p>\n

    <\/a>2.2 Getting everything ready!<\/h3>\n

    First of all we have to create a directory where we’ll keep everything, in our case I named it SinglePageApps<\/code> but the choice is yours. Next up we create a basic HTML file named index.html<\/code> and a Javascript file named app.js<\/code>. Then we get the packages we mentioned above and start installing them one by one.<\/p>\n

    2.2.1 Installing npm<\/h4>\n

    First we install npm<\/code>, and it’s very easy to do so. You just have to go and download Node.js here<\/a> and that is it, npm<\/code> comes with it as a whole package. You can try and see if it really is installed by opening the terminal in your directory and running npm -v<\/code> which will give you the version of npm<\/code> if you have it or a notice if you don’t.<\/p>\n

    2.2.2 Installing Bower<\/h4>\n

    After doing that we will install Bower, and we’ll use npm<\/code> to do it. You have to run the command below in the terminal:<\/p>\n

    terminal<\/em><\/span><\/p>\n

    npm install bower\r\n<\/pre>\n
    After this command takes effect you will see the folder node_modules<\/code> added to your directory. After installing Bower, you have to run the command below to set up your bower.json<\/code> file:<\/p>\n
    terminal<\/em><\/span><\/p>\n
    bower init\r\n<\/pre>\n
    You will be asked to enter a bit of data related to the project and then the manifesto file is ready, which means you can now use Bower to your liking.<\/p>\n
    2.2.3 Installing Angular, Angular-Route and Bootstrap<\/h4>\n
    You can use Bower to install Angular, Angular-Route and Bootstrap specifically. You only have to run one line for each of them, namely these:<\/p>\n
    terminal<\/em><\/span><\/p>\n
    bower install angular\r\nbower install angular-route\r\nbower install bootstrap\r\n<\/pre>\n
    You’ll find everything stored in the new bower_components<\/code> folder, together with jQuery, since it’s needed for Bootstrap to function properly. With this, all the needed installments are done, we just have to go on with the app.<\/p>\n
    <\/a>3. The HTML part<\/h2>\n
    As usually, we’ll divide our app into an HTML part and a Javascript part (which will in fact be all Angular). Let’s start with the HTML part, to give a structure to our app and start changing things to reach into a full all step by step. First, we’ll only have the basic setup of the HTML file, no links no scripts. It’ll look like below:<\/p>\n
    index.html<\/em><\/span><\/p>\n
    <!DOCTYPE html>\r\n<html lang=\"en\">\r\n<head>\r\n    <meta charset=\"UTF-8\">\r\n    <title>Single Page App for WebCodeGeeks<\/title>\r\n\r\n\r\n<\/head>\r\n<body>\r\n\r\n<\/body>\r\n<\/html>\r\n<\/pre>\n
    But where are all the other parts we mentioned above? Let’s add them!<\/p>\n
    <\/a>3.1 Linking and Scripting external parts<\/h3>\n
    First of all we have to add Angular and Angular-Route as that’s the whole point of the functionality of our app. You can do that by adding the code snippet below in the <head><\/code> section of our index.html<\/code> file:<\/p>\n
    index.html<\/em><\/span><\/p>\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
    After doing that we link and script the Bootstrap components doing the same with the code below as we did with the one above:<\/p>\n
    index.html<\/em><\/span><\/p>\n
    <link rel=\"stylesheet\" href=\"bower_components\/bootstrap\/dist\/css\/bootstrap.min.css\"\/>\r\n<script src=\"bower_components\/bootstrap\/dist\/js\/bootstrap.min.js\"><\/script>\r\n<\/pre>\n
    There are also a number of other external parts that we will have to link and script into our page but we will mention them when we use them to avoid confusion.<\/p>\n
    <\/a>3.2 The common part<\/h3>\n
    As we said, there is a part that will be common for every page of the app. That is what we will be building now. But first we have to add the attribute ng-app=\"app\"<\/code> into our <body><\/code> tag to show the browser where the Angular app will be placed. You can place it anywhere, which means that you can make your whole website an Angular app or just a part of it, depending on your user’s needs and what you want to show them.<\/p>\n
    Then we create the buttons which will be used as triggers to go from one page to the other. The code would go like below:<\/p>\n
    index.html<\/em><\/span><\/p>\n
    <a href=\"#\/\"><button class=\"btn btn-primary\">Homepage<\/button><\/a>\r\n<a href=\"#\/about\"><button class=\"btn btn-info\">About<\/button><\/a>\r\n<a href=\"#\/date\"><button class=\"btn\">Date<\/button><\/a>\r\n<\/pre>\n
    What we’ll have by now is this:<\/p>\n
    \"Common<\/a>
    Common part of the SPA<\/figcaption><\/figure>\n
    How did the colors and the styling come into play? And also, if you notice the URL even the link changes if you click one of them (despite the fact that nothing else changes when you click, but we’ll get to that in a minute). That is a result of the class attribute that we added to each button. Bootstrap allows us to change the style of the buttons by changing that attribute. Except for the ones we used there are also btn-success<\/code>, btn-warning<\/code> and btn-danger<\/code> which would make the buttons go green, yellow and red respectively.<\/p>\n
    The URL is changed using the href<\/code> attribute. Note that we use the # to navigate to the pages, so that our browser doesn’t get confused and think that we’re really changing the website we’re visiting. It’s important because then we wouldn’t have an SPA at hand at all but just a regular website.<\/p>\n
    The next part is showing the browser where is the part of the app that will change. To do that you just have to add the code below whenever you want them to appear:<\/p>\n
    index.html<\/em><\/span><\/p>\n
    <div class=\"row\">\r\n    <div ng-view>\r\n        <!-- View goes here -->\r\n    <\/div>\r\n<\/div>\r\n<\/pre>\n
    That’s basically all that you have to put in the main file in order for you to have a SPA: the trigger for the multiple pages and the ng-view<\/code> directive which makes it possible for what you see on that part to be different each time you click a different button.<\/p>\n
    <\/a>4. The Javascript part<\/h2>\n
    We’ll call this part the Javascript part because basically Angular is a Javascript framework, but you can call it Angular if you want things to be more strict, it won’t change a thing for the app.<\/p>\n
    <\/a>4.1 Creating the main module<\/h3>\n
    First of all, in order for you to have an Angular app, you will first have to create the Angular module. You remember that we placed the attribute ng-app=\"app\"<\/code> inside our <body><\/code> tag. app<\/code> will be the name of our module, which you’ll see included in the code snippet below:<\/p>\n
    app.js<\/em><\/span><\/p>\n
    var app=angular.module('app',['ngRoute']);\r\n<\/pre>\n
    As you see, besides the name of the module we have added ngRoute<\/code> as an injected dependency, which is necessary for the routing process which we’ll discus below in detail.<\/p>\n
    <\/a>4.2 Configuring the routes<\/h3>\n
    angular.module()<\/code> provides us with another function named config()<\/code> which will help us set up our routes.<\/p>\n
    But let’s create a folder named pages<\/code> first, which will contain all three of the pages we’ll create. For the moment leave it at that, and we’ll get back to the pages later.<\/p>\n
    To configure the routes you have to use the config()<\/code> function like below:<\/p>\n
    app.js<\/em><\/span><\/p>\n
    app.config(function($routeProvider){\r\n    $routeProvider\r\n\r\n        \/\/default page\r\n        .when('\/',{\r\n           templateUrl : 'pages\/homepage.html',\r\n           controller  : 'Homepage'\r\n        })\r\n\r\n        \/\/about page\r\n        .when('\/about',{\r\n            templateUrl : 'pages\/about.html',\r\n            controller  : 'About'\r\n        })\r\n\r\n        \/\/date page\r\n        .when('\/date',{\r\n           templateUrl : 'pages\/date.html'\r\n           controller  : 'Date'\r\n        });\r\n});\r\n<\/pre>\n
    You see that we have used $routeProvider<\/code> right away when using the config()<\/code> function. It is just a provider for the ngRoute module. We have injected $routeProvider as a parameter to the function whose when()<\/code> function can be used to configure the routes. $routeProvider<\/code> is also used in case we want the route paths to be case sensitive, as it provides us with a property named caseInsensitiveMatch<\/code> to do just that. By default the route paths are case insensitive, which would mean that this property is by default set to false, and to make the path case sensitive you’d have to change it’s value to TRUE. However, it’s not really advised, as it can make browsing directly to the link by writing it in the URL bar of the browser more difficult.<\/p>\n
    The when()<\/code> function will take two parameters: the route name and the route definition. The route definition is an object which contains multiple details for a route, such as templateURL<\/code> which is a relative location of the view file, starting from index.html<\/code>; and the controller associated with the view. With that the routes are configured, but what about the controllers? We didn’t see them anywhere!<\/p>\n
    <\/a>4.3 Creating the controllers<\/h3>\n
    Controllers are basically what makes the pages appear in the ng-view<\/code> and be functional, else they wouldn’t be visible even though we did create them. We will create a separate file for them, to keep the code clean and organized. Let’s name it controllers.js<\/code>.The code for each of them would go like below:<\/p>\n
    controllers.js<\/em><\/span><\/p>\n
    app.controller('Homepage',['$scope',function($scope){\r\n    $scope.homepage = \"Homepage\";\r\n}]);\r\n     \r\napp.controller('About',['$scope', function($scope){\r\n    $scope.about = \"Lorem ipsum...\";\r\n}]);\r\n     \r\napp.controller('Date',['$scope', function($scope) {\r\n    $scope.now = new Date();\r\n}]);\r\n<\/pre>\n
    We use the function app.controller()<\/code> to create each controller. Notice that the first part, app<\/code>, is also the name of the angular module, as we defined it in the previous section when we created the module, and also the attribute on the <body> tag. If you don’t want it to be similar to the name of the attribute which is ng-app<\/code> you can call it something else, it doesn’t matter. What matters is that it’s used properly in every part of the code.<\/p>\n
    This function takes two parameters: the name of the controller, and it’s function, or what you want the controller to do. Both are obligatory, and you have to pay very close attention to the second parameter because it’s what your controller will do. It’s customized, so you can do whatever you wish.<\/p>\n
    As you see, each page will just show a small phrase, except for the third one, which will show us the date. With this, we’re done with the Javascript part.<\/p>\n
    <\/a>5. The HTML for the pages<\/h2>\n
    All that’s left to be done now, is to only write the markup of each of the pages of our SPA. We already created a folder that will contain the HTML files for each page, so now we create these HTML files. In our case, I’ve named them homepage.html<\/code>, about.html<\/code> and date.html<\/code>.<\/p>\n
    Below you’ll ave everything that goes into the homepage.html<\/code> file:<\/p>\n
    homepage.html<\/em><\/span><\/p>\n
    {{homepage}}\r\n<\/pre>\n
    Yes, it’s just that expression! No, not even the basic HTML structure is needed, that is already set by the common part of the HTML! The next two files will contain the code snippet below:<\/p>\n
    about.html<\/em><\/span><\/p>\n
    {{about}}\r\n<\/pre>\n
    For this one too we’ve used an AngularJS expression, which are generally written inside double braces and are Angular’s way of binding data to the HTML structure. Of course, you wont see {{about}}<\/code> displayed in your page but the information that this expression carries. That is specified when building the controllers. The expressions can even contain variables and operators, but in our case, we’ve kept it simple.<\/p>\n
    However, keep in mind that if you place the expression outside the jurisdiction of ng-app, it will be displayed just as it is written and will not be resolved by Angular.<\/p>\n
    date.html<\/em><\/span><\/p>\n
    {{now |date:'medium'}}\r\n<\/pre>\n
    In the last one we’ve also used a filter to stylize the date format a bit, but yeah, it’s just that. There are a number of predefined filters for numbers in general and date in particular. The one we’re using here is medium<\/code>, which would display the date in the MMM d, y h:mm:ss a<\/code> format, making it look something like this: Jan 11, 2016 9:05:08 AM.<\/p>\n
    <\/a>6. Wrapping up<\/h2>\n
    To wrap it all up, you shouldn’t forget to link and script all the custom files we created into the main one. Those would be: the app.js<\/code> file and the controllers file. If you want to add any files for styling etc. you have to add them all for your SPA to work properly. Just add the part below:<\/p>\n
    index.html<\/em><\/span><\/p>\n
      <!-- Custom files -->\r\n    <script src=\"app.js\"><\/script>\r\n    <script src=\"controllers.js\"><\/script>\r\n<\/pre>\n
    With that, you’re good to go! When you click the Homepage button, you’ll look at this view:<\/p>\n
    \"The<\/a>
    The view when clicking the Homepage button.<\/figcaption><\/figure>\n
    It looks very simple and unflattering when you compare it to other websites on the internet, but keep in mind that this is only the beginning. Step by step you can make your website one of the very best you could find!<\/p>\n
    <\/a>7. Making your App SEO friendly<\/h2>\n
    You might have heard of SEO a lot lately since it’s no more just an added bonus for websites but it’s starting to become a requirement as website owners vie for the attention and views of an always bigger and expanding audience. It is, of course, understandable, as everything is starting to be measured by number of clicks, and even getting paid for them, so why not make your app SEO friendly too, while you’re at it?<\/p>\n
    SEO is an acronym for search engine optimization, which is a number of techniques and methods used to make a website appear as higher as possible in the list of the Search results of a search engine, because a higher ranking in the search results would definitely mean higher user traffic. But how you can do that depends on how the search engines index your website.<\/p>\n
    Google has released a guide to this, which boils down to this: They use crawlers to index pages. These crawlers find URL that look legit and uncluttered (which means that you should give some thought to what you place in templateURL<\/code> for each page) and ask the servers for the contents of the webpage corresponding to it. The webserver returns an HTML snapshot of the page which contains it’s content and is used to index your page based on it.<\/p>\n
    Problem is, since our app is basically built with Javascript (as Angular is a Javascript framework in essence) that would mean that the content is built dynamically. So when the crawler asks for the content of the page it will be difficult because it might be still not generated by the browser.<\/p>\n
    Thankfully there are senior developers out there that believe that SEO is not a privilege but a right, so they created services that make Javascript based webpages crawlable, and Angular in particular too. These solutions include:<\/p>\n