Angular 2 – Hello World Concepts & Code Samples

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

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.

Share
Published by
Ajitesh Kumar

Recent Posts

Agentic Reasoning Design Patterns in AI: Examples

In recent years, artificial intelligence (AI) has evolved to include more sophisticated and capable agents,…

3 weeks ago

LLMs for Adaptive Learning & Personalized Education

Adaptive learning helps in tailoring learning experiences to fit the unique needs of each student.…

4 weeks ago

Sparse Mixture of Experts (MoE) Models: Examples

With the increasing demand for more powerful machine learning (ML) systems that can handle diverse…

1 month ago

Anxiety Disorder Detection & Machine Learning Techniques

Anxiety is a common mental health condition that affects millions of people around the world.…

1 month ago

Confounder Features & Machine Learning Models: Examples

In machine learning, confounder features or variables can significantly affect the accuracy and validity of…

1 month ago

Credit Card Fraud Detection & Machine Learning

Last updated: 26 Sept, 2024 Credit card fraud detection is a major concern for credit…

1 month ago