Question

此问题已解决。

错误发生在App.js＆amp; Server.js

我在我的前端使用Angular，我正在使用RouteProvider为客户端提供视图。我添加了路由，但是当我将ng-view添加到我的索引页面时，我的视图收到404错误。使用ng-view我可以渲染我的视图，但不能像我希望的那样使用整个网站的导航栏。

我要做的是让导航栏在整个网站上运行。并在。-p>下的ng-view中渲染视图

的index.html

<!DOCTYPE html>
<html">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE-edge">
        <title>WebApp</title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">
         <!-- Libraries -->
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.7/angular.min.js"></script>
        <script type="text/javascript" src="/js/angular-resource.min.js"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.7/angular-route.js"></script>
        <script type="text/javascript" src="/js/app.js"></script>
        <script type="text/javascript" src="/js/controllers/navigation.js"></script>

</head>

<body ng-app="webApp>

    <nav ng-controller="NavCtrl">
        <li ng-model="navigation" ng-repeat="navigation in navigation">
        <a href="{{ navigation.link }}">{{navigation.name}}</a>
        </li>
    </nav>

    <div ng-view></div>

</body>

main.html中

<h1> Main </h1>

channels.html

<h1> Channels</h1>

与上述所有其他观点相同！

App.js

var app = angular.module('webApp', ['ngResource', 'ngRoute']);

app.config(function($routeProvider, $locationProvider) {
  $routeProvider
  .when('/', {
    templateUrl: 'views/index.html',
    controller: 'indexCtrl'
  })
  .when('/main', {
    templateUrl: 'main',
    controller:   'mainCtrl'
  })
  .when('/login', {
    templateUrl: 'login',
    controller:   'loginCtrl'
  })
  .when('/channels', {
    templateUrl: 'channels',
    controller:   'channelsCtrl'
  })
  .when('/livenow', {
    templateUrl: 'livenow',
    controller:   'livenowCtrl'
  })
  .when('/signup', {
    templateUrl: 'signup',
    controller:   'signupCtrl'
  })
  .when('/userchannel', {
    templateUrl: 'userchannel',
    controller:   'userchannelCtrl'
  })
  .when('/profile', {
    templateUrl: 'profile',
    controller:   'profileCtrl'
  });

  $locationProvider.html5Mode(true);


  $routeProvider.otherwise({redirectTo: 'index'});
  // if none of the above states are matched, use this as the fallback
  });

Navigation.js

    angular.module('webApp').controller('NavCtrl', ['$scope', function($scope) {
    $scope.navigation = [
        {name: 'main', link: '/main'},
        {name: 'channels', link: '/channels'},
        {name: 'livenow', link: '/livenow'},
        {name: 'login', link: '/login'},
        {name: 'signup', link: '/signup'},
        {name: 'userchannel', link: '/userchannel'},
        {name: 'profile', link: '/profile'}
    ];
}]);

Server.js

    var express = require('express'),
    app = express(),
    bodyParser = require('body-parser'),
    mongoose   = require('mongoose');

app.use('/js', express.static(__dirname + '/client/js'));
app.get('/', function (req, res) {
    res.sendFile(__dirname + '/client/wwww/templates/');
});
app.get('/main', function (req, res) {
    res.sendFile(__dirname + '/client/www/templates/main.html');
});
app.get('/index', function (req, res) {
    res.sendFile(__dirname + '/client/www/templates/index.html');
});
app.get('/login', function (req, res) {
    res.sendFile(__dirname + '/client/www/templates/login.html');
});
app.get('/signup', function (req, res) {
    res.sendFile(__dirname + '/client/www/templates/signup.html');
});
app.get('/userchannel', function (req, res) {
    res.sendFile(__dirname + '/client/www/templates/userchannel.html');
});
app.get('/profile', function (req, res) {
    res.sendFile(__dirname + '/client/www/templates/profile.html');
});
app.get('/livenow', function (req, res) {
    res.sendFile(__dirname + '/client/www/templates/livenow.html');
});
app.get('/channels', function (req, res) {
    res.sendFile(__dirname + '/client/www/templates/channels.html');
});

app.use(bodyParser.urlencoded({
  extended: true
}));
app.use(bodyParser.json());

app.listen(3000, function() {
    console.log('I\'m Listening...');
})

Answer 1

<强> App.js

Plugin

<强> Server.js

var app = angular.module('webApp', ['ngResource', 'ngRoute']);

app.config(function($routeProvider, $locationProvider) {
  $routeProvider
  .when('/', {
    templateUrl: 'views/index.html',
    controller: 'indexCtrl'
  })
  .when('/main', {
    templateUrl: 'main',
    controller:   'mainCtrl'
  })
  .when('/login', {
    templateUrl: 'login',
    controller:   'loginCtrl'
  })
  .when('/channels', {
    templateUrl: 'channels',
    controller:   'channelsCtrl'
  })
  .when('/livenow', {
    templateUrl: 'livenow',
    controller:   'livenowCtrl'
  })
  .when('/signup', {
    templateUrl: 'signup',
    controller:   'signupCtrl'
  })
  .when('/userchannel', {
    templateUrl: 'userchannel',
    controller:   'userchannelCtrl'
  })
  .when('/profile', {
    templateUrl: 'profile',
    controller:   'profileCtrl'
  });

  $locationProvider.html5Mode(true);


  $routeProvider.otherwise({redirectTo: 'index'});
  // if none of the above states are matched, use this as the fallback
  });

当我向索引添加ng-view时，我的模板收到404错误* FIXED

1 个答案: