javascript - Loading html and Controller from server and creating dynamic states UI - router -

i looking solution load app content dynamically server.

my scenario:

lets have 2 users (a , b), app consists of different modules lets shoppinglist , calculator, goal user logs app database user rights , depending rights has, load html views , controller files logic part server, while doing create states needed html , ctrl. app small consistent of login , else getting pulled server depending on userrights.

what use:

1. cordova
2. angularjs
3. ionic framework

why need dynamic:

1)the possiblity have app contains login logic, when fixing bugs or adding modules have add files server give user right , there without needing update app.

2)the user has functionality needs, doesnt need have when has right 1 module.

3)the app grows big @ moment, meaning every module has 5-10 states, own html , controllers. there 50 different modules planned can math.

i looked @ inspiration:

angularjs, oclazyload & loading dynamic states

what tried far:

i created 1 html file contains whole module have 1 http request:

lets response server after user logged in

html part:

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 whole module         splits = response.data.split('#');         //array off html strings         (var l = 1; l <= splits.length; l++) {             //putting html strings templatecache                                         $templatecache.put('templates/' + value +'.html', splits[l - 1]);            }         }      }); 

controller part:

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 whole module controllers         splits = response.data.split('#');         //array off controller strings         (var l = 1; l <= splits.length; l++) {             //putting controller strings templatecache                                         $templatecache.put('controllers/' + value +'.js', splits[l - 1]);            }         }      }); 

after loading controllers try register them:

$controllerprovider.register('somename', $templatecache.get('controllers/somecontroller)); 

which not working since string...

defining providers:

.config(function ($stateprovider, $urlrouterprovider, $ionicconfigprovider, $controllerprovider) {    // turns of page transition globally     $ionicconfigprovider.views.transition('none');     $stateproviderref = $stateprovider;     $urlrouterproviderref = $urlrouterprovider;     $controllerproviderref = $controllerprovider;       $stateprovider      //the login state static every user   .state('login', {       url: "/login",       templateurl: "templates/login.html",       controller: "loginctrl"   });     //all other states missing , should created depending on rights  $urlrouterprovider.otherwise('/login');   }); 

ui-router part:

//lets assume here rights array contains more information name, url...     angular.foreach(rights, function (value, key) {        //checks if state 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(); 

situation far:

i have managed load html files , store them in templatecache, load them if states predefined.what noticed here lets when remove item list , come view item there again maybe has cache not sure...

i have managed load controller files , save controllers in templatecache dont know how use $controllerprioviderref.register stored strings...

creating states did work controller didnt fit not open views...

ps: looked @ require.js , oclazyload example dynamic controller example

update:

okay managed load html , create state controller seems work fine, except controller not seem work @ all, there no errors, seems nothing of controller logic executed. solution register controller previous downloaded file use eval(), more hack proper solution.

here 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 html              angular.foreach(json, function (value, key) {             $http.get('http://myserver.com/' + value.module + '.html')             .then(function (response) {                var splits = response.data.split('#');                (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;                           (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) {                                (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* custom listener              $urlrouter.sync();             $urlrouter.listen();          }     } }]) 

any appreciated

ok, let's start beginning.

all application logic should contained on server , served via api-calls through rest, soap or similar. doing so, reduce amount of logic built ui, reduces stress on client. makes client app rendering agent, containing models , views data , logic served backend api.

as foreyez stated in his/her comment, isn't issue modern (or half-modern) device.

if insist on not loading of layouts @ once, of course separate them partials, load after login based on user privileges. doing so, reduce amount of in-memory data, though improvement doubtable, @ best.