Getting Started With Angular 2

Introduction

This article will cover the following things,

• Brief Concepts
• Implementation – Download and install angular-2 quick feed using NPM
• Implementation – Download and install VS Code
• Implementation – Run a quick-start angular2 feed application using Angular2 in VS Code
• Implementation – Develop a basic Customer application using Angular2 in Visual Studio 2015 from scratch

Brief Concepts

What is Angular2?

• One framework - Mobile & desktop.
• Angular 2.0 was announced at the ng-Europe conference, September 22-23, 2014.
• The final version was released on September 14, 2016.

Benefits of Angular2

• Platform Independent
• Can be developed and deployed on any platform, completely open-source
  
  
• Quick and secure
• New addition in the Angular2 allows us to have a better speed as far as loading or processing of application is concerned and it's totally component based. We are not really restricted within the framework as we were in AngularJS 1.X

Implementation – Download and install Angular 2 quick feed using NPM

Steps to be followed

Create a folder structure with name “Angular2-sample” and then check out the quick start feed using git (we need to install git before that).

Get the default folder structure with the default files for start working on Angular2.

Here, you are good to go with Angular2.

Implementation – Download and install VS Code.

Steps to be followed

Go the URL -- https://code.visualstudio.com/download, download it, and then install it.

Implementation – Run a QuickStart Angular2 feed application using Angular2 in VS Code.

Steps to be followed

Open VS Code and open the project created by the quick-feed of Angular2

Go to the folder location in cmd.exe, run the “npm install” command and wait for a couple of minutes.

Write “npm start” in the command prompt now and see the application getting executed.

After running this command, the browser will open automatically and run the application.

Implementation – Develop a basic Customer application using Angular2 in Visual Studio 2015 from scratch.

Steps to be followed

Open VS 2015 and create a new project with blank templates.

Add folders for clear separation, like “Model” and “View” here.

Add Customer.html in the Views folder and write some basic code for displaying CustomerName.

Create Customer.ts file to add a property there.

Create configuration files for reference and we can pick those files from quick-feed projects.

• Add package.json into the project and copy and paste the code from the quick-feed project.

Add tsconfig.json into the project and copy and paste the code from the quick-feed project.

Add systemjs.config.js into the project and copy and paste the code from the quick-feed project.

Now, go to the project location and run “npm install” through NPM.

Exclude package.json file from the solution as there are a few defects with VS 2015.

Now, add a folder BindingViewModel and add a file “CustomerCompoent.ts” there. Import Component and Customer class there and create a object inside the class.

Now, add a Main.html file in the View folder and add a view named as “customer-ui”, which will be referred by “CustomerComponent” and load the Customer.html there going forward.

Now, go to the CustomerComponent.ts again and add a decorator there where we refer the selector and templateURL.

Now, create a CustomerModule in the “BindingViewModel” where we create a module for the application and refer all the necessary things such as CustomerComponent and others.

Then, create a start-up main file which will be responsible for starting up the application after having model, component, and module files in place.

Now, go to the Main.html file and add few scripts and script code for running the app.

Then, do some changes in the systemjs.config.js file relevant to the folder structure.

Then, do the binding in Customer.html file for displaying the CustomerName data.

Run the application and see the result.

Note - Both the demos are attached in zipped format for reference. You can download and test this code.

 

Happy Learning!