angular2 не применяет класс начальной загрузки

-2

Мне нужно загружать мой компонент 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/bundles/angular2-polyfills.js"></script>
    <script src="/systemjs/dist/system.src.js"></script>
    <script src="/rxjs/bundles/Rx.js"></script>
    <script src="/angular2/bundles/angular2.dev.js"></script>
    <script src="/angular2/bundles/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>

но когда я запускаю свое приложение, он дает мне вывод как

Изображение 319283

пожалуйста, помогите стилизовать мое приложение.

какие изменения мне нужно сделать, если я должен использовать материальный дизайн

  • 0
    Вы прокомментировали свою загрузочную CSS ...
Теги:
angular
material-design

2 ответа

1
Лучший ответ

Как @Eric сказал, что у вас были стили bootstrap, и после вашего редактирования у вас их вообще нет.

Не путайте с bootstrap.js, который вы вызываете с помощью systemjs, что метод угловой бутстрап, который завершает ваши зависимости и конфигурацию приложения, чтобы запустить его.

Просто добавьте необходимые файлы начальной загрузки, как и любое другое веб-приложение, которое вы сделаете.

1-Core стили:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">

2- Тема по умолчанию, если вы этого хотите:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css">

3- Если вы используете компоненты Bootstrap JS, а не только стили:

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" ></script>

Просто добавьте эти ссылки внутри head тега вашего index.html.

Поделиться
  • 0
    затем начальная загрузка (логин); что это делает для меня
  • 0
    Как я уже сказал: «оборачивает зависимости вашего приложения и конфигурацию, чтобы запустить его». если вы прочтете краткий обзор Angular 2, то увидите, что они называют его boot.js, а не bootstrap.js, это не имеет ничего общего с платформой начальной загрузки, вы можете назвать ее по вашему желанию.
Показать ещё 2 комментария
0

Хорошей практикой является загрузка загрузочного буфера из getBootstrap.com и добавление папки bootstrap в ваш проект, потому что если есть медленное подключение к Интернету, тогда есть возможности, которые cdn не работает, и ваша тема может выглядеть не так, как требуется.

Вы можете скачать его здесь: http://getbootstrap.com/getting-started/

Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню