Sharing Top Content from the Angular-sphere.

Getting Started With Angular 2

Getting Started With #Angular2 by @gourav8jain cc @CsharpCorner #AngularJS #Angular

  • Introduction

    This article will cover the following things, 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?

  • Steps to be followed

    Go the URL —

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

  • – Run a QuickStart Angular2 feed application using Angular2 in VS Code.
  • 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.

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

This article will give you a quick-startup for Angular2.

@CsharpCorner: Getting Started With #Angular2 by @gourav8jain cc @CsharpCorner #AngularJS #Angular

Introduction

This article will cover the following things,

Brief Concepts

What is Angular2?

Benefits of Angular2

Can be developed and deployed on any platform, completely open-source

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

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.

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.

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

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

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 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.

Getting Started With Angular 2

Comments are closed, but trackbacks and pingbacks are open.