Skip to main content
Angular 2

Angular 2 Single Page Apps using Routing – Part 1

In this 5-part blog series I will go through a PetCare application to explain the concept of Single Page App using a router component.

Given below is a screenshot of how the final app output will appear  in both desktop and mobile devices:

Pet Care Mobile Devices

 

Pet Care Application

 

Pet Care

Prerequisites

This blog is for people familiar with basic Angular 2 and Twitter Bootstrap concepts.

If you are new to Angular 2.0 check out

You also need Node.js up and running and NPM (Node package manager) installed.

Verify that you are running at least node v4.x.x and npm 3.x.x by running node -v and npm -v in a terminal/console window.

Download Nodejs: https://nodejs.org/en/download/

Getting Started

Download Angular 2 QuickStart from https://github.com/angular/quickstart, uncompress and rename the folder ‘petcare’ (you can name the folder as you wish).

If you have Git installed then you can clone the quickstart git repository using the command

git clone https://github.com/angular/quickstart petcare

If you explore ‘petcare’ folder you will find some testing related files you can ignore it.

In windows command prompt or node.js command prompt navigate to the ‘petcare’ folder and run the command

npm install

This will install all the dependencies.

 Adding Twitter Bootstrap

Run the following command to install bootstrap 3 latest version and save the dependency to package.json

npm install bootstrap@3 --save

Then run the following command to install jquery latest version and save the dependency to package.json

npm install jquery --save

Add the following in the head section of index.html above ‘Polyfill(s) for older browsers’ comment tag

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css">
    <!-- Jquery JS -->
    <script src="node_modules/jquery/dist/jquery.min.js"></script>
    <!-- Bootstrap JS -->
<script src="node_modules/bootstrap/dist/js/bootstrap.min.js"></script>  

 Creating root component

Create a file app.component.html under app folder and add the following HTML code

<nav class="navbar navbar-default">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="#"><i class="glyphicon glyphicon-briefcase"></i> Pet Care</a>
        </div>
        <div id="navbar" class="navbar-collapse collapse">
          <ul class="nav navbar-nav">
            <li><a href="#">Home</a></li>
            <li><a href="#">Cats</a></li>
            <li><a href="#">Dogs</a></li>
          </ul>
        </div><!--/.nav-collapse -->
      </div>
    </nav>
    <div class="container page">
     content here
    </div>

In app/app.component.ts update ‘template’ to templateUrl: ‘app/app.component.html’

You can also use template and put the above HTML code between “ (backticks) available below the ‘Esc’ key.

Make changes in package.json

(line: 6) "start": "tsc && concurrently \"npm run tsc:w\" \"npm run lite\" "
to
"start": "concurrently \"npm run tsc:w\" \"npm run lite\" "

In command prompt in ‘petcare’ folder now run

npm start

If you see the output as below in your browser then twitter bootstrap is added properly to your app

Angular 2

This is the first part of a 5-part blog series.  Don’t miss the next four!

Reference: Based on the tutorial article Routing Angular 2 Single Page Apps with the Component Router by Chris Nwamba on scotch.io

Vinod Narayanan

Vinod Narayanan

Vinod Narayanan works with Trigent Software as Technical Lead (UI Development). Vinod has over ten years of experience in analysis, design and development, testing and implementation of web based applications. His areas of expertise include Responsive UI and SharePoint Branding.

5 thoughts on “Angular 2 Single Page Apps using Routing – Part 1

  1. You can certainly see your skills in the work you write. The world hopes for even more passionate writers like you who are not afraid to mention how they believe. At all times go after your heart.|

  2. Hi! I could have sworn I’ve been to this website before but after reading through some of the post I realized it’s new to me. Nonetheless, I’m definitely happy I found it and I’ll be book-marking and checking back often!|

Comments are closed.