Click here to Skip to main content
13,706,905 members
Click here to Skip to main content
Add your own
alternative version

Stats

93.3K views
2.5K downloads
27 bookmarked
Posted 5 Sep 2015
Licenced CPOL

AngularJS 2.0 Getting Started with Visual Studio

, 5 Sep 2015
Rate this:
Please Sign up or sign in to vote.
In this tip, we will discuss how to setup Angular 2.0 in Visual Studio and write a very basic “Todo” application.

Introduction

As you already know, Angular is a developing platform with modern web standards. Angular 2.0 is the latest version which is still in the developer preview (2015 Aug). There is considerable difference in Angular 2.0 and 1.X.

Step 1

First you have to install nodejs which is the runtime builder for JavaScript. Use the following link to install it.

Then install TypeScript to Visual Studio. It will compile your code to plain JavaScript. Use the following link to install it.

Step 2

Open your Visual Studio and go to File =>New =>project. Then select “HTML Application with TypeScript” as shown in the below image:

Step 3

Open the command prompt in your project folder. To do that, open your project folder and Right click with holding Shift key and select “Open command window here”. Run the below commands to get TypeScript definitions to Angular.

npm install tsd
tsd query angular2 es6-promise rx rx-lite --action install 

Then, go to your Solution explorer and click “Show all files”. It will be as the below image. Include “typings” folder to the project.

Step 4

Right click on the project and go to the properties. Then select “TypeScript Build” tab and change module system property to “CommonJs” as shown in the below image. Keep other settings as default.

One more thing to do before coding. Again go to the project folder and open “TodoSampleApp” CSPROJ file with Notepad. (not the Visual Studio project file. Consider the file type before open.) Add the below property group to this file.

<TypeScriptExperimentalDecorators>true</TypeScriptExperimentalDecorators>

Now file will be as below image:

Step 5

Now you have completed the project setup steps. You just need to code your app now.

Replace your index.html with the following code:

<!DOCTYPE html>
<html>
<head>
    <title>Angular 2</title>
    <meta charset="utf-8" />
</head>
<body>
    <my-app></my-app>

    <script src="https://github.jspm.io/jmcriffey/bower-traceur-runtime@0.0.87/traceur-runtime.js"></script>
    <script src="https://jspm.io/system@0.16.js"></script>
    <script src="https://code.angularjs.org/2.0.0-alpha.28/angular2.dev.js"></script>
    <script>System.import('app');</script>
</body>
</html>

Replace your app.ts code with the below code:

import {Component, View, bootstrap, NgFor} from 'angular2/angular2';

@Component({
    selector: "my-app",
   
})

@View({
    templateUrl: 'mainForm.html',
    directives: [NgFor]
})

class TodoAppComponent {

    todos: Array<Object>;

    constructor() {
        this.todos = [{ text: "Try Second", done: true }] 
    }

    get() {
        return this.todos;
    }

    add($event, newtodo) {

        if ($event.which === 13) {
            this.todos.unshift({ text: newtodo.value, done: false });
            newtodo.value = ''
        }

    }

    markAsDone(todo) {
        todo.done = !todo.done;
    }
}

bootstrap(TodoAppComponent);

Add html file and rename as “mainForm” and replace it with the below code:

<h1>Hellow Angular 2</h1>

<div style="text-align:center">
    <input type="text"

           placeholder="New todo.."

           #newtodo

           (keyup)="add($event,newtodo)">
    
</div>
<table>
    <tr *ng-for="#todo of get()">
        <td>
            {{todo.text}}
        </td>
        <td>
            <input type="checkbox" name="vehicle" checked="{{todo.done}}">
        </td>
    </tr>
</table>

Congratulations …!!! You just completed your todoApp.

There are many resources available for Angular 2.0 theory in the community. So if you are still new to this, please try to understand the basic concepts first because I have not covered the basic concepts. This is just a small practical session.

In the next tip, we will study a little more complex sample app with “appInjector” in Angular 2.0.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

Thinira
Software Developer (Senior) ISM APAC (Pvt) Ltd
Sri Lanka Sri Lanka
No Biography provided

You may also be interested in...

Pro
Pro

Comments and Discussions

 
Questionnpm install tsd - Visual Studio 2015 Pin
suhel_khan28-Nov-16 19:47
professionalsuhel_khan28-Nov-16 19:47 
QuestionIn Step 3 this command is not working: "tsd query angular2 es6-promise rx rx-lite --action install " Pin
Rajesh_Pa29-Aug-16 23:29
memberRajesh_Pa29-Aug-16 23:29 
QuestionNodeJS is the "runtime builder for JavaScript"? Pin
Rick Shaw4-Jul-16 22:17
memberRick Shaw4-Jul-16 22:17 
QuestionStop working after any change Pin
BMicka12-Apr-16 20:55
memberBMicka12-Apr-16 20:55 
Questionhave you tried with vs2013? which version you used for this application? Pin
Mansoor Alikhan K27-Dec-15 22:23
professionalMansoor Alikhan K27-Dec-15 22:23 
QuestionDoesn't work in VS 2012 - missing on step 4 the 'Typescript build' option under properties Pin
23-Dec-15 10:15
member23-Dec-15 10:15 
QuestionWorks only with html with typescript Pin
Jeevanandan J22-Dec-15 19:00
memberJeevanandan J22-Dec-15 19:00 
QuestionDebugging in VS Pin
commerce@jant.de30-Nov-15 3:31
membercommerce@jant.de30-Nov-15 3:31 
QuestionError angular/angular2 Pin
piermorosini15-Nov-15 22:13
memberpiermorosini15-Nov-15 22:13 
AnswerRe: Error angular/angular2 Pin
piermorosini16-Nov-15 8:02
memberpiermorosini16-Nov-15 8:02 
GeneralRe: Error angular/angular2 Pin
iceborg21-Dec-15 4:28
membericeborg21-Dec-15 4:28 
BugError, cannot find module. Pin
Bonum Signum1-Nov-15 6:16
memberBonum Signum1-Nov-15 6:16 
QuestionGetting Error: Cannot find module 'angular2/angular2' Pin
Nav Ali18-Oct-15 12:10
memberNav Ali18-Oct-15 12:10 
QuestionCan't run in IE 11 Pin
kkssccyycc14-Sep-15 8:35
memberkkssccyycc14-Sep-15 8:35 
Questionif change angular2 from /2.0.0-alpha.28/ to /2.0.0-alpha.37/ Pin
kkssccyycc14-Sep-15 8:11
memberkkssccyycc14-Sep-15 8:11 
GeneralGood article. Pin
9-Sep-15 19:15
member9-Sep-15 19:15 
SuggestionNot really for beginners Pin
harsimranb8-Sep-15 8:21
memberharsimranb8-Sep-15 8:21 
GeneralRe: Not really for beginners Pin
Thinira8-Sep-15 18:49
memberThinira8-Sep-15 18:49 
QuestionNeeds more Pin
Ed Bouras8-Sep-15 5:19
memberEd Bouras8-Sep-15 5:19 
BugTSD Pin
resnik8-Sep-15 4:31
memberresnik8-Sep-15 4:31 
AnswerRe: TSD Pin
Laz_X9-Sep-15 15:33
memberLaz_X9-Sep-15 15:33 
GeneralRe: TSD Pin
resnik10-Sep-15 16:15
memberresnik10-Sep-15 16:15 
GeneralRe: TSD Pin
Jeevanandan J22-Dec-15 18:51
memberJeevanandan J22-Dec-15 18:51 
GeneralMy vote of 4 Pin
Abhishek Kumar Goswami8-Sep-15 3:13
professionalAbhishek Kumar Goswami8-Sep-15 3:13 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

Permalink | Advertise | Privacy | Cookies | Terms of Use | Mobile
Web01-2016 | 2.8.180920.1 | Last Updated 5 Sep 2015
Article Copyright 2015 by Thinira
Everything else Copyright © CodeProject, 1999-2018
Layout: fixed | fluid