简体   繁体   中英

Angular Routing templateUrl with Express backend not working

I am having an issue getting a partial to display using angular routing and express. I am trying to set things up so I can still use pug (formerly jade) to write shortform html. As far as I can tell, everything should be working, no errors, everything is pulling correctly. I have most other portions of the application working (api calls, controllers, etc.) My main page is as follows:

    doctype html
    html(ng-app='myapp')
        head
            base(href='/')
            script(src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.js")
            script(src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular-route.js")

        body
             header#main

            .content(ng-view)


             script(src="/js/app.js")
             script(src="/js/controllers/adminController.js")
             script(src="/js/routes.js")

Here is my routes file

angular.module('myapp')
.config(function ($routeProvider, $locationProvider) {
    $routeProvider
        .when('/admin', {
            templateUrl: '/templates/admin',
            controller: 'AdminController',
            caseInsensitiveMatch: true
        })
        .otherwise({
            template: '<h1>Page not found</h1>'
        })
    ;
    $locationProvider.html5Mode(true);
});

And finally, the express route:

router.get('/templates/:name', function(req, res, next) {
     var name = 'templates/' + req.params.name;
     console.log('Express: ' + name);
     res.render(name, function(err, html){
        //this callback function can be removed. It's just for debugging.
        if(err)
            console.log("Error: " + err);
        else
            console.log("We're good!");
        res.send(html);
     });
 });

Lastly, here is the node server output:

Express: index
GET /admin 304 68.962 ms - -
GET /js/app.js 304 0.994 ms - -
GET /js/controllers/adminController.js 304 0.751 ms - -
GET /js/routes.js 304 14.590 ms - -
Express: templates/admin
We're good!
GET /templates/admin 304 368.081 ms - -

As you can see, the index loads, calls the partial, and the template is getting called and rendered just as you would expect.

The problem is ng-view is not getting replaced or updated. It all works just fine if I change the route to template instead of templateUrl, and just print out a line of text, so I know routing is working and this isn't an app configuration issue.

I've been stuck on this for a few days, and without any error messages, I am completely in the the dark as to why this doesn't work.

Additionally, when I check the following in my controller, I get the partial, so it is coming through properly:

angular.module('buriedcinema.controllers')
    .controller('AdminController', ['$templateCache', function(Movies, Users, $templateCache){
    console.log($templateCache.get('templates/admin'));
}
console:
<h1> this is my partial </h1>

Fixed by adding "controllerAs:" option to my routing and referring to my controller by the object name.

.when('/admin', {
            templateUrl: 'templates/admin',
            controller: 'AdminController',
            controllerAs: 'adminCtrl',
            caseInsensitiveMatch: true
        })

The more technical explanation is that I wasn't instantiating an object with state, but trying to use my controller statically so it never updated. Hope this can help someone else.

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM