using angular-ui-router with express/node, file structure

Question

I am following this tutorial, and I have an app structure like this. I've tried to show only the relevant bits as it is sort of a lot of code.

/app
    /views
        index.ejs
/config
    express.js
/public
    /external_libs
        angular.js
        angular-ui-router.js
    /js
        app.js
        controllers.js
    /partials
        home.html
server.js

Inside my express.js (relevant bit)

app.use(express.static('./public');

I am able to set up my angular controllers, so I know this directory is being hit. For example, my index.ejs

<html ng-app="myapp">
    <head>
        <script src="external_libs/angular.js"></script>
        <script src="external_libs/angular-ui-router.js"></script>
        <script src="js/app.js"></script>
        <script src="js/controllers.js"</script>
    </head>
    <body ng-controller= "MainCtrl"> <!-- an alert in my controller fires, so I know the public directory is accessible, at least the js folder-->
        <div ui-view></div>
    </body>
</html>

In my app.js

var app = angular.module('myapp', ['ui.router']);
app.config([
    function($stateProvider, $urlRouterProvider) {
        $urlRouterProvider.otherwise('/home');
        $stateProvider
            .state('home', {
                url: '/home',
                templateUrl: 'partials/home.html'
            });
    }
]);

In controllers.js

var app = angular.module('myapp', []);
app.controller('MainCtrl', [
    '$scope', function($scope) {
        alert("This alert is indeed alerted");
    }
]);

home.html

<h1> This is a test to see if the view on index.ejs is being populated </h1>

I have tried many different combinations for the "templateUrl" inside app.js, including

"partials/home.html"
"/partials/home.html"
"../partials/home.html"

None of these result in home.html being placed inside the div ui-view element on my index.ejs page. I realize I have posted a somewhat limited amount of code, but the fact that I am able to hit my controllers and see an alert message leads me to believe that I am almost there. I am using server side routing to render the initial index.ejs, but other than that I want to handle things client side. Does anyone know how to make angular-ui-router locate my partial with this set up?

And if you replace your templateUrl with a template:'<div>test</div>'? Also looking at the requests (dev tools network-tab) might give a hint to what files it's trying to fetch. — ippi
– ippi, Commented Aug 25, 2015 at 5:13
replacing with template '<div>test</div>' does not give me the partial :/ — Zack
– Zack, Commented Aug 25, 2015 at 5:18

T Dog · Accepted Answer · 2015-10-22 14:57:17Z

1

The problem is with your controller declaration. Rather than referencing the module you recreate it (and override the existing module) by including the square brackets.

If you rewrite your controller as below it should work:

var app = angular.module('myapp');
app.controller('MainCtrl', [
  '$scope',
  function($scope) {
    alert("This alert is indeed alerted");
  }
]);

For more info, check out "Creation versus Retrieval" at https://docs.angularjs.org/guide/module

answered Oct 22, 2015 at 14:57

T Dog

294 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

using angular-ui-router with express/node, file structure

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related