Question

我无法设置ng-view。这是我的第一个平均堆栈应用程序。我在index.html中完成了所有工作。但是，当我设置ng-view时，我收到错误声明我在公共文件夹中有我的javascripts。我的index.html在html文件夹中。我在视图中设置了一个名为模板的附加文件夹，以容纳我的其他页面

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

在我的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>

在我的公共js文件夹中，我已经设置了我的工厂，配置和控制器。我正在使用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');
            })

    };

});

在我的路线文件夹中，我确保渲染索引

       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

在做一个平均堆栈时，我必须记住在服务器和客户端设置路由。我的模板在视图中。我通过表达渲染我的视图我还需要以相同的方式渲染我的模板。

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

我正在使用express生成器，因此通过路由我调用了get请求并将url设置为templates文件夹。接下来，我将模板ID识别为参数。这使我免于设置每个页面（家庭，图书馆，关于）。

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

无法弄清楚为什么ng-view不适用于简单的平均堆栈应用程序

1 个答案: