Scaffold and make "Hello World" with AngularJs 2 - TypeScript and plain JavaScript

Fri Oct 23 2015

Paul Shan

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)

npm install systemjs    
npm install typescript
npm install angular2

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


  
    Angular 2 QuickStart

    
    
    
    
    
    
    
    
    

    
    

  
  
    loading...
  

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.
import {bootstrap} from 'angular2/platform/browser';
import {App} from './app.ts';
bootstrap(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.
import {Component,View, bootstrap} from 'angular2/angular2';
@Component({
    selector: 'my-app',
})

@View({
    template: '

Hello World

' }) export class 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)

npm install angular2
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


  
    Angular 2 by Void Canvas
    
    
  
  
    loading...
  

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

app.js

(function() {
	var AppComponent = ng
	  .Component({
	    selector: 'my-app',
	  })
	  .View({
	    template: '

Hello World

' }) .Class({ constructor: function () { } }); document.addEventListener('DOMContentLoaded', function() { ng.bootstrap(AppComponent); }); })();

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.

SHARE THIS ARTICLE

post-thumbnail
Today everyone knows the importance of a lightning-fast website and how the speed impacts the conversion rate of a business. Today, everyone wants the site to be a PWA so that the mobile users can have an app-like experience with the website because, for the majority of the merchants, the customers come through mobile devices.
Tue Apr 20 2021
post-thumbnail
Here we are going to see how you can manage backup and restore of Postgres database with docker.
Thu Sep 03 2020
post-thumbnail
Image sliders or carousels always have increased the UI attraction of websites and they are pretty useful for reflecting the major roles/products too. In case, I am having a website that sells tee-shirts,
Mon Apr 30 2018

About VoidCanvas

This blog was created out of hobby and talks mostly about technology, web development, JavaScript, NodeJS and related topics. Thank you for reading my blog.

Copyright 2022 - www.voidcanvas.com

Popular Articles

Authentication using Google's oAuth api with node.js

Thu Mar 10 2016

OAuth authentications are pretty popular now a days and another thing which is popular is JavaScript. This article shows how to plugin google’s oAuth api for authentication in your own node application.

CSS3 Loader Snippet Collection: (Part 2 - Squares)

Sat Mar 01 2014

This is a continuation of my CSS3 loader snippet collection series. I've provided spinning css3 animation loader in the part 1 of this series and here in part 2, I'm providing various square type loading