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>
In recent years, artificial intelligence (AI) has evolved to include more sophisticated and capable agents,…
Adaptive learning helps in tailoring learning experiences to fit the unique needs of each student.…
With the increasing demand for more powerful machine learning (ML) systems that can handle diverse…
Anxiety is a common mental health condition that affects millions of people around the world.…
In machine learning, confounder features or variables can significantly affect the accuracy and validity of…
Last updated: 26 Sept, 2024 Credit card fraud detection is a major concern for credit…