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.