angularjs SPA - макеты в стиле MVC

Question

angularjs SPA - макеты в стиле MVC

0

Хорошо, поэтому я совершенно новичок в AngularJS и очень крутой кривой обучения.

Я разрабатываю AngularJS SPA и у меня нет оснований, я использую ngRoute для своей маршрутизации и имею рудиментарные рамки приложения.

Я попал в следующий камнем преткновения, и это может быть из-за отсутствия знаний об инфраструктуре AngularJS, но я ищу для достижения чего-то, похожего на макеты MVC в моем приложении SPA, то, что я ищу, выглядит примерно так:

Login.html - нет макета, макет будет определен на этой странице. Home.html - использует layout.tpl.html, а остальная часть содержимого определяется в Home.html

... и т.д., вы получаете общий идентификатор, поэтому для Homt.html я бы хотел сделать что-то вроде

<div layout="layout.tpl.html">
... rest of content
</div>

и layout.tpl.html будет

<div class="container">
  ..layout content for header, left nav, whatever is required
  <div class="content">
    <div layout-content></div>
  </div>
</div>

Как я сказал выше, я использую ngRoute, поэтому в своем модуле я настраиваю поставщика маршрутов, я надеюсь достичь эквивалента

@ {
Layout = "_Layout.cshtml"; // or Layout = null;
}

Но в angularjs, поэтому любое предложение о том, как достичь этого, будет получено

Neil Stevens 01 нояб. 2015, в 11:47

Источник

0

Нет, здесь нет никаких опций, вы можете добавить внешний html с помощью ng-include или написать некоторую директиву, которая добавит внешний html в ваш код, используя угловой модуль ngSanitize.
Shohel 02 нояб. 2015, в 01:58

Теги:

javascript

angularjs

layout

ngroute

1 ответ

Ещё вопросы

Нет, здесь нет никаких опций, вы можете добавить внешний html с помощью ng-include или написать некоторую директиву, которая добавит внешний html в ваш код, используя угловой модуль ngSanitize.

Shohel · Answer 1 · 2015-11-01T08-22-00.000Z

Существует два способа определить, когда ng-include завершает загрузку, в зависимости от ваших потребностей:

1) через атрибут onload - для встроенных выражений. Пример:

<div ng-include="'template.html'" onload="loaded = true"></div>

2) через событие $includeContentLoaded которое ng-include испускает - для обработки приложения. Пример:

app.run(function($rootScope){
  $rootScope.$on("$includeContentLoaded", function(event, templateName){
     //...
  });
});

ИЛИ

Используйте директиву для исправления этого

HTML

<div custom-include url="{{url}}"></div>

директива

app.directive('customInclude', ['$http', '$compile', '$timeout', customInclude]);
    function customInclude($http, $compile, $timeout) {
        return {
            restrict: 'A',
            link: function link($scope, elem, attrs) {
                //if url is not empty
                if (attrs.url) {
                    $http({ method: 'GET', url: attrs.url, cache: true }).then(function (result) {
                        elem.append($compile(angular.element(result.data))($scope));
                        //after sometime we add width and height of modal
                        $timeout(function () {
                            //write your own code
                        }, 1, false);
                    });
                }
            }
        };
    }

ИЛИ:

<div ng-include src="template.html"></div>

Я обновил свой вопрос немного более подробно о том, что я хочу, я в основном хочу, чтобы иметь возможность указывать Layout в каждом маршруте templateUrl как это возможно с угловым