Scaffold and make “Hello World” with AngularJs 2 – TypeScript and plain JavaScript

Angular 2.0 is still beta (I’m using beta.1 here). If you find any difficulties to implement those what’s written in the article (though I will try to keep the article updated always), please post a comment about that. Refer to the github repo for working examples.

Angular 2 is different and has significant syntax and concept changes. Even if you are an angular developer (1.*.*), version 2 will be a new thing and you may need to start with very much down the line.

As we know Angular 2.0 supports Typescript and as well as plain JavaScript, in this article I will show you how to scaffold your first angular 2.0 app in both the ways. (Angular 2.0 can also be ran using dart.js, which is not covered here)

Scaffolding Angular 2.0 with TypeScript

For 2.0, maximum people recommend Typescript because TypeScript is stable compared to Dart and it is using ES6 features. Lets follow the steps below to scaffold and making a program to print Hello World.

Install packages

Create a folder for your app. Inside the folder run the following command one by one. (if you don’t have npm installed, kindly install it first)

Create basic files

Create 2 different files, index.html and app.ts. You are well aware of index.html. app.ts contains your angular 2 app code.

index.html

system.src.js is required for AMD (asynchronous module definition). typescript.js is obvious as we are using typescript for angular 2.0. And after that our very own Angular 2.0 alpha.

You have to explicitly declare the transpiler as typescript because by default it is set to JavaScript.

bootstrap.ts

This is the guy who will bootstrap your app.

app.ts

app.ts is going to be the first component in your application. If you see in the index.html, we already used the app component by using its selector my-app.

description

  • @Component : This signifies that App is a component. It accepts an object. The selector property indicates what should be the HTML selector for this component.
  • @View : The @View annotation specifies the HTML template to use, and lists the directives that are active within the template. When a component is instantiated, the template is loaded into the component’s shadow root, and the expressions and statements in the template are evaluated against the component.

You must create a component for your app because Angular 2.0 is completely based on that. Though I’ve given the template property inside the @View(), but this can also be given directly inside the @Component(). However if you have a @View(), the template must be inside it.

Host and test

You can simply host your files using any of the following modules.

  • serve (npm install serve)
  • live-server (npm install live-server)

Scaffolding Angular 2.0 with Plain JavaScript

You don’t like TypeScript? Want to develop Angular 2.0 apps with native JavaScript? No problem; let’s scaffold and print Hello World using native JavaScript.

Install packages

Create a folder for your app. Inside the folder run the following command one by one. (if you don’t have npm installed, kindly install it first)

This is the one and only package you need, no other dependency.

Create necessary files

index.html is what you need. And with that you also need an app.js to code angular 2 application.

index.html

Just include the angular 2.0 library and the app.js. Don’t forget to include the selector.

app.js

description

  • Component() : This signifies that you are creating an component. Angular 2.0 is all about components as I said earlier.
  • View() : The View annotation specifies the HTML template to use, and lists the directives that are active within the template. When a component is instantiated, the template is loaded into the component’s shadow root, and the expressions and statements in the template are evaluated against the component.

If you want to develop Angular 2.0 app using JavaScript, that AMD (asynchronous module definition) concept is out of scope. All angular modules are included in the first go. So, Component and View are available with ng.

Host and test

You don’t need to host. If you open the index.html in your browser your app will work fine. However you can use npm packages like serve or live-server to host and test.

Starter kit

You can download the scaffolded app mentioned in the article from this github repo. This can also be forked as a base starter kit.


Still having issues?

If you still have issues understanding the above article, please leave a comment below and we will try to address that. In case you need help in your projects or understanding anything related to Programming; contact me, Paul Shan for assistance. Thank you for being a reader of VoidCanvas.

About This Author

Hello! I am Paul Shan, a JavaScript Expert, Full Stack and DevOps Engineer cum Consultant based out of Bengaluru, India.

  • JimTheMan

    This information isn’t wrong, but isn’t there an easier way by using the angular cli?

  • Khwab

    How to choose between these two? I mean when to go for TypeScript and when to go with SFX?