Подтвердить что ты не робот

Как использовать Angular2 как не-SPA?

Я только что начал с Angular2 и узнал, что все обучающие материалы, которые можно найти в Интернете, объясняют, как настроить Angular2 для Single Pages Apps (SPA).

Однако для главной страницы моего сайта я все еще хочу использовать PHP и просто использую Angular2 в нескольких местах, таких как Login/Registration/Contact и т.д.

Как можно инициализировать контактный компонент на странице контактов, компонент входа на странице входа и т.д.?

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

Я верю, что что-то нужно сделать в части Bootstrapping, но что именно?

EDIT: Я также могу использовать компоненты входа/регистрации на одной странице.

4b9b3361

ОТВЕТЫ

Ответ 1

Я думаю, вы могли бы загружать любой компонент, который вам нужен на этой странице

import {bootstrap}    from '@angular/platform-browser-dynamic';
import {ContactComponent} from './contact.component';

bootstrap(ContactComponent);

Ответ 2

Рассмотрим этот пример для нескольких страниц на одном клиенте:

Каждый клиент - это угловой SPA проект. Это означает, что клиент содержит 1 index.html, который направляется на нужную страницу спа на основе параметра.

https://embed.plnkr.co/plunk/eSq44S

Файл index.html:

    <!DOCTYPE html>
<html>

<head>
    <title>Home Page</title>
    <link rel="stylesheet" href="#" onclick="location.href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css'; return false;" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<body>
<nav class="navbar navbar-inverse">
    <div class="container">
        <div class="navbar-header">
            <span class="navbar-brand">Just Components</span>
        </div>
        <div id="navbar">
            <ul class="nav navbar-nav">
                <li class="active"><a href="index.html">Home</a></li>
                <li><a href="items.html">Items</a></li>
                <li><a href="shapes.html">Shapes</a></li>
                <li><a href="items_and_shapes.html">Items and Shapes</a></li>
                <li><a href="other_static.html">Challenges/Consequences</a></li>
            </ul>
        </div>
    </div>
</nav>

<div class="container">
    <div>
        <h1>Angular 2 Components Without a SPA</h1>
        <table class="table table-bordered lead">
            <tr><td class="col-xs-3 text-right">Home</td><td>There is no angular on this page at all.</td></tr>
            <tr><td class="col-xs-3 text-right">Items</td><td>A static page with Component. Send data <em>OUT</em> of Component <em>TO</em> static page.</td></tr>
            <tr><td class="col-xs-3 text-right">Shapes</td><td>A static page with Component. Send data <em>INTO</em> Component <em>FROM</em> static page.</td></tr>
            <tr><td class="col-xs-3 text-right">Items & Shapes</td><td>Combine everything into one static page.</td></tr>
            <tr><td class="col-xs-3 text-right">Challenges/Consequences</td><td>for consideration, but not insurmountable</td></tr>
        </table>
    </div>
    <div>
        <h4>Why?</h4>
        <p>I'm asked routinely if you can put Angular 2 Components on a static page without creating a SPA.</p>
        <p>This is the answer: Yes</p>
        <h4>How?</h4>
        <p>This little app is an <em>imperfect</em> demonstration.</p>
        <p>Forget everything about @NgModel</p>
        <p>Forget everything about System.config path and app settings!</p>
        <p>Forget everything about tradtional Angular 2 bootstrapping!</p>
        <p>Each Component stands alone and boots itself</p>
    </div>

</div>
</body>
</html>

Items.html:

<!DOCTYPE html>
<html>

<head>
    <title>Static Pages with Angular 2 Components</title>
    <link rel="stylesheet" href="#" onclick="location.href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css'; return false;" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <script src="https://code.angularjs.org/2.0.0-beta.0/angular2-polyfills.js"></script>
    <script src="https://code.angularjs.org/tools/system.js"></script>
    <script src="https://code.angularjs.org/tools/typescript.js"></script>
    <script src="a2comps/config.js"></script>
    <script src="https://code.angularjs.org/2.0.0-beta.0/Rx.js"></script>
    <script src="https://code.angularjs.org/2.0.0-beta.0/angular2.min.js"></script>
    <script src="https://code.angularjs.org/2.0.0-beta.0/http.min.js"></script>
    <script src="non_angular.js"></script>
    <script>
      System.import('a2comps/items.ts')
        .catch(console.error.bind(console));
    </script>
</head>

<body>
<nav class="navbar navbar-inverse">
    <div class="container">
        <div class="navbar-header">
            <span class="navbar-brand">Just Components</span>
        </div>
        <div id="navbar">
            <ul class="nav navbar-nav">
                <li><a href="index.html">Home</a></li>
                <li class="active"><a href="items.html">Items</a></li>
                <li><a href="shapes.html">Shapes</a></li>
                <li><a href="items_and_shapes.html">Items and Shapes</a></li>
                <li><a href="other_static.html">Challenges/Consequences</a></li>
            </ul>
        </div>
    </div>
</nav>

<div class="container">
    <div class="container">
        <div class="row">
            <div class="col-xs-8">
                <items>
                    <div class="text-center"><img src="gears.svg"></div>
                </items>
            </div>
            <div class="col-xs-4">
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <h3 class="panel-title">Send Data OUT of a Component</h3>
                    </div>
                    <div class="panel-body">
                        <p>Click any row in a table. The row data will be placed below.</p>
                        <br>
                        <p>The Angular Component generates a custom event. Plain old JS is used to listen for the custom event and update the view traditionally.</p>
                        <br>
                        <div id="itemizer"></div>
                    </div>
                </div>
            </div>

        </div>
    </div>
</div>
</body>

</html>

Items.ts:

import {bootstrap, BROWSER_PROVIDERS, BROWSER_APP_PROVIDERS} from "angular2/platform/browser";
import {Component} from "angular2/core"
import {SimpleTable} from "./simple_table.ts"

@Component({
    selector: "items",
    template: '
    <simple-table [contentTitle]="contentTitle" [tableContent]="items"></simple-table>
  ',
    directives: [SimpleTable]
})

export class Items {
    contentTitle = "Items & Prices";
    items = ITEMS;
}
bootstrap(Items);


//========================
// MOCK DATA
const ITEMS: Item[] = [
    {
    "id": 0,
    "name": "Item 0",
    "price": "$0"
},
    {
        "id": 1,
        "name": "Item 1",
        "price": "$1"
    },
    {
        "id": 2,
        "name": "Item 2",
        "price": "$2"
    },
    {
        "id": 3,
        "name": "Item 3",
        "price": "$3"
    },
    {
        "id": 4,
        "name": "Item 4",
        "price": "$4"
    },
    {
        "id": 5,
        "name": "Item 5",
        "price": "$5"
    }
];