Мне нужно загружать мой компонент angular2, не применяя стиль стилей бутстрапа в html
вот мой компонент login.ts
///<reference path="../../../node_modules/angular2/typings/node/node.d.ts" />
import {Component, View} from 'angular2/core';
import {FormBuilder, FORM_DIRECTIVES } from 'angular2/common';
@Component({
selector: 'login',
})
@View({
templateUrl: '/scripts/src/components/login/login.html',
directives: [FORM_DIRECTIVES]
})
export class login {
}
вот мой шаблон для входа:
<div class="col-lg-4 col-lg-offset-4">
<div class="panel panel-default">
<div class="panel-heading" ng-class="panel-heading">
<h4>Login</h4>
</div>
<div class="panel-body">
<div class="form-group">
<label>User Name</label>
<input type="text" class="form-control" placeholder="Please enter username"/>
</div>
<div class="form-group">
<label>Password</label>
<input type="text" class="form-control" placeholder="Please enter password"/>
</div>
</div>
<div class="panel-footer text-left">
<button class="btn btn-primary">Login</button>
</div>
</div>
</div>
export class login {
}
вот мой bootstrap.ts
//import {bootstrap} from 'angular2/angular2';
///<reference path="../node_modules/angular2/typings/node/node.d.ts" />
import {UpgradeAdapter} from 'angular2/upgrade';
import {bootstrap} from 'angular2/platform/browser';
import {login} from './components/login/login';
bootstrap(login);
вот мой index.html
<!doctype HTML>
<html>
<head>
<script src="/angular2-polyfills.js"></script>
<script src="/system.src.js"></script>
<script src="/Rx.js"></script>
<script src="/angular2.dev.js"></script>
<script src="/upgrade.dev.js"></script>
</head>
<body>
<div class="container">
<login>Loading......</login>
</div>
<script>
System.config({
defaultJSExtensions: true,
packages: {
app: {
defaultExtension: 'js'
}
},
paths: {
'angular2/upgrade': '../node_modules/angular2/upgrade'
}
});
System.import('scripts/src/bootstrap');
</script>
</body>
</html>
но когда я запускаю свое приложение, он дает мне вывод как
пожалуйста, помогите стилизовать мое приложение.
какие изменения мне нужно сделать, если я должен использовать материальный дизайн
Как @Eric сказал, что у вас были стили bootstrap, и после вашего редактирования у вас их вообще нет.
Не путайте с bootstrap.js, который вы вызываете с помощью systemjs, что метод угловой бутстрап, который завершает ваши зависимости и конфигурацию приложения, чтобы запустить его.
Просто добавьте необходимые файлы начальной загрузки, как и любое другое веб-приложение, которое вы сделаете.
1-Core стили:
<link rel="stylesheet" href="/bootstrap.min.css">
2- Тема по умолчанию, если вы этого хотите:
<link rel="stylesheet" href="/bootstrap-theme.min.css">
3- Если вы используете компоненты Bootstrap JS, а не только стили:
<script src="/bootstrap.min.js" ></script>
Просто добавьте эти ссылки внутри head
тега вашего index.html.
Хорошей практикой является загрузка загрузочного буфера из getBootstrap.com и добавление папки bootstrap в ваш проект, потому что если есть медленное подключение к Интернету, тогда есть возможности, которые cdn не работает, и ваша тема может выглядеть не так, как требуется.
Вы можете скачать его здесь: http://getbootstrap.com/getting-started/