Angular - Unable to load view

Question

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.

Answer 1

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.

Answer 2

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;
});