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:

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

• https://angular.io/
• http://www.angular2.com/
• http://learnangular2.com/
• https://www.tutorialspoint.com/angular2/index.htm

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

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

“