I'm trying my first app with the full MEAN stack but actually I'm stuck at definition of controllers/template outside from the first page.
I'm able to reach the various templates I created, but I can't succeed on find a way to bind the controller.
Here are my files
app.js which is located in the root directory
var express = require('express');
var path = require('path');
var favicon = require('serve-favicon');
var logger = require('morgan');
var cookieParser = require('cookie-parser');
var bodyParser = require('body-parser');
var routes = require('./routes/index');
var users = require('./routes/users');
var test = require('./routes/test');
var app = express();
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'ejs');
app.use(logger('dev'));
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public')));
app.use('/', routes);
app.use('/test', test);
module.exports = app;
angularApp.js located in public/javascripts/ where I tried both appending path, without path, with extension, without extension...
var app = angular.module('flapperNews', ['ui.router']);
app.config(['$stateProvider','$urlRouterProvider',function($stateProvider,
$urlRouterProvider) {
$stateProvider
.state('home', {
url: '/home',
templateUrl: '/home.html',
controller: 'MainCtrl' })
.state('test', {
url: '/test',
templateUrl: 'presentation/test.html',
controller: 'controller/CustomCtrl.js'
});
$urlRouterProvider.otherwise('home'); }]);
CustomCtrl.js this is my controller located in public/controller/
app.controller('CustomCtrl', ['$scope',function($scope){
$scope.test = 'Hello world!';
}]);
test.html this is my "template"
<div class="row">
<div class="col-md-6 col-md-offset-3">
{{test}}
</div>
</div>
index.html
<html>
<head>
<title>Flapper News</title>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.10/angular.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.10/angular-ui-router.js"></script>
<script src="javascripts/angularApp.js"></script>
<script src="controller/CustomCtrl.js"></script>
<style> .glyphicon-thumbs-up { cursor:pointer } </style>
</head>
<body ng-app="flapperNews" ng-controller="MainCtrl">
<div class="row">
<div class="col-md-6 col-md-offset-3">
<div class="page-header">
<h1>Flapper News</h1>
</div>
<div class="row">
<div class="col-md-6 col-md-offset-3" style="border: 1px solid black">
<ui-view></ui-view>
</div>
</div>
</div>
</div>
</body>
</html>
I just need that my test.html has is own controller CustomCtrl (I tried to print Hello World! but it prints {{test}} )
