Categories: AngularJSJavascriptWeb

5 Reasons Angular 2 Hello World is Trickier than AngularJS 1 Hello World

This article represents my thoughts on why Angular 2 apps is trickier to write than AngularJS 1 apps. I have represented the Hello World code to demonstrate the same. Please feel free to comment/suggest if I missed to mention one or more important points. Also, sorry for the typos.

Following are the key reasons:

Components Vs Controllers: In Angular 2 Apps, what is key is Components associated with a View. These components have got a selector, a View and a set of properties and methods encapsulated within a Class. In AngularJS 1, it was all about Controllers having logic to interact with View. It was very easy to bootstrap AngularJS 1 apps with an inclusion of ng-app directive.
NPM Lite Server (Angular 2) vs Web Page Access (AngularJS 1): In AngularJS 1 apps, it was as simple as including an ng-app directive in an HTML page and instantiating an Angular Module and associated controllers. As the web page was accessed in the browser, the AngularJS 1 app used to get loaded. Angular 2 apps could be accessed using a lite server, which is a lightweight node server that serves a web app, opens it in the browser, refreshes when html or javascript changes. The Angular 2 apps are started with command such as “npm start” which in turn runs two commands such as “npm run tsc -w” and “npm run lite” concurrently.

More Code vs Lesser Code: After writing an Angular 2 app, I could say that one would need to write much more code to achieve Hello World than what could have done with AngularJS 1. Lets take a look at Hello World app written with AngularJS 1.

<html>
<head>
 <title>AngularJS - Hello World</title>
 <link rel="stylesheet" type="text/css" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
</head>
<body class="container" ng-app="HelloApp" ng-controller="HelloCtrl">
 <h1>Hello, My name is {{name}}</h1>
 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.6/angular.min.js"></script>
 <script type="text/javascript">
  angular.module('HelloApp', [])
   .controller('HelloCtrl', ['$scope', function($scope){
    $scope.name = "Calvin";
   }])
 </script>
</body>
</html>

Now take a look at just the Angular 2 Hello world. At the minimum, one index.html and one component file needs to be written. In addition to that, one would require to setup the dev environment. Following is the hello component.

import {Component, View} from 'angular2/core';
import {bootstrap} from 'angular2/platform/browser';

@Component({
  selector: 'hello'
})
@View({
  template: '

<h1>Hello, {{name}}</h1>
‘ }) export class HelloComponent { name = ‘Calvin Hobbes’; }; bootstrap(HelloComponent);

Apart from above component, one would need to setup the Angular 2 dev environment and then write an index.html which may look like below.

<html>
  <head>
    <title>Angular 2 Hello World</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

    <!-- Optional theme -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">

    <!-- Latest compiled and minified JavaScript -->
    <script src="https://code.jquery.com/jquery-2.2.0.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>

    <!-- 1. Load libraries -->
    <!-- IE required polyfills, in this exact order -->
    <script src="node_modules/es6-shim/es6-shim.min.js"></script>
    <script src="node_modules/systemjs/dist/system-polyfills.js"></script>

    <script src="node_modules/angular2/bundles/angular2-polyfills.js"></script>
    <script src="node_modules/systemjs/dist/system.src.js"></script>
    <script src="node_modules/rxjs/bundles/Rx.js"></script>
    <script src="node_modules/angular2/bundles/angular2.dev.js"></script>

    <!-- 2. Configure SystemJS -->
    <script>
      System.config({
        packages: {
          app: {
            format: 'register',
            defaultExtension: 'js'
          }
        }
      });
      System.import('app/hello.component')
            .then(null, console.error.bind(console));
    </script>

  </head>

  <!-- 3. Display the application -->
  <body class="container">
    <hello-text>Loading...</hello-text>
  </body>

</html>

Support for TypeScript in Angular 2: Angular 2 supports code to be written using TypeScript programming language.
Steeper Learning Curve to Get Started with Angular 2: If you are starting Angular 2 fresh, you would have greater learning curve than Angular 1. This is primarily because Angular 2 would need you to have knowledge in NodeJS, TypeScript (optional though), component-oriented design etc.

Author
Recent Posts

Ajitesh Kumar

I have been recently working in the area of Data analytics including Data Science and Machine Learning / Deep Learning. I am also passionate about different technologies including programming languages such as Java/JEE, Javascript, Python, R, Julia, etc, and technologies such as Blockchain, mobile computing, cloud-native technologies, application security, cloud computing platforms, big data, etc. I would love to connect with you on Linkedin.
Check out my latest book titled as First Principles Thinking: Building winning products using first principles thinking.