Skip to content
This repository has been archived by the owner on Apr 19, 2018. It is now read-only.

Latest commit

 

History

History

dingo

Folders and files

NameName
Last commit message
Last commit date

parent directory

..
images
images
 
 
nbproject
nbproject
 
 
public
public
 
 
src
src
 
 
.gitignore
.gitignore
 
 
README.md
README.md
 
 
gulpfile.js
gulpfile.js
 
 
package.json
package.json
 
 

README.md

Project Dingo
Project Logo This is a Dingo (Australischer Windhund)

Hello Angular 2

This example shows:

  • how to use Netbeans for working with this HTML5 project
  • how to use Gulp.js to build the Angular 2 TypeScript project
  • how to create and run a Web-Server based on Node.js Express
  • how to use TypeScript as source file language
  • how to use option include in file tsconfig.json
  • how to use an Angular 2 application supported by this Web-Server

Follow the links to find some more information for Netbeans IDE, Gulp.js, Node.js, Express Web-Server, Angular 2 and TypeScript.

System Preparation

Netbeans IDE and the following plugins should be installed:

Make sure that an actual Node.js version is installed on your host.
See: https://nodejs.org/en/download/package-manager/

Project description

Filenames in brackets are generated by the 'Build' process (via Gulp.js).

project ---- public ---- (ng2) ---- (app) ---- (app.component.js)
         |           |                         (app.component.js.map)
         |           |                         (app.module.js)
         |           |                         (app.module.js.map)
         |           |                         (main.js)
         |           |                         (main.js.map)
         |            -- index.html
         |               styles.css
         |               systemjs.config.js
         |
          -- src ---- ng2 ---- app ---- app.component.ts
         |         |                    app.module.ts
         |         |                    main.ts
         |         |
         |          -- server.js
         |             tsconfig.json
         |
          -- package.json
             gulpfile.js
             README.md
             .gitignore

The following files are used:

... and for Angular 2:

Dependencies

See package.json and https://www.npmjs.com/~angular

The module prefix @angular is used for all stable Angular 2 framework modules.

  • @angular/core: Angular core framework
  • @angular/common: Angular commonly needed directives and services
  • @angular/compiler: Angular compiler library
  • @angular/platform-browser: Angular library for using Angular in a web browser
  • @angular/platform-browser-dynamic: Angular library for using Angular in a web browser with JIT compilation
  • rxjs: Reactive Extensions Library for JavaScript (needed be Angular 2 framework)
    see: https://www.npmjs.com/package/rxjs
  • zone.js: library for dynamic extent of asynchronous calls (needed by Angular 2 framework)
    see: https://www.npmjs.com/package/zone.js
  • reflect-metadata: library to add Decorators
    see: https://www.npmjs.com/package/reflect-metadata

Other dependencies:

Development environment dependencies:

Variant A: Build and run project from GIT-Repository

To do (on Linux OS) ...

  1. open shell and clone git repository
    git clone <repository-url>
  2. change working directory to project and install node modules
    cd <project-dir>/dingo
    npm install
  3. transpile the project and start the server
    npm start
  4. start a web-client and test the server
    http://localhost:8080

Gulp.js and package.json

With Gulp.js as build tool a transpilation of the typescript files is needed, before the server can be started.

This transpilation is started automatically with the command npm start, because all the needed steps are configured in the file package.json.

  ...
  "scripts": {
    "prestart": "./node_modules/gulp/bin/gulp.js",
    "start": "node src/server.js"
  },
  ...

See also http://stackoverflow.com/questions/29939697 and https://docs.npmjs.com/misc/scripts for more information.

The following script values are available:

  • prepublish, publish, postpublish
  • preinstall, install, postinstall
  • preuninstall, uninstall, postuninstall
  • preversion, version, postversion
  • pretest, test, posttest
  • prestop, stop, poststop
  • prestart, start, poststart
  • prerestart, restart, postrestart
  • preCUSTOM and postCUSTOM for custom script names.

To install gulp as global module, execute:
sudo npm install -g gulp

Variant B: Create project from scratch

In the following subsections you can see how to create and build a Express/Angular 2 project with Netbeans from scratch.

Create new Netbeans Project from scratch

  • New Project:
    • Categories: HTML5/JavaScript
    • Projects: HTML5/JS Application with Node.js
  • Next -> Select project name and project location
  • Next -> Unselect Enable Express
  • Next -> Create package.json
  • Finish

Delete the file main.js

Modify package.json

Set proper author and repository and add the following entries to prevent warnings and to enable some npm scripts.

{
  "scripts": {
    "start": "node src/server.js"
  },
  "description": "Netbeans, Gulp , Express, Angular2, Typescript",
  "license": "ISC",
  "private": true
}

Install npm modules

Execute in shell on project directory location ...

npm install zone.js --save
npm install rxjs --save
npm install reflect-metadata --save
npm install systemjs --save
npm install express --save
npm install morgan --save
npm install @angular/core --save
npm install @angular/common --save
npm install @angular/compiler --save
npm install @angular/platform-browser --save
npm install @angular/platform-browser-dynamic --save
npm install typescript --save-dev
npm install gulp --save-dev
npm install gulp-sourcemaps --save-dev
npm install gulp-typescript --save-dev
npm install del --save-dev

Create project files

Create the directory src and all files and subdirectories inside using the project file structure shown above.

Create the project files index.html, styles.css and inside the directory public using the project file structure shown above.

systemjs for bootstraping Angular 2 application

Create the file systemjs.config.js inside the directory public. systemjs is a modern dynamic module loader, which is needed to support javascript statements like require("@angular/platform-browser-dynamic").
See also: https://www.npmjs.com/package/systemjs

Configure Typescript Transpiler

See also: https://angular.io/docs/ts/latest/guide/typescript-configuration.html#tsconfig

For transforming the TypeScript source files into ES5 Javascript (which could be executed by each Browser), the command tsc from the Node.js module typescript is used. This tool looks for a configuration file tsconfig.json, before it starts to transform all .ts files which can be found in the project directory (and the subdirectories).

Create the file tsconfig.json in the project base folder. Instead of setting every typscript source file (option files), the option include is used. See also https://www.typescriptlang.org/docs/handbook/tsconfig-json.html. This makes it more comfortable for the user, because there is no need to change tsconfig.js in case of new, removed or renamed source file.

Configure Gulp.js building tool

Create the file gulpfile.js in the project base folder

Configure Netbeans 8.2 project

Open Netbeans Project Properties (right mouse click on project) and set...

  • Category Sources:

    • Site Root Folder: public
    • Site Source Folder: src

  • Catagory Run:

    • Run As: Node.js Application
    • Start File: <project-dir>/src/server.js
    • Run Browser: selected

Run the server and load the main page

Now you can select Run Project. Gulp will build the project and you should see a running Angular 2 application in http://localhost:8080.

Version Control via GIT

Create the file .gitignore and make sure, that the npm modules under node_modules, the files in nbproject/private and the .js in public/app (created by Gulp.js) are not under version control.

Future improvements

The Netbeans 8.2 HTML 5 Webkit and TypeScript plugins does not support some wanted features:
See also: http://netbeans.org/bugzilla/show_bug.cgi?id=257587#c11

  • Debugging of Typescript files inside Netbeans is not possible

    Workarounds:

    • don't use TypeScript for Node.js server app
    • use Chrome web-browser to run TypeScript files (not working with Node.js modules)

  • Netbeans does not support multiple source directories:
    Multiple source directories would make sense to seperate server app from client app. Workarounds:

    • use subdirectory src for client app and server app and locate tsconfig.json in this directory
    • make directory inside subdirectory for client app
    • set project properties, category Sources, Source Folder to this subdirectory src

    Disadvantage:
    tsconfig.json, which is build configuration file is now in the src directory, and therefore visible under category Sources. A better place for this file would be the category *Important Files"

  • Netbeans does not detect some other "important files"
    Files like README.md and tsconfig.ts are only shown in project management browser if they are located in the (configured) source directory. It would make sense to locate them on project root (like the file package.json) and to show them in the category "Important files". This desired behavior is not implemented in the Netbeans 8.2 HTML 5 Kit. Workarounds:

    • for tsconfig.ts: locate the file in subdirectory src
    • for README.md: no workaround known; use category Files in project browser to find this file