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: 2nd May, 2024 The success of machine learning models often depends on the…
When working on a machine learning project, one of the key challenges faced by data…
Last updated: 1st May, 2024 The bias-variance trade-off is a fundamental concept in machine learning…
Last updated: 1st May, 2024 As a data scientist, understanding the nuances of various cost…
Last updated: 1st May, 2024 In this post, you will learn the concepts related to…
Last updated: 26th April, 2024 In this blog post, we will discuss the logistic regression…