Learning Angular v2 - Lab One

 Introduction

This is not the first article on Angular v2 available on the web to learn, implement, and use Angular v2 in development of web applications. After thinking a lot about whether should I write this article or not, I realized I should go ahead and write something for beginners.

Basically, you just need to know a bit of JavaScript to learn Angular 2.

Why Angular 2

The most basic question that pops into my mind whenever I see anything new in technology is “Why?". I feel that the question is genuine as a lot of frameworks/languages are already there. So, why do we need another one?

Angular2 is not an upgraded version of Angular JS 1X, it is completely rewritten and gives more flexibility to develop modern browser web applications.

Below are a few reasons to choose Angular 2 for web development.

• Faster browsing experience with modern browsers
• Better performance
• Enhanced Dependency Injection
• Good mobile development support
• Improved Routing

Above are the certain reasons for choosing Angular 2 as a development platform. I will explain each feature in more details later in the labs by giving example.

Prerequisites for Angular 2 web applications

The basic software required to set up and run an Angular application for web development consist of -

• NodeJS and NPM
• Any editor like Visual Studio or Web storm
• TypeScript

Setting up Angular2 project with Visual Studio

Step #1 Installing NodeJS and npm (node package manager)

Go to the link below.

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

Download node from the link as per your machine configuration and install. npm will also be installed as part of Node. Check the version installed on machine using commands node -v and npm -v on command prompt.

Step #2 Install Visual Studio 2015 update 3 or above

For this demo, I am using VS 2017 Enterprise Edition.

Step #3 Install TypeScript for Visual Studio

Go to link below and download TypeScript for VS 2017 and install the same.

https://www.microsoft.com/en-us/download/details.aspx?id=55258

TypeScript

TypeScript lets you write JavaScript the way you really want to. TypeScript is a typed superset of JavaScript that compiles to plain JavaScript. TypeScript is pure object oriented with classes, interfaces, and statically typed like C# or Java.

You can learn more using the below link.

https://www.tutorialspoint.com/typescript/

Step #4 Create a new web project

Open an empty web project and name it anything you want.



Step #5 Copying the Angular start-up files

Go to link https://github.com/angular/quickstart. Download the zip file from the web to your local machine. Unzip it and you will find some files as below.

We need to copy these start up files to the root directory of the Angular web project and include the same in our project.

• Src folder
• bs-config
• package
• tslint

Step #6 Restore the required packages

Right-click on the package.json file copied as start-up files and do a restore package from there.



It will take some time restoring the package mentioned in the package.json file to project. It's worth waiting for some time. 

Once all the required packages are restored, navigate to the project folder using the command prompt.

In my case, the folder is below.



And, run a command: npm start

It will take some time and launch a lite server and host the application with URL local and external.

Local: http://localhost:3000/




So, this has successfully launched the application on port 3000 and URL: http://localhost:3000/

Code which has displayed the Hello Angular on web from is from app.componenet.ts.

import {Component} from '@angular/core';

@Component({
  selector: 'my-app',
  template: `<h1>Hello {{name}}</h1>`,
})
export class AppComponent { name = 'Angular'; }

If we run the application using Visual Studio Editor by selecting the index.html as start page.

We will get the output something like this.

So, the application which is working using Command prompt and Lite Server is now giving some error when we see it through our browser's Developer Tool by pressing F12.

Running application using Visual Studio

If you see the error after running the application, most of the errors are - "404 Not Found".

Index.html

<!DOCTYPE html>
<html>
  <head>
    <title>Angular QuickStart</title>
    <base href="/">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="styles.css">

    <!-- Polyfill(s) for older browsers -->
    <script src="node_modules/core-js/client/shim.min.js"></script>
    <script src="node_modules/zone.js/dist/zone.js"></script>
    <script src="node_modules/systemjs/dist/system.src.js"></script>

    <script src="systemjs.config.js"></script>
    <script>
      System.import('main.js').catch(function(err){ console.error(err); });
    </script>
  </head>

  <body>
    <my-app>Loading AppComponent content here ...</my-app>
  </body>
</html>

Shown above is the code for index.html which we have copied from Angular start-up files. Mentioned below are the changes required to run the application using Visual Studio.

Change #1

<base href="/">

Base is pointing to the root directory but ideally, it should have pointed to src folder. Change the base to point /src/ folder.

Change #2

<script src="node_modules/core-js/client/shim.min.js"></script>
<script src="node_modules/zone.js/dist/zone.js"></script>
<script src="node_modules/systemjs/dist/system.src.js"></script>

This script should point /node_modules/.

Change #3

In system.js file, npm should point to /node_modules/.

 paths: {
      // paths serve as alias
      'npm:': 'node_modules/'
    },
Change 'node_modules/' to '/node_modules/'

Save these changes and run the application from Visual Studio. You can see the website running on the same port but this time, on IIS Express of your local machine rather than the Lite Server

Conclusion

While learning Angular 2, you may have a lot of questions related to TypeScript, different JS files like shim.js, Zone.js, system.js, and other application-related configurations. So, in the upcoming article, I will explain each and everything in a very detailed manner.

Keep learning and keep smiling.

Resources and Useful Links

• https://angular.io/docs
• https://github.com/angular/quickstart