Показать сообщение отдельно
  #1 (permalink)  
Старый 16.02.2016, 19:28
Новичок на форуме
Отправить личное сообщение для Edward10 Посмотреть профиль Найти все сообщения от Edward10
 
Регистрация: 16.02.2016
Сообщений: 1

Angular 2. Как правильно создавать компоненты.
Всем привет. Начал свое знакомство с 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>


Вопрос. Как оптимизировать код, потому что код создания компонента мне не нравится.
Ответить с цитированием