私は、アプリケーションコンテンツをサーバから動的に読み込むためのソリューションを探しています。サーバからHTMLとコントローラをロードし、動的状態を作成するUI - ルータ
私のシナリオ：
は、我々は2人のユーザー（AとB）を持っているとしましょう、今の私の目標は、から私のアプリにユーザーがログインとなり、shoppingListと電卓を言うことができますように、私のアプリは、異なるモジュールで構成されていデータベース私はユーザー権利を取得し、彼が持っている権利に応じて、私はhtmlとctrlに必要な状態を作成しながら、サーバーからロジック部分のビューとコントローラファイルのHTMLをロードします。だから基本的に私のアプリケーションは、ログインの一貫性が非常に小さく、他のすべてがUserrightsに応じてサーバーから引っ張ってきている。
私は何を使用します。
- コルドバ
- AngularJs
- イオン枠組み
私はそれがすべて動的にする必要がある理由：
1）ANを持っているpossiblityログインロジックだけを含んでいるアプリだから、バグを修正したり、モジュールを追加したりするときに、ファイルをサーバに追加するだけで済むユーザーにその権利を与えてください。アプリを更新する必要はありません。
2）ユーザーには必要な機能のみがあり、1つのモジュールにしか権利がない場合は、すべてを持つ必要はありません。
3）このアプリケーションは非常に大きくなります。つまり、すべてのモジュールが独自のhtmlとコントローラで5〜10個の状態を持つことを意味します。現在、50種類のモジュールが計画されているため、数学を行うことができます。
私はいくつかのインスピレーションを得るためにこれを見た：
AngularJS, ocLazyLoad & loading dynamic States
私がこれまで試したどのような：
私が唯一の1つのhttpリクエストを持っているので、全体のモジュールが含まれている1つのHTMLファイルを作成：
ユーザーが
HTMLパートにログインした後、これは、サーバーからの私の応答であるとしましょう：
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]);
}
}
});
コントローラーパート：
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]);
}
}
});
私はそれらを登録しようとするコントローラーロードした後：
$controllerProvider.register('SomeName', $templateCache.get('controllers/someController));
これが唯一の文字列であるため、機能していません...
.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-ルータパート：プロバイダの定義
これまで
//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();
状況：
私は、htmlファイルをロードし、templateCacheに保存するために管理しています私がここに気付いたのは、リストからアイテムを削除して、アイテムに戻ってきたときに、アイテムがそこに再びあったということを時々言わせてくれることでしたこれはキャッシュと関係があります。私は実際にはわかりません...
コントローラーファイルをロードして、コントローラーをtemplateCacheに保存することができましたが、私は$ ControllerPrioviderRef.registerをどのように使用するか分かりません。保存された文字列...
が状態を作成するには、仕事をしましたが、コントローラはので、私はすべてのビューを開くことができませんでしたフィットdidntの...
PS：私はまたrequire.jsとOCLazyLoadを見てだけでなく、この例dynamic controller example
更新：
私はHtmlをロードすることができたので、ControllerでStateを作成してください。コントローラがまったく動作していないようで、エラーはありませんが、コントローラのロジックは何も表示されません。実行される。現在のところ、以前にダウンロードしたファイルからコントローラを登録する唯一の解決策は、より多くのハックで適切な解決策であるeval(),を使用することでした。
ここでコード：
.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();
}
}
}])
すべてのヘルプは、[OK]を
なぜすべてをロードせず、ユーザーのアクセスに基づいて未使用のメニュー項目を非表示にするのはなぜですか？それはテンプレートが多くのスペースを取っているようではありません。 – Matt2012
この場合、アプリケーションは非常に大きくなるので、私はこのようにする必要があります。 – stackg91
私はそういうわけではありません。もはや2000年代前半ではない。最近ではhtml5 + ajaxコールのすべてがファットクライアントです。私はすべてを置くだろう。クライアント上のすべてのモジュール50モジュール、特にhtml/css/javascriptは冗談です。モバイルでも。 – foreyez