Angular 2 without TypeScript or Node

A couple of folks with whom I interacted, seem to be overwhelmed with the overheads of having to deal with ES6, TypeScript and Node while trying to learn Angular 2.

The fact is these are all optional, and one can write Angular2 apps in plain simple JavaScript (ES5) that you use today.

Today we’ll rewrite the Tour of Heroes Angular 2 tutorial in plain simple ES5 without the need for Node or TypeScript.

However before we go about doing that, I must mention that if you are looking to build medium to large scale Angular apps and are working in teams, then you must build them using TypeScript. The productivity boost one can get by using TypeScript is tremendous.

The aim behind publishing this article is to merely help you understand the core concepts of Angular2, without complicating it with concepts from ES6 & TypeScript.

Components

So the first thing to remember about an Angular2 app is, it is a collection of components arranged in a component tree. We will have a root component and other components would be nested within it.

What this means is, you should now be looking at your app component-wise rather than screen-wise.

Let’s start by including the Angular 2 library in our index.html file as follows:

<script type=”text/javascript” src =”https://code.angularjs.org/2.0.0-alpha.44/angular2.sfx.dev.js"></script>

Notice we are using the Self Executing Bundle (sfx) version of Angular. The sfx version exposes the angular object at the global scope which is ready for us use without having to get into the complexity of SystemJS or any other module loader.

We will start simple , by creating our app consisting of the root component, the dashboard component and a service to mock the data. Since it is always a good practice to create each of these as individual files, lets do that and call them in our index.html file as follows:

<script type=”text/javascript” src=”src/hero.service.js”></script><script type=”text/javascript” src=”src/dashboard.component.js”></script>

<script type=”text/javascript” src=”src/app.component.js”></script>

To make sure both the Hero service and dashboard component are available during bootstrapping I call them before the app.component.js file.

Next within the body tag we’ll need to place our component selector.

<my-app></my-app>

Next we create the app.component.js file with the following code

//app.component.js

var MyApp = ng .Component({   selector: ‘my-app’, }) .View({   directives: [Dashboard],   templateUrl: ‘src/app.component.html’ }) .Class({   constructor: function() {} });document.addEventListener(‘DOMContentLoaded’, function() { ng.bootstrap(MyApp);});

The angular object exposes the .Component, View and .Class methods which we use to build our component.

Within the component we define the DOM element selector within which this component will load. In the view we pass the list of directives or components that are being used in the component and also define the template file.

The last piece of code is used to bootstrap Angular and mark the root node.

The template code for the app.component.html will be

<h1>Tour of Heroes</h1> <a href=”#” class=”router-link”>Dashboard</a> <a href=”#” class=”router-link”>Heroes</a><hr/> <my-dashboard></my-dashboard>

Since we are focusing on the dashboard component for now, we’ll simply have the Dashboard and Heroes links as dummy links and place our my-dashboard selector within which our dashboard component will load.

Let’s create the dashboard component.

var Dashboard = ng  .Component({     selector: ‘my-dashboard’,     bindings: [HeroService],     properties: [‘model’]   })   .View({     directives: [ng.NgFor],     templateUrl: ‘src/dashboard.component.html’   })   .Class({      constructor: [HeroService, function(HeroService) {         this.heroes = HeroService.getHeroes(); }] });

You’ll notice that in the dashboard component besides the selector we also define bindings to the HeroService and model property. Within the views we call out the dependency for the NgFor directive, and within the constructor class we call in the dependency for the HeroService and create our heroes object.

The HTML code that goes into the dashboard.component.html file is as follows:

<link rel=”stylesheet” type=”text/css” href=”dashboard.component.css”>

<h3>Top Heroes</h3><div class=”grid grid-pad”>   <div *ng-for=”#hero of heroes | slice:0:4" class=”col-1–4" >     <div class=”module hero”>       <h4>{{hero.name}}</h4>     </div>   </div></div>

Components in Angular 2 have their own ShadowDOM boundaries and hence the styling for each component is loaded and applied within the component itself.

The CSS for the dashboard.component.css is as follows:

[class*=’col-’] { float: left; }

*, *:after, *:before {   -webkit-box-sizing: border-box;   -moz-box-sizing: border-box;   box-sizing: border-box;}

h3 { text-align: center; margin-bottom: 0; }

[class*=’col-’] { padding-right: 20px; padding-bottom: 20px;}[class*=’col-’]:last-of-type { padding-right: 0; }

.grid { margin: 0 10em; }.col-1–4 { width: 25%; }.module {   padding: 20px;   text-align: center;   color: #eee;   max-height: 120px;   min-width: 120px;   background-color: #1171a3;}

.module:hover { background-color: #52b9e9; cursor: pointer; }

.grid-pad { padding: 20px 0 20px 20px; }.grid-pad > [class*=’col-’]:last-of-type { padding-right: 20px; }

@media (max-width: 600px) {   .module { font-size: 10px; max-height: 75px; }}

@media (max-width: 1024px) { .grid { margin: 0; } .module { min-width: 60px; }}

Finally let’s create our Heroes Service which will stub out a list of heroes

//heroes.service.js

var HeroService = function() {};HeroService.prototype.getHeroes = function() {

var heroes = [ { “id”: 11, “name”: “Mr. Nice” }, { “id”: 12, “name”: “Narco” }, { “id”: 13, “name”: “Bombasto” }, { “id”: 14, “name”: “Celeritas” }, { “id”: 15, “name”: “Magneta” }, { “id”: 16, “name”: “RubberMan” }, { “id”: 17, “name”: “Dynama” }, { “id”: 18, “name”: “Dr IQ” }, { “id”: 19, “name”: “Magma” }, { “id”: 20, “name”: “Tornado” }]; return heroes;};

Save the files and load index.html in a web browser to see the list of heroes showing up in nice blue tiles.

The above code is available on github at https://github.com/areai51/angular2-tour-of-heroes-es5