Following are the key points described later in this article:
Following are some of the key points to note in the HelloComponent shown in the code sample later in this article:
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:
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);
Following can be noted in the code below:
<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>
Last updated: 25th Jan, 2025 Have you ever wondered how to seamlessly integrate the vast…
Hey there! As I venture into building agentic MEAN apps with LangChain.js, I wanted to…
Software-as-a-Service (SaaS) providers have long relied on traditional chatbot solutions like AWS Lex and Google…
Retrieval-Augmented Generation (RAG) is an innovative generative AI method that combines retrieval-based search with large…
The combination of Retrieval-Augmented Generation (RAG) and powerful language models enables the development of sophisticated…
Have you ever wondered how to use OpenAI APIs to create custom chatbots? With advancements…