Laden von HTML und Controller vom Server und Erstellen von dynamischen Zuständen Benutzeroberfläche - Router
Ich suche nach einer Lösung, um meinen App-Inhalt dynamisch vom Server zu laden.
Mein Szenario:
Nehmen wir an, wir haben 2 Benutzer (A und B), meine App besteht aus verschiedenen Modulen, wie zum Beispiel einer Einkaufsliste und einem Taschenrechner. Mein Ziel wäre nun, dass sich der Benutzer aus der Datenbank in meine App einloggt. Ich erhalte die Benutzerrechte und je nachdem, welche Rechte hat er, ich würde das HTML für die Ansichten und die Controller-Dateien für den Logikteil vom Server laden, während ich die Zustände für das HTML und die Strg erstellen würde. Im Grunde genommen ist meine App also sehr klein, was das Login betrifft, und alles andere wird abhängig von den Benutzerrechten vom Server abgerufen.
Was ich benutze:
Cordova AngularJsIonic FrameworkWarum muss alles dynamisch sein:
1) Die Möglichkeit, eine App zu haben, die nur die Anmeldelogik enthält. Wenn ich also Fehler behebe oder Module hinzufüge, muss ich dem Benutzer nur die Dateien auf dem Server hinzufügen, damit er das Recht dazu hat und es dort ist, ohne die App aktualisieren zu müssen .
2) Der Benutzer hat nur die Funktionalität, die er benötigt, er muss nicht alles haben, wenn er nur das Recht für 1 Modul hat.
3) Die App wächst im Moment sehr groß, was bedeutet, dass jedes Modul 5-10 Status hat, mit eigenem HTML und Controllern. Derzeit sind 50 verschiedene Module geplant, damit Sie rechnen können.
Ich habe mir das angesehen, um Inspiration zu bekommen:
AngularJS, ocLazyLoad & Lade dynamische Zustände
Was ich bisher versucht habe:
Ich habe eine HTML-Datei erstellt, die das gesamte Modul enthält, sodass ich nur eine http-Anfrage habe:
Sagen wir, dies ist meine Antwort vom Server, nachdem sich der Benutzer bei @ angemeldet ha
HTML-Teil:
var rights= [A,B,C,D]
angular.forEach(rights, function (value, key) {
$http.get('http://myServer.com/templates/' + value + '.html').then(function (response) {
//HTML file for the whole module
splits = response.data.split('#');
//Array off HTMl strings
for (var l = 1; l <= splits.length; l++) {
//Putting all Html strings into templateCache
$templateCache.put('templates/' + value +'.html', splits[l - 1]);
}
}
});
Controller-Teil:
var rights= [A,B,C,D]
angular.forEach(rights, function (value, key) {
$http.get('http://myServer.com/controller/' + value + '.js').then(function (response) {
// 1 file for the whole module with all controllers
splits = response.data.split('#');
//Array off controller strings
for (var l = 1; l <= splits.length; l++) {
//Putting all Controller strings into templateCache
$templateCache.put('controllers/' + value +'.js', splits[l - 1]);
}
}
});
Nach dem Laden der Controller versuche ich sie zu registrieren:
$controllerProvider.register('SomeName', $templateCache.get('controllers/someController));
Was nicht funktioniert, da dies nur ein String ist ...
Definition der Anbieter:
.config(function ($stateProvider, $urlRouterProvider, $ionicConfigProvider, $controllerProvider) {
// turns of the page transition globally
$ionicConfigProvider.views.transition('none');
$stateProviderRef = $stateProvider;
$urlRouterProviderRef = $urlRouterProvider;
$controllerProviderRef = $controllerProvider;
$stateProvider
//the login state is static for every user
.state('login', {
url: "/login",
templateUrl: "templates/login.html",
controller: "LoginCtrl"
});
//all the other states are missing and should be created depending on rights
$urlRouterProvider.otherwise('/login');
});
Ui-Router Teil:
//Lets assume here the Rights Array contains more information like name, url...
angular.forEach(rights, function (value, key) {
//Checks if the state was already added
var getExistingState = $state.get(value.name)
if (getExistingState !== null) {
return;
}
var state = {
'lang': value.lang,
'params': value.param,
'url': value.url,
'templateProvider': function ($timeout, $templateCache, Ls) {
return $timeout(function () {
return $templateCache.get("templates" + value.url + ".html")
}, 100);
},
'ControllerProvider': function ($timeout, $templateCache, Ls) {
return $timeout(function () {
return $templateCache.get("controllers" + value.url + ".js")
}, 100);
}
$stateProviderRef.state(value.name, state);
});
$urlRouter.sync();
$urlRouter.listen();
isherige Situation:
Ich habe es geschafft, die HTML-Dateien zu laden und sie im templateCache zu speichern, sogar zu laden, aber nur, wenn die Zustände vordefiniert waren. Was mir hier aufgefallen ist, ist, dass wir manchmal sagen, wenn ich ein Element aus einer Liste entferne und zur Ansicht zurückkomme der artikel war wieder da vielleicht hat das was mit cache zu tun ich bin mir nicht so ganz sicher ...
Ich habe es geschafft, die Controller-Dateien zu laden und die Controller im templateCache zu speichern, aber ich weiß nicht wirklich, wie ich das $ ControllerPrioviderRef.register mit meinen gespeicherten Strings verwenden soll ...
Erstellung der Zustände hat funktioniert, aber der Controller passte nicht, so dass ich keine Ansichten öffnen konnte ...
PS: Ich habe mir auch require.js und OCLazyLoad sowie dieses Beispiel angeschautdynamic controller example
Aktualisieren
Okay also habe ich es geschafft das @ zu ladHtml, erstelle dasState mit demController alles scheint gut zu funktionieren, außer dass der Controller überhaupt nicht zu funktionieren scheint, es gibt keine Fehler, aber es scheint, dass nichts von der Controller-Logik ausgeführt wird. Derzeit war die einzige Lösung, um den Controller aus der zuvor heruntergeladenen Datei zu registrieren, die Verwendung voneval(), das ist eher ein Hack als eine richtige Lösung.
Hier der Code:
.factory('ModularService', ['$http', ....., function ( $http, ...., ) {
return {
LoadModularContent: function () {
//var $state = $rootScope.$state;
var json = [
{
module: 'Calc',
name: 'ca10',
lang: [],
params: 9,
url: '/ca10',
templateUrl: "templates/ca/ca10.html",
controller: ["Ca10"]
},
{
module: 'SL',
name: 'sl10',
lang: [],
params: 9,
url: '/sl10',
templateUrl: "templates/sl/sl10.html",
controller: ['Sl10', 'Sl20', 'Sl25', 'Sl30', 'Sl40', 'Sl50', 'Sl60', 'Sl70']
}
];
//Load the html
angular.forEach(json, function (value, key) {
$http.get('http://myserver.com/' + value.module + '.html')
.then(function (response) {
var splits = response.data.split('#');
for (var l = 1; l <= value.controller.length; l++) {
$templateCache.put('templates/' + value.controller[l - 1] + '.html', splits[l - 1]);
if (l == value.controller.length) {
$http.get('http://myserver.com//'+value.module+'.js')
.then(function (response2) {
var ctrls = response2.data.split('##');
var fullctrl;
for (var m = 1; m <= value.controller.length; m++){
var ctrlName = value.controller[m - 1] + 'Ctrl';
$controllerProviderRef
.register(ctrlName, ['$scope',...., function ($scope, ...,) {
eval(ctrls[m - 1]);
}])
if (m == value.controller.length) {
for (var o = 1; o <= value.controller.length; o++) {
var html = $templateCache
.get("templates/" + value.controller[o - 1] + ".html");
var getExistingState = $state.get(value.controller[o - 1].toLowerCase());
if (getExistingState !== null) {
return;
}
var state = {
'lang': value.lang,
'params': value.param,
'url': '/' + value.controller[o - 1].toLowerCase(),
'template': html,
'controller': value.controller[o - 1] + 'Ctrl'
};
$stateProviderRef.state(value.controller[o - 1].toLowerCase(), state);
}
}
}
});
}
}
});
});
// Configures $urlRouter's listener *after* your custom listener
$urlRouter.sync();
$urlRouter.listen();
}
}
}])
Jede Hilfe dankbar