Edward10
16.02.2016, 19:28
Всем привет. Начал свое знакомство с angular 2. Перерыл большое количество зарубежной литературы, в т. ч. официальный ресурс https://angular.io для того, что бы понять как стартануть с Angular 2. Везде информация очень скудная, примеры на typeScript, хотя мне хочется работать с js и т. д.
У меня есть рабочий пример кода создания компонента, который выводит контент на страницу:
app.component.js
var myComponent =
ng.core.Component({
selector: 'my-app',
templateUrl: '../component.html'
})
.Class({
constructor: function() {
this.myName = 'Alice';
this.myFriends = ['Aaron', 'Martin', 'Arianna', 'Kai', 'Shannon'];
}
});
main.js
document.addEventListener('DOMContentLoaded', function() {
ng.platform.browser.bootstrap(myComponent);
});
index.html
<html>
<head>
<title>Test</title>
<link rel="stylesheet" type="text/css" href="node_modules/bootstrap/dist/css/bootstrap.min.css" />
<!-- 1. Load libraries -->
<!-- IE required polyfill -->
<script src="node_modules/es6-shim/es6-shim.min.js"></script>
<script src="node_modules/angular2/bundles/angular2-polyfills.js"></script>
<script src="node_modules/rxjs/bundles/Rx.umd.js"></script>
<script src="node_modules/angular2/bundles/angular2-all.umd.js"></script>
<!-- 2. Load our 'modules' -->
<script src='app/app.component.js'></script>
<script src='main.js'></script>
</head>
<body>
<div class="container">
<h1>LeaderBoard</h1>
<h3>TOP 3 participants</h3>
<my-app></my-app>
</div>
</body>
</html>
Вопрос. Как оптимизировать код, потому что код создания компонента мне не нравится.
У меня есть рабочий пример кода создания компонента, который выводит контент на страницу:
app.component.js
var myComponent =
ng.core.Component({
selector: 'my-app',
templateUrl: '../component.html'
})
.Class({
constructor: function() {
this.myName = 'Alice';
this.myFriends = ['Aaron', 'Martin', 'Arianna', 'Kai', 'Shannon'];
}
});
main.js
document.addEventListener('DOMContentLoaded', function() {
ng.platform.browser.bootstrap(myComponent);
});
index.html
<html>
<head>
<title>Test</title>
<link rel="stylesheet" type="text/css" href="node_modules/bootstrap/dist/css/bootstrap.min.css" />
<!-- 1. Load libraries -->
<!-- IE required polyfill -->
<script src="node_modules/es6-shim/es6-shim.min.js"></script>
<script src="node_modules/angular2/bundles/angular2-polyfills.js"></script>
<script src="node_modules/rxjs/bundles/Rx.umd.js"></script>
<script src="node_modules/angular2/bundles/angular2-all.umd.js"></script>
<!-- 2. Load our 'modules' -->
<script src='app/app.component.js'></script>
<script src='main.js'></script>
</head>
<body>
<div class="container">
<h1>LeaderBoard</h1>
<h3>TOP 3 participants</h3>
<my-app></my-app>
</div>
</body>
</html>
Вопрос. Как оптимизировать код, потому что код создания компонента мне не нравится.