angularjs - using angular-ui-router with express/node, file structure -
i following this tutorial, , have app structure this. i've tried show relevant bits sort of 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 express.js (relevant bit)
app.use(express.static('./public'); i able set angular controllers, know directory being hit. example, 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"> <!-- alert in controller fires, know public directory accessible, @ least js folder--> <div ui-view></div> </body> </html> in 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 indeed alerted"); } ]); home.html
<h1> test see if view on index.ejs being populated </h1> i have tried many different combinations "templateurl" inside app.js, including
"partials/home.html" "/partials/home.html" "../partials/home.html" none of these result in home.html being placed inside div ui-view element on index.ejs page. realize have posted limited amount of code, fact able hit controllers , see alert message leads me believe there. using server side routing render initial index.ejs, other want handle things client side. know how make angular-ui-router locate partial set up?
the problem controller declaration. rather referencing module recreate (and override existing module) including square brackets.
if rewrite controller below should work:
var app = angular.module('myapp'); app.controller('mainctrl', [ '$scope', function($scope) { alert("this alert indeed alerted"); } ]); for more info, check out "creation versus retrieval" @ https://docs.angularjs.org/guide/module
Comments
Post a Comment