0

How do I get a dynamically loaded template and controller injected? After loading my .html partial and .js controller, I would assume the next step is $injector? But how do I use it? something like this...?

My progress so far: http://plnkr.co/edit/rB5zteYTZ2L1WB5RzlHg

data is returned from a $http.get()

var $injector = angular.injector(['ng']);

$injector.invoke(function($rootScope, $compile, $document) {
    $compile(data)($rootScope);
    $rootScope.$digest();
});

What format does the Controller.js file need to be in for the injector/compiler to wire it up correctly? Can I simply do what I did in Plunker?

Controller1.js

app.controller('Controller1', function ($scope, $famous) {
      console.log("Inside Controller1");
});

Note: I am specifically trying to avoid using requirejs, ng-route, ui-route, ocLazyLoad, etc. I would like to understand the very basics of what these packages accomplish for routing and dynamic loading of a view/controller.

sday
  • 1,041
  • 14
  • 22
  • I'd previously found an article that described something like what you want. It was a needle in the hay stack and I've lost it. This might get you going with dynamically loading templates if you haven't already done so: http://stackoverflow.com/questions/12346690/is-there-a-way-to-make-angularjs-load-partials-in-the-beginning-and-not-at-when To pair up a controller with a template, you then want to make a directive and specify both the template and controller. Is that what you want to do (pair a dynamically loaded template with a controller)? – trusktr Nov 03 '14 at 09:02
  • Or you can use this answer as a reference http://stackoverflow.com/questions/15250644/angularjs-loading-a-controller-dynamically?answertab=votes#tab-top – talves Nov 03 '14 at 17:55
  • @trusktr - That example still looks like a static reference to known partials and controllers. The link provided by talves is more along the lines of what I'm trying to do. The example given in that link is relevant. If I had a list of 10k partials and controllers of which were user selectable, it would be impractical to define all 10k templates and match them with a controller in a js file. My goal would allow you to select one of the templates as say a user input, and the code would HTTP get the files, inject and compile them into the page. – sday Nov 03 '14 at 18:18
  • @talves - thanks for the link, that does look like what I need. – sday Nov 03 '14 at 18:18
  • @sday Ahh, I got what you mean. Yeah, just get the partial names from the DB with a cursor so you can paginate them, then load them when needed with $http. You can write your own module to expire templates from the cache in FIFO or LRU order. By the way, did you happen to be at the Famo.us Demopalooza? – trusktr Nov 04 '14 at 06:07
  • Thanks again for the help.. and no I didn't make the Demopalooza, one of these days I would like to make one of these conferences. – sday Nov 07 '14 at 13:15

1 Answers1

0

I am not sure if I totally understand your question but it looks like you want to load views and controllers dynamically. I am using a combination of angular ui router and angularAMD. It works very smoothly and with that approach you get a nice separation and on-demand loading.

From angular ui router webpage:

templateUrl: "partials/state1.list.html",
   controller: function($scope) {
   $scope.items = ["A", "List", "Of", "Items"];
}

With that configuration the specified controller will get loaded and connected to the state1.list.html.

Does that help?

timtos
  • 2,225
  • 2
  • 27
  • 39
  • Yes, I am trying to load views and controllers dynamically, but I want to do it without dependencies. No router, no requirejs, no other module. Mostly to understand a bit more about angular, browsers and the web world. Also, to load things fully dynamic. If I'm not mistaken, your approach does require a mapping of views/controllers. With your approach, for example, would it allow a file upload dialog box to specify a completely new view and controller to be uploaded and injected? Or do you have to declare these things during page load? Thanks btw – sday Oct 31 '14 at 21:50
  • If I have view1/controller1 and create view2/controller2, would I have to change any code, such as add another entry for templateUrl: ? I would like to create a mechanism that would allow me to bind view and controller dynamically, rather than as a static route that is lazy loaded. (I do still want the lazy load part, I just don't want it to be a requirement for the view/controller as a static listing in the code) I'm not understanding what I need to do, but think Dan Wahlin is doing it here: http://weblogs.asp.net/dwahlin/dynamically-loading-controllers-and-views-with-angularjs-and-requirejs – sday Oct 31 '14 at 21:55
  • I think Dan just tries to use conventions to make routing easier, so that you don't have to specify controller and view but just one convention - but it is still the same approach and by the way, he is using requirejs, too. ;) Your upload example is something very special but perhaps it can be solved by just using parameters (also supported by angular ui router) and react on these parameters inside the controller? One last thing: Sometimes it is a good idea to use libraries and frameworks to not reinvent the wheel but save yourself a lot of time. :) But any way: Good luck! – timtos Oct 31 '14 at 22:24
  • I'm not against using libraries and frameworks... heck, the plunker example I posted uses angular and famous. I'm just trying to get a deeper understanding of this stuff. – sday Oct 31 '14 at 22:45