CODEWITHSUNDEEP
javascriptangularjsangular
Buddhika Kulathilaka
Buddhika Kulathilaka

Reputation: 497

How to convert angularJS version 1.X controller into angular 2.X using EM6 ngupgrade

angular.module('app', []).controller('MessagesCtrl', function() {

$scope.self.list = [
{text: 'Hello, World!'},
{text: 'This is a message'},
{text: 'And this is another message'}
];

self.clear = function() {
$scope.self.list = [];
};
});

this is a controller written in angular. how can I convert this into angular 2 using EM6.

Upvotes: 0

Views: 871

Answers (1)

Pardeep Jain
Pardeep Jain

Reputation: 86740

well upto my knowledge there are not alot of tutorials for the upgradation but yes thetre are few one.

https://angular.io/docs/ts/latest/guide/upgrade.html

http://blog.thoughtram.io/angular/2015/10/24/upgrading-apps-to-angular-2-using-ngupgrade.html

well let me tell you about basic angular2 app.

in angular 1.x our main module is initilize like this

angular.module('app', [])

but in the angular2 our main component started from the bootstraped file like this.

import {bootstrap} from 'angular2/platform/browser';
import {App} from './app';

bootstrap(App,['here global level dependenices....']);

here app is our main component whihc is imported in this bootstrap file. so bootstraped is file our entry point of the app. and if we want to do some coding stuff like we work in the angular1.x controller here we do the same work in the class file (typescript class) here i am posting one basic example like this.

import {Component, View} from 'angular2/core';

@Component({
    selector: 'app',
    templateUrl: "src/app.html",
    styleUrls: ['src/app.css'],
    directives: [ directives list here....],
})

export class App 
{ 
    // stuff you want to do here 
}

firstly we have to import angular2 bundles from the systemjs bundles like we imported Component and view in this example from the angular2/core. there are alot of imports available for the angular2. you can check out here and here

Upvotes: 1

Related Questions