无法弄清楚为什么ng-view在简单的均值堆栈应用程序中不起作用

Question

I am having trouble setting up ng-view. 我在设置ng-view时遇到问题。 This is my first mean stack app. 这是我的第一个平均堆栈应用程序。 I got everything working within index.html. 我在index.html中进行了所有工作。 However, when I set up ng-view I am getting errors stating that I have my javascripts in a public folder. 但是，当我设置ng-view时，出现错误，指出我的JavaScript位于公共文件夹中。 My index.html is in the html folder. 我的index.html位于html文件夹中。 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 在我的html内部，我设置了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. 在我的公共js文件夹中，我已经设置了工厂，配置和控制器。 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;

Answer 1

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. 我使用的是Express生成器，因此通过路由我调用了一个get请求，并将URL设置为templates文件夹。 Next, I identified the template id as a param. 接下来，我将模板ID标识为参数。 This saves me from setting up each page ex(home,library, about). 这使我免于设置每个页面，例如ex（home，library，about）。

router.get('/templates/:templateid' ,function(req,res,next){
res.render('templates/' + req.params.templateid);
})

无法弄清楚为什么ng-view在简单的均值堆栈应用程序中不起作用

问题描述

1 个解决方案

解决方案1
0 2015-05-13 18:46:37

无法弄清楚为什么ng-view在简单的均值堆栈应用程序中不起作用

问题描述

1 个解决方案

解决方案1 0 2015-05-13 18:46:37

解决方案1
0 2015-05-13 18:46:37