Angular Js 2 built-in components - built-in component app demo
import { Component } from 'angular2/core';import { bootstrap } from 'angular2/platform/browser';
@Component({
selector: 'ng-non-bindable-sample-app',
template: `
<div>
<span class="bordered">{{ content }}</span>
<span class="pre" ngNonBindable>
← This is what {{ content }} rendered
</span>
</div>
`
})
class NgNonBindableSampleApp {
content: string;
constructor() {
this.content = 'Some text';
}
}
bootstrap(NgNonBindableSampleApp);
/*******************************************************************/
The styles.css file used has the following code.
.bordered {
border: 1px dashed black;
background-color: #eee;
padding: 10px;
}
.pre {
font-family: monospace;
}
.ui.menu .item img.logo {
margin-right: 1.5em;
}
/*******************************************************************/
The index.html has the following code.
<!doctype html>
<html>
<head>
<title>Angular 2 - ngNonBindable demo</title>
<link rel="icon" type="image/png" href="resources/images/favicon-32x32.png" sizes="32x32" />
<link rel="icon" href="resources/images/favicon.ico" />
<!-- Libraries -->
<script src="node_modules/es6-shim/es6-shim.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>
<!-- Stylesheet -->
<link rel="stylesheet" type="text/css" href="resources/vendor/semantic.min.css">
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<!-- Configure System.js, our module loader -->
<script>
System.config({
packages: {
app: {
format: 'register',
defaultExtension: 'js'
}
}
});
System.import('app.js')
.then(null, console.error.bind(console));
</script>
<!-- Menu Bar -->
<div class="ui menu">
<div class="ui container">
<a href="#" class="header item">
<img class="logo" src="resources/images/ng-book-2-minibook.png">
ng-book 2
</a>
<div class="header item borderless">
<h1 class="ui header">
Angular 2 ngNonBindable demo
</h1>
</div>
</div>
</div>
<div class="ui main text container">
<ng-non-bindable-sample-app></ng-non-bindable-sample-app> <!-- Our app loads here -->
</div>
</body>
</html>
/*******************************************************************/
No comments:
Post a Comment