Angular: разбить страницу с помощью собственного контроллера

0

Данный

Absolute Newbie to Angular, который хочет использовать концепцию "композиции", где Главная страница содержит множество небольших частей веб-страницы.

Я начал с создания только секции заголовка, как показано ниже, которая прекрасно связывается.

<html>
<body >
    <div class="row" ng-app="HeaderModule" ng-controller="HeaderController">
        <div class="col-lg-12">
            <h1 class="page-header">
                {{header.Title}}
            </h1>
            <ol class="breadcrumb">
                <li class="active">
                    <i class="fa fa-dashboard">Some Data Here</i>
                </li>
            </ol>
        </div>
    </div>
</body>
</html>
<script src="../../lib/angular/angular.min.js"></script>
<script>
    angular.module('HeaderModule', [])
    .controller('HeaderController', ['$scope',
        function ($scope) {
            $scope.header = { "Title": "Pretty Good, We see the binding work if this page is alone, by itself" }
        }])
</script>

Но Angular не хочет объявления mulitple ng-app, поэтому я удалил объявления HTML и Body и ng-app для заголовка.

<div class="row" ng-controller="HeaderController">

Главная страница выглядит так и работает отлично без заголовка. Первый Div объявляет приложение следующим образом.

   <div id="wrapper" ng-app="TestResultsApp">

Логика JavaScript выглядит так.

 angular.module('TestResultsApp', [])
        .controller('CardsController', ['$scope',
            function ($scope) {
                $scope.results = {
                    'FirstCard': '12',
                    'SecondCard': '3',
                    'ThirdCard': '5',
                    'CardsSummary': '20'
                }
            }
        ])

Теперь я хочу добавить страницу заголовка, но, если возможно, по возможности держите логику контроллера, если это возможно. Или я мог бы также разделить JavaScript на файл, но все же хочу, чтобы ссылка была сделана на странице заголовка (основной принцип ответственности)...

Какой лучший способ сделать это?

Вот что я пробовал до сих пор:

Используя импорт HTML5 (веб-компоненты), я успешно вытащил на страницу заголовка, но Angular не может найти логику контроллера там. Если я вытащил объявление ng-app на странице заголовка, я не знаю, как создать только контроллер, который "втянут" в основное приложение ng-app (приложение)...

Пожалуйста, порекомендуйте.

Теги:

3 ответа

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

Угловое будет автоматически загружать первое ng-app оно находит. После этого вам нужно вручную загрузить ng-app на странице.

Для рабочего примера см. Этот Plunker

angular.module('app1', []).controller('ctrl1', ['$scope', function ($scope) {
  $scope.title  = 'This is app1 ctrl1';
}]);

angular.module('app2', []).controller('ctrl1', ['$scope', function ($scope) {
  $scope.title  = 'This is app2 ctrl1';
}]);

angular.module('app3', []).controller('ctrl3', ['$scope', function ($scope) {
  $scope.title  = 'This is app3 ctrl1 title';
  $scope.title3  = 'This is app3 ctrl1 title3';
}]);

angular.bootstrap(document.getElementById("app1"), ['app1']);
angular.bootstrap(document.getElementById("app2"), ['app2']);
angular.bootstrap(document.getElementById("app3"), ['app3']);

Но на самом деле, вероятно, это лучшая идея придерживаться одного ng-app и использовать Angular Controllers вместе с директивами и компонентами для достижения того, что вы хотите сделать.

Поделиться
  • 0
    Просто интересно, почему лучше придерживаться одного ng-приложения? Я могу согласиться с этим, если смогу найти способ сохранить логику контроллера, содержащуюся на каждой странице, для которой нужна именно эта логика. Я нашел другой способ, который тоже работает, просто указав другие ng-приложения как зависимости на главной странице. angular.module ('app1', ['app2']). controller (....
  • 0
    Если это маленькое приложение, проще использовать память и поддерживать порядок в коде. В настоящее время я работаю на очень крупном корпоративном веб-сайте Angular, на котором запущено 4 разных приложения, и иногда попытки сохранить весь этот код в конкретных приложениях становятся трудными, особенно когда им приходится взаимодействовать друг с другом (к счастью, большая часть этого взаимодействия через API).
1

Честно говоря, если вам нужен шаблон, в котором вы смешиваете шаблон html для компонента и его javascript, вам может быть лучше смотреть на реакцию и JSX.

Тем не менее, если вы объявляете каждый из этих элементов в качестве директивы или компонента, вы можете сделать что-то вроде

angular.module('myApp')   //note we're not declaring it here, just referencing it
.component('header', {
  controller: function() { /* controller here */ }
  template: '<div>{{$ctrl.foo}}</div>'
});

Если вы используете babel или имеете доступ к backticks, вы можете сделать многострочную строку довольно легко, которая выглядит довольно похоже на то, что вы хотите, она просто помещает html-шаблон внутри строки.

Затем вам просто нужно собрать все вместе в большой файл и предоставить точку входа.

Поделиться
  • 0
    Да, то, что я делаю, идеально подходит для JSX. Однако я уже по колено в Angular и хочу угловую привязку. Я думаю, что Angular тоже умеет делать компоненты ....
1

Нашел ваш другой вопрос случайным образом. Проблема в том, что вы создаете два разных приложения. У вас есть angular.module('TestResultsApp', []) и angular.module('HeaderModule', []). Вы должны использовать одно и то же приложение для обеих частей. Когда вы впервые подтвердили свое приложение, используйте angular.module('TestResultsApp', []), а затем в вашем контроллере используйте angular.module('TestResultsApp').controller(...). Это назначит контроллеру соответствующее приложение. Обратите внимание на отсутствие скобок во втором. Всякий раз, когда вы добавляете скобки, вы снова создаете Угловое выражение.

Поделиться
  • 0
    Спасибо Крис, я снова задал вопрос здесь с большей ясностью.

Ещё вопросы

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