Cannot inject view with angularjs 1.2

Question

My code, as below, does not substitute the mg-view with the template from the route configuration. I get {{message}} to be replaced by 'in controller', which shows the controller is alive, but nothing more happens.

View:

<!DOCTYPE html>
<html ng-app="app">
<head>          
    <script src="angularjs/angular.js"></script>
    <script src="angularjs/angular-resource.js"></script>
    <script src="angularjs/angular-route.js"></script>

<script src="app.js.html"></script>
</head>
<body class="appearanceOrange styleIOS">

    <section ng-app="app" ng-controller="pageCtrl">
        Current page '{{ message }}'

        <div ng-view></div>
    </section>
</body>
</html>

Controller:

var app = angular.module('app', ['ngRoute']);

app.config(function($routeProvider) {
  $routeProvider
    .when('/corporate', {
      controller:'pageCtrl',
      templateUrl:'corporate.html'
    })
    .otherwise({
      redirectTo:'/corporate'
    });
});

app.controller('pageCtrl', function ($scope) {
    $scope.message = "in controller";

});

Partial:

<section 
    id="pageCorp"
    class="page"
    title="Corp France"
    background="stripRoll"
    style="text-align:center; display: block;">
    <div style="padding:200px">
        <a href="http://www.corp.fr/go/id/ceeq/" style="color: white">
            <img src="rsc/corp.logo.svg" style="width:150px; margin: auto auto;background-color:white;"/><br/>
            <span style="font-size:18pt;font-weight:bold">visit our Website</span>
        </a>
    </div>
</section>

What is your corporate.html content? And what should happen exactly? — Cem Özer, Apr 08 '14 at 09:02
Added the corporate.html partial to the question @CemOzer and the result I expect is the replacement of the div mg-view by my partial html code. — Stéphane de Luca, Apr 08 '14 at 09:18
and the template url is valid? exists on the server? no errors? — Mosho, Apr 08 '14 at 09:23
It's all local development for now. I don't notice any issue in the Safari inspector. @Mosho gave me a hint in trying to make the template works first. I fixed the template version by commenting out others routes. So now it works. Still need to make templateUrl works. Getting near now :-) — Stéphane de Luca, Apr 08 '14 at 09:25

Mosho · Answer 1 · 2014-04-08T10:07:13.863

0

Looks fine to me, as long as your template in corporate.html exists.

Here is a working fiddle.

var app = angular.module('app', ['ngRoute']);

app.config(function($routeProvider) {
    $routeProvider.when('/corporate', {
        controller: 'pageCtrl',
        template: 'hi'
    }).otherwise({
        redirectTo: '/corporate'
    });
});

app.controller('pageCtrl', function($scope) {
    $scope.message = "in controller";
});

Edit: Here is another possibility to use the template, with $templateCache: jsfiddle

app.run(function($templateCache) {
  $templateCache.put('corporate.html', 'This is the content of the template');
});

edited Apr 08 '14 at 10:07

answered Apr 08 '14 at 09:06

Mosho

7,099
3
34
51

This works in my project. But does not if I specify templateUrl. I see the partial loaded in the XHR. But I see the view commented out (mg-view) as follows: @Mosho – Stéphane de Luca Apr 08 '14 at 09:35
@StéphanedeLuca That is just inserted by angular no matter what you put in the template. In your case the template is either empty or invalid HTML. Your partial in the question is invalid and that might cause this (you don't close the first tag). In addition, I added another option with $templateCache. – Mosho Apr 08 '14 at 09:58
The section tag is close (you have this feeling because of the way the attributes are layer out on multiple lines I think. Anyway, I have already tested against a partial with no tag, only "Hi!" text. Same result. Quite weird. @Mosho – Stéphane de Luca Apr 08 '14 at 10:05
@StéphanedeLuca And again, you are getting no HTTP errors in the console? For now, you could just use the $templateCache, it should work. – Mosho Apr 08 '14 at 10:12
Yep, nothing's wrong, the partial is in the XHR. I'm going give a try with the cache to pass this for now. – Stéphane de Luca Apr 08 '14 at 10:19
The cache works. I get to investigate around potential issues regarding partial files then – Stéphane de Luca Apr 08 '14 at 10:22

score 0 · Answer 2 · answered Apr 08 '14 at 11:32

After hours of investigation, it comes that legacy javascript was breaking angularjs. So be careful when converting (migrating) to angularjs, and try to deactivate your legacy javascript code first, prior to enter in a lengthly investigation period… Thanks to everyone who helped me.

Cannot inject view with angularjs 1.2

2 Answers2