Creating First Angular2 Application In Eclipse

running-angular

Creating and running angular2 application on NodeJs using Eclipse can be done using Nodeclipse. Installing and running Nodeclipse is quite easy as it is based on Eclipse IDE and NodeJs. In this IDE you can create and run your angularjs application very easily.

Creating Angular2 application

Launch Nodeclipse and open create new node.js project using new project wizard of eclipse as given below.

nodeeclipse-first-app

Now following following steps to create first angular application.

Add package.json file to define application, dependencies

{
  "name": "angular2",
  "version": "1.0.0",
  "scripts": {
    "start": "npm run lite",
    "lite": "lite-server"
  },
  "license": "ISC",
  "dependencies": {
    "angular2": "2.0.0-beta.2",
    "systemjs": "0.19.6",
    "es6-promise": "^3.0.2",
    "es6-shim": "^0.33.3",
    "reflect-metadata": "0.1.2",
    "rxjs": "5.0.0-beta.0",
    "zone.js": "0.5.10"
  },
  "devDependencies": {
    "lite-server": "^1.3.1"
  }
}

Install these packages select package.json on  the Package Explorer, open context menu by right-clicking, and select [Run As]-[npm install] menu. and this will download and install all packages by running this npm command.

Now add one application folder name app in application root and index.html file.

Now add a file named app.component.js and main.js file in app folder and paste following code in files. You can also copy latest code from angular.io quick start.

structure

app.component.js

(function(app) {
  app.AppComponent =
    ng.core.Component({
      selector: \'my-app\',
      template: \'<h1>My First Angular 2 App</h1>\'
    })
    .Class({
      constructor: function() {}
    });
})(window.app || (window.app = {}));

main.js

(function(app) {
  document.addEventListener(\'DOMContentLoaded\', function() {
    ng.platform.browser.bootstrap(app.AppComponent);
  });
})(window.app || (window.app = {}));

index.html

<html>
  <head>
    <title>Angular 2 QuickStart</title>

    <!-- 1. Load libraries -->
    <!-- IE required polyfill -->
    <script src="node_modules/es6-shim/es6-shim.min.js"></script>

    <script src="node_modules/angular2/bundles/angular2-polyfills.js"></script>
    <script src="node_modules/rxjs/bundles/Rx.umd.js"></script>
    <script src="node_modules/angular2/bundles/angular2-all.umd.js"></script>

    <!-- 2. Load our \'modules\' -->
    <script src=\'app/app.component.js\'></script>
    <script src=\'app/main.js\'></script>
  </head>
  <!-- 3. Display the application -->
  <body>
    <my-app>Loading...</my-app>
  </body>
</html>

Running angular2 node.js application in Nodeclipse IDE

To run application we need to create one http server, for this add server-launch.js file and put following code.

require(\'lite-server\');

Now run application by creating new Run configuration of project.

Image

It will launch a browser Smile

running-angular


One response to “Creating First Angular2 Application In Eclipse”

  1. Hi,

    I have the following in launch-server.js.
    var ls = require(“\’lite-server\’”);

    not sure it’s enough. I get the below error.
    Error: Cannot find module ”lite-server”

    Can you let me know what all code you have in the launch-server.js file please?

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.