0

I'm trying to get my head around how to load a view into a dynamic template on page load. My application has different templates based on device width. Currently the template is loaded without issue but when it comes to the view I'm not sure how to inject it.

<div data-ng-view></div> seems to be empty.

I've created a fiddle

Thanks again for the help.

Jimi
  • 1,867
  • 7
  • 31
  • 55
  • To use routes in angular you have to inject ngRoute module. Try to install angular-route package and add 'ngRoute' to angular module dependencies. – niba Apr 23 '14 at 11:46
  • That fiddle works for me... – Nix Apr 23 '14 at 11:49
  • 1
    Hi @niba, you only need to use ngRoute if you're using version 1.2.xxx or so I believe. – Jimi Apr 23 '14 at 12:00
  • @Nix, I'm not loading the view template at all. I'm getting the correct row in the array that's all. – Jimi Apr 23 '14 at 12:03
  • @Jimi i think you are dealing with this http://stackoverflow.com/questions/16674279/how-to-nest-ng-view-inside-ng-include – Nix Apr 23 '14 at 12:14
  • @Nix, I'm using 1.0.8 version of Angular. I believe that ngRoute is included. Is that not the case? – Jimi Apr 23 '14 at 12:17
  • It is included but they are suggesting you `$route.reload();` it to fix it. Its worth a try... – Nix Apr 23 '14 at 12:29
  • Do you really want to use it as an "include" ? – Nix Apr 23 '14 at 12:29
  • maybe I'm not following you. When the app loads I check the width and then load the appropriate template. Once the template is loaded I ng-repeat through a list which contains a list of the views which I would to inject into each accordion. – Jimi Apr 23 '14 at 12:34
  • How can I only show the first view? it seems to show the first view inside the second accordion? – Jimi Apr 23 '14 at 12:58

2 Answers2

0

This is the issue as mentioned in the comment. Using ng-view within ng-include. I took your fiddle and added a $route.reload() and it works. I also had to rename to one.html in your route config.

http://jsfiddle.net/Lb4em/

Side note:

Your template URL should be:

templateUrl: '/one.html',

It was templateUrl: 'views/steps/one.html',

<script type="text/ng-template" id="/one.html"></script>

Thoughts on a better way

@Jimi ui router is much friendlier when it comes syncing logic with "urls". E.g. in UI router you could have one abstract state that does everything, and have child states like root/one root/two when the URL changes ui-router is smart enough to detect that root will be in both so it does not reload the controller. This allows you to switch on $state.current.name == 'root.one' . And then you could conditionally include or just have the template logic. It would also not refresh the entire ng-view it would only refresh the ui-view attached to the state.

ui-router is a very powerful library. Most of the above will not make sense until you take a look at their docs/tutorials.

Nix
  • 57,072
  • 29
  • 149
  • 198
  • I'm a little confused? The template is loaded, the template contains the accordion, then the view is loaded into the accordion's row. If I change the template URL I just get the view. I want the template > the view. – Jimi Apr 23 '14 at 12:08
  • @Jimi i updated the fiddle and its at least showing up. I think you are going to run into issues with the way you have set things up. – Nix Apr 23 '14 at 12:33
  • thanks, much appreciated. What changes would you suggest I make to the code? – Jimi Apr 23 '14 at 12:45
  • thanks again for you help with this> I'll check out the library. – Jimi Apr 23 '14 at 21:06
0

I think you need to do some configuration in app.js. Please refer below code, in that I have done some url mapping and we have to specify the controller and templateUrl.

var vrmUI = angular.module('vrmUI', []);
vrmUI.config(function($routeProvider) {

$routeProvider
        .when('/', {
            controller: 'DashboardController',
            templateUrl: 'views/dashboard.html'
        })
        .when('/change-password', {
            controller: 'ChangePasswordController',
            templateUrl: 'views/change-password.html'
        })
        .when('/network-config', {
            controller: 'NetworkConfigController',
            templateUrl: 'views/network-config.html'
        })
        .when('/dashboard', {
            controller: 'DashboardController',
            templateUrl: 'views/dashboard.html'
        });

return vrmUI;
});
yuvrajgawade
  • 11
  • 3