1

I am having trouble setting up ng-view. This is my first mean stack app. I got everything working within index.html. However, when I set up ng-view I am getting errors stating that I have my javascripts in a public folder. My index.html is in the html folder. I have set up an additional folder in views called templates to house my additional pages 

    "GET http://localhost:3000/templates/home.html 500 (Internal Server    Error)"

Inside of my html I have set up ng-view 

    <!doctype html>
    <html lang="en" ng-app='myApp'>
    <head>
     <meta charset="UTF-8">
     <title>Caffeine app</title>
     <!-- styles -->
     <link href="http://netdna.bootstrapcdn.com/bootswatch/3.3.2/yeti/bootstrap.min.css" rel="stylesheet" media="screen">
     <link href="stylesheets/style.css" rel="stylesheet" media="screen">
    </head>
    <body>
      <div class="container>
       <div ng-view>
       </div>

    </div>
    <!-- scripts -->
    <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
    <script src="http://netdna.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>

    <script src="libs/angular/angular.min.js"></script>

    <script src="libs/angular-route/angular-route.min.js"></script>

    <script src="javascripts/main2.js" type="text/javascript"></script>
  </body>
</html>

In my public js folder I have set up my factory, config, and controllers. I am using swig.

     var app = angular.module('myApp', ['ngRoute'], function ($interpolateProvider) {
            $interpolateProvider.startSymbol('[[');
            $interpolateProvider.endSymbol(']]');
        });
app.config(function($routeProvider,$locationProvider){
    $routeProvider
        .when('/home',{
            templateUrl:'templates/home.html',
            controller:'myController'
        })
        .when('/drinkLibrary',{
            templateUrl:'templates/drinkLibrary.html',
            controller:'DrinkLibraryController'
        })
        .otherwise({
            redirectTo: '/home'
        })
        $locationProvider.hashPrefix('!');
});
app.factory('Drink',function($http) {
    var Drink = function(name,description,caffeineLevel) {
        this.name = name;
        this.description = description;
        this.caffeineLevel = caffeineLevel;

    }

    return Drink;
})

app.controller('HomeController',function($scope){
    console.log('home');
})

app.controller('DrinkLibraryController',function($scope){
    console.log('drinkLibrary');
})


app.controller('myController', function($scope,Drink,$http  ) {
    var init = function() {
         $scope.defaultForm = {
            beverageName: "",
            description: "",
            caffeine: ""
        };
    }
    init();
    // $scope.defaultForm = defaultForm;


    $scope.allDrinkList = [];
    $scope.drinkList= function(obj) {
        var newdrink = new Drink(obj.beverageName,obj.description,obj.caffeine);
        $scope.allDrinkList.push(newdrink);
        console.log($scope.allDrinkList);
        init();

        $http.post('/api/drinks',obj).
            success(function(data){
                console.log(data)
                $scope.message = 'success';
            }).
            error(function(data){
                console.log('error');
            })

    };

});

Inside of my routes folder I am making sure to render the index

       var express = require('express');
       var router = express.Router();

       /* GET home page. */
       router.get('/', function(req, res, next) {
       res.render('index');
       });




module.exports = router;
Winnemucca
  • 3,309
  • 11
  • 37
  • 66
  • 4
    `500` is a server error, check out file location and server, try to access the file directly `http://localhost:3000/templates/home.html` – maurycy May 11 '15 at 16:34
  • Thanks maurycy. I think i am about to get this the way I want it. I have been working on it for a while. Without your help I who knows how long it would have taken me. – Winnemucca May 11 '15 at 23:02

1 Answers1

0

In doing a mean stack I must remember to set up routes on the server and client side. My templates are in the view. I am rendering my view through express I need to also render my templates in the same manner.

app.use('templates/:templateid', routes);

I am using the express generator so through the routes I called a get request and set the url to the templates folder. Next, I identified the template id as a param. This saves me from setting up each page ex(home,library, about).

router.get('/templates/:templateid' ,function(req,res,next){
res.render('templates/' + req.params.templateid);
})
Winnemucca
  • 3,309
  • 11
  • 37
  • 66