Angular 2 – Hello World Concepts & Code Samples

February 26, 2016 by Ajitesh Kumar · Leave a comment
This article represents concepts and code examples related with Angular 2 Hello World. Trust me it is not as simple as Angular 1 Hello World where we talked about familiar Controller, View and Model. Who said Angular had steep learning curve. Angular 2 is going to haunt an average UI developer much more. 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 points described later in this article:

  • HelloWorld Component Concept
  • HelloWorld Component Code Sample
  • Index.html Code Sample
HelloWorld Component Concept

Following are some of the key points to note in the HelloComponent shown in the code sample later in this article:

  • Top-Level Component: An Angular 2 app is represented by a top-level component which when loaded (as the webpage gets loaded) loads internal/child components.
  • Component: The Angular 2 component represents a view element on the web page, identified by a selector which is defined as part of Component metadata definition. Take a look at code sample below that defines “hello” selector within @Component metadata definition.
  • View: A component will have a View associated with it. The view is defined using @View metadata. The @View metadata defines the template which is used to display HTML code snippet. Note that the template definition could consist of other child components’ selectors instead of plain HTML.
  • Class: A Component could have a Class associated which is used to have properties and methods that help interact with associated view. Note that class is exported. This makes the
  • Bootstrapping Angular app: Angular 2 component needs to be bootstrapped and loaded into the browser within selector tag. This is where “bootstrap” function comes into picture.

 

HelloWorld Component Code Sample

Save the code below as hello.component.ts in a folder named as “app”. Node that this folder is created within the root folder where files such as following are created:

  • tsconfig.json
  • typings.json
  • package.json

For details on this files and related code, check this page. The component shown below will be accessed with name as “hello.component” owing to the fact that it exports the class using “export” keyword.

/** Imports Component & View from Angular2 Core, primary Angular library
Component and View are metadatas used to define a component and a view. Component metadata
helps Angular understand that the class HelloComponent is an Angular Component.
 */
import {Component, View} from 'angular2/core';

/**
bootstrap is Angular browser bootstrap function which is used to ask
Angular to launch app in the browser within the selector specified within Component metadata.
*/
import {bootstrap} from 'angular2/platform/browser';

/**
Component metadata used to tell Angular that class HelloComponent is an Angular
component identified with selector such as "hello"
*/
@Component({
  selector: 'hello'
})
@View({
  template: '<h1>Hello, {{name}}</h1>'
})

/** Exports the component named as HelloComponent
The act of exporting turn the file hello.component.ts as a module. The name of the
component is hello.component (without extension)
*/
export class HelloComponent {
  name = "Calvin Hobbes";
};

bootstrap(HelloComponent);

 

Index.html Code Sample

Following can be noted in the code below:

  • Save the code below in a file named as index.html in a level up than where the component files are saved within “app” folder.
  • The Angular 2 app is loaded using selector “hello”.
  • A set of Javascript libraries are loaded. Learn the details on this page.
  • SystemJS is used to load the Angular 2 app using System function. Learn about the System configuration on this page.
  • As Angular calls the bootstrap function in hello.component.ts, it reads the HelloComponent metadata, finds the hello selector, locates an element tag named hello, and loads the application between those tags.
  • Execute the command, “npm start” to load the angular app.
<html>
  <head>
    <title>Angular 2 QuickStart</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://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>Loading...</hello>
  </body>

</html>

 

Ajitesh Kumar
Latest posts by Ajitesh Kumar (see all)

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.
Posted in AngularJS, Javascript, Web. Tagged with , .