Переключение конфигураций модуля data-ng-app в angularjs
Я пытаюсь разделить свое приложение на модули. У меня есть модуль входа в систему и остальная часть приложения. Моя идея заключается в том, что пользователь не может получить доступ к остальной части приложения без необходимости сначала войти в систему. Для этого я использую два angular.module с разными конфигурациями, но не могу сшить, чтобы динамически разрешить angular разрешить новый app.js и использовать его конфигурацию в моем веб-приложении.
//index.html
<div data-ng-app="login" ui-view></div>
//login.js
.state('user.signin', {
url: '/signin',
templateUrl: 'login.html'
})
.state('appUIView', {
url: '/appUIView',
templateUrl: 'appUIView.html',
resolve: {
deps: ['uiLoad',
function( uiLoad ){
return uiLoad.load( [
'js/app.js'//I try resolving the app.js so I can now use it's configuration
]);
}]
}
})
//appUIView.html
<div data-ng-app="app" ui-view></div>//uses the app defined in app.js
//app.js
$urlRouterProvider
.otherwise('/app');//when app.js is loaded if the new configuration is used the page should land on app.html
$stateProvider
.state('app', {
url: '/app',
templateUrl: 'app.html'
})
http://plnkr.co/edit/FOAegZmmWjuPeWp3VhBe
Спасибо за помощь!
2 ответа
Я использую некоторый серверный MVC (ASP.NET MVC, но я уверен, что вы могли бы сделать это с любой подобной платформой), чтобы выполнить это для набора модулей AngularJS, которые мы используем для наших собственных приложений. Я просто устанавливаю свойство ViewBag, которое может быть выбрано моим (общим) шаблоном страницы в MVC, например
<html ng-app="@ViewBag.NgApp">
Это свойство ViewBag устанавливается моей серверной маршрутизацией, поэтому запросы к /App1 будут обслуживать сценарии для этого пакета, включая определение соответствующего модуля. То же самое для /App2, /App3 и т. Д. Все, что находится в /App1, обрабатывается маршрутизацией на стороне клиента для SPA (мы используем ui-router).
Стоит следить за созданием маршрутизатора для Angular 2.0, но с портированием обратно на 1.3 - возможно, это будет поддерживать динамическую загрузку дочерних приложений / маршрутизаторов в одном приложении. Я надеюсь, что это подразумевает динамическую загрузку модулей приложения...
Веб-приложение на Angular обычно имеет 1 модуль ng-app.
Самое разумное, если вам действительно нужны два отдельных приложения, - это разработать два отдельных приложения для изучения углов. Вы могли бы перенаправить модуль входа на страницу, на которой размещена защищенная версия приложения. Конечно, это означает, что вы должны выполнять регулярное перенаправление, вызывая перезагрузку браузера.
Вы также можете иметь несколько приложений NG в одном приложении. В этом случае вы должны использовать bootstrap для переключения между ними. Однако я бы не стал прибегать к этому, если бы не было действительно веских причин. Это похоже на взлом.
angular.bootstrap(document.getElementById('app'),['app']);