MEAN stack, angular basic example is not working

Question

i am newbie to MEAN stack. i am making example from many websites.

but i just cannot go further.

here is the problem.

my webserver can send index.html and other js files.

but simple angular app won't work.

here are codes. index.html

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="utf-,8">
<title>BTELI</title>
</head>
<body>

<div ng-app="testApp">
<ng-view></ng-view>
</div>

<script src="bower_components/angular/angular.min.js"></script>
<script src="javascripts/app.js"></script>
</body>
</html>

app.js

var app = angular.module("testApp",[]);

app.config(function ($routeProvider) {
$routeProvider.when('/', 
  {
    templateUrl: "view/main.html",
    controller: "MainCtrl"
  }
)
})

app.controller("MainCtrl", function ($scope) {
$scope.model = {
  message:"This is MY APP!!!"
}
})

finally, main.html

<h1>{{model.message}}</h1>

i really don't have any idea why it won't works.

because, i could access to those js files in the html source.

what can i do?

i am not sure it helps or not, i attach my server side codes here.

app.js

var express = require('express');
var path = require('path');
var favicon = require('static-favicon');
var logger = require('morgan');
var cookieParser = require('cookie-parser');
var bodyParser = require('body-parser');
var app = express();
app.enable('jsonp callback');
app.set('view engine', 'ejs');
app.set('views',__dirname+'/public/view');
app.use(favicon(__dirname+'/public/favicon.ico'));
app.use(logger('dev'));
app.use(bodyParser.json());
app.use(bodyParser.urlencoded());
app.use(express.static(path.join(__dirname, '/public')));

require('./server/routes/index.js')(app);

app.use(function(req, res, next) {
    var err = new Error('Not Found'); 
    err.status = 404;
    next(err);
});

if (app.get('env') === 'development') {
    console.log('development mode');
    app.use(function(err, req, res, next) {
        res.status(err.status || 500);
        res.render('error', {
            message: err.message,
            error: err
        });
    });
}

app.use(function(err, req, res, next) {
    res.status(err.status || 500);
    res.render('error', {
        message: err.message,
        error: {}
    });
});

app.listen(80,function(){
    console.log('Listening on Port 80');
});

module.exports = app;

and routing part.

app.get('/', function(req, res) {
    res.sendfile('index.html');
});

i get index.html page that i attached. but i want to see main.html through angular routing. @Andrew — Hanjun koo, Jun 15 '14 at 22:26
in other words, your `ng-view` element is not populated but is instead displayed on the page? — Claies, Jun 15 '14 at 22:28
looking at your code, it doesn't look like you injected the `ngRoute` service into your app? — Claies, Jun 15 '14 at 22:29
yes. when i see the source code of index.html in a browser, i can see that element. @AndrewCounts — Hanjun koo, Jun 15 '14 at 22:30
Check if somehow your client side js files are being minified by the default grunt tasks. if they are, then your angular code needs changing to the dependency array style. It should also be the default way to write an angular, so make it a habit. — SirDemon, Jun 15 '14 at 22:30

score 3 · Accepted Answer · answered Jun 15 '14 at 22:33

3

Your app is not including the ngRoute service, and therefore wouldn't have access to the $routeProvider.

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

in index.html

<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.11/angular-route.js"></script>

https://docs.angularjs.org/api/ngRoute/service/%24route#example

answered Jun 15 '14 at 22:33

Claies

22,124
4
53
77

1

Thanks a lot, in quite many websites, they don't have such a 'ngRoute'. That's why i got confused =(.. but it is working well now. so appreciate! – Hanjun koo Jun 15 '14 at 22:36

MEAN stack, angular basic example is not working

1 Answers1