Angular2 Series - Part One - Getting Started

Angular2 (developed by Google) has been one of the most popular and most preferred JavaScript frameworks used for creating a single page applications (SPAs) for web and mobile devices. It is more powerful and faster than the old/previous versions of Angular; i.e., Angular 1.x. In this series of articles, we’ll try to dabble around the various modules/integrations of Angular2 by building a real development app throughout the article series.This course assumes that you have a sound understanding of Typescript language.

Well to start off with Angular2, we need to set up the environment, which includes

Selection of Editor for programming Angular2 app
It can be “Brackets”, “Visual Studio 2015 or any other versions”, “Visual Studio Code” etc. In this series, we are going to use “Visual Studio Code”. It’s an open source code editor, which is developed by Microsoft for Windows, Linux & MacOs. You can download Visual Studio code from the link.
Selection of Programming Language
Angular2 apps can be written using multiple programming languages such as “JavaScript," “Typescript," “ES2015”&“DART." In this series, we’ll be using “Typescript” as the programming language, which is again developed by Microsoft. It’s a superset of JavaScript and also includes OOPS features such as classes, interfaces, abstraction, encapsulation etc. You can download Typescript language from this link.
Installing NPM
We’ll be using NPM (Node Package Manager) command line utility to install packages from the GitHub repositories. You can download npm from the link

Now that we are finished with the setting up of our application environment, we need to start building the application architecture of our Angular2 application. There are various GitHub repositories, which accelerate building the application architecture by providing QuickStart Seed/Starter files. In this series, we’ll be using the one provided by Angular.io. Follow the link & download the zip file and store it on your local drive. By default, the name of the starter files would be“quickstart-master;" you can rename it as per your project needs. In this case, I am renaming it “employee-portal”.

Now, it’s time for us to explore the quick start seed / starter files by opening the application in Visual Studio code.

Open Visual Studio code => File => New => Open Folder => Navigate to the “employee-portal” folder and select it. The figure list given below is the same.

On opening the folder, you’ll find a list of files and folders within it, which constitutes the application architecture. The table list given below shows the description of some of the core files.

Root/Main Folder	Sub Folder/File	Description
/ i.e. employee-portal	app	This folder is the root folder of our Angular2 application. It’ll contain all your application modules, sub modules, shared modules, assets which include (css, imgs, jquery plugins & other libraries which will be used within the application). NOTE Each of the modules will contain angular2 components, directives, Injector/services, routing configuration, Templates etc.
/app	app.component.ts	Root Angular2 component of our a pplication, and as the application evolves it will become a tree of nested components.
/app	app.module.ts	It’s the root module of our application, which tells Angular how to assemble the application.
/app	main.ts	Compiles the application with JIT compiler and Bootstraps the application to run in the browser.
/	index.html	The landing page of our application.
/	package.json	It contains the metadata (name, version, description, author etc.) of our application & also it lists the dependencies & development dependencies which are necessary for smooth functioning of our application.
/	style.css	External CSS file.
/	systemjs.config.js	SystemJs Configuration for our Angular2 application. This external module is used for loading the modules on demand.
/	tsconfig.json	Typescript configuration file.
/	tslint.json It defines	Typescript rules. It checks your Typescript code for readability, maintainability & functionality errors.

Since we took these starter files from angular.io, there are certain changes (although not mandatory but to keep things in sync with the application), we’ll have to do such as updating the application metadata (such as name, description, author etc.) in package.json file. By default, the name of the application would be “quickstart-master” in package.json, which needs to be updated as per our application name. Here, I’ve updated it to “employee-portal”. Here are the changes which I did in package.json.

Also in tsconfig.json, I’ve updated the modules property value to “system”, instead of default “CommonJs”, since we are using SystemJs to load the items on demand.

Before we actually start with our development, we need to install the dependencies listed in the package.json file. To install this, we’ll be using npm utility. Open command prompt by pressing “CTRL+Shift+C” on Visual Studio code editor. This will open the command prompt with the application path set. Write command “npm install” to install all the dependencies and dev-dependencies listed in the package.json file. Npm install will search for package.json file, install all the dependencies and dev-dependencies listed.

On the successful installation, you’ll be able to see the snapshot given below. Also, you’ll be able to see a new folder inside your application named “node_modules”, which lists your installed dependencies. In case you are not able to see the output, as shown below, try rerunning the npm and installing again.

Now, we are ready to start our application development. We’ll discuss that in the next series of this course.