Узел + AngularJS ngRoute не отображает правильный вид?

Я запускаю тестовый сервер узла, используя этот JS, который я опубликую ниже. Моя основная проблема заключается в следующем: я создаю маршрут ('/ login'), используя Anglers 'ngRoute, но он не отображает правильный templateUrl, когда я обращаюсь к маршруту? Проверьте мой код ниже.Узел + AngularJS ngRoute не отображает правильный вид?

server.js

var express = require('express'), 
    app = express(), 
    mongoose = require('mongoose'), 
    bodyParser = require('body-parser'), 
    apiRouter = require('./app/routes/api.js'); 

mongoose.connect('localhost', 'triviaattack'); 

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

app.use(apiRouter); 
app.use(express.static('public')); 

app.use('*', function(req, res, next) { 
    res.sendFile(__dirname + '/public/index.html'); 
    next(); 
}); 

app.listen(1337); 

console.log('\033[2J'); 
console.log('Server started!');

Как вы можете видеть, у меня есть узел маршрутизатор внешнего api.js файлов, содержащий некоторые API маршрутов. И все остальное у меня есть catchall, который возвращает /public/index.html, вот этот файл, который загружает угловой, угловой маршрут и мое угловое приложение.

index.html

<!DOCTYPE html> 

<html ng-app="myApp"> 
<head> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.4/angular.min.js"></script> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.4/angular-route.min.js"></script> 
    <script src="./app/app.js"></script> 
</head> 
<body> 
    <div ng-controller="LoginCtrl"> 
     <a href="/login" ng-if="!loginData.isLoggedIn">Login!</a> 
     <p ng-if="loginData.isLoggedIn">Welcome, you are logged in as {{ loginData.username }}</p> 
    </div> 
</body> 
</html>

И вот, наконец, мой небольшой тест угловое приложение, которое упоминается в index.html выше, используя относительный путь ./app/app.js

app.js

var myApp = angular.module('myApp',['ngRoute']); 

myApp.controller('MainCtrl', ['$scope', function($scope) { 

}]); 

myApp.controller('LoginCtrl', ['$scope', function($scope) { 
    $scope.loginData = { 
     username: '', 
     password: '', 
     isLoggedIn: false 
    } 
}]); 

myApp.config(['$routeProvider', 
    function($routeProvider) { 
     $routeProvider. 
     when('/login', { //Doesn't show!?!?!?! 
      templateUrl: './app/views/login.html', 
      controller: 'LoginCtrl' 
     }); 
}]); 

console.log('app.js loaded!');

источник

2015-08-23 David Stampher

вы можете попробовать использовать '$ stateProvider' вместо поставщика маршрута. Я обнаружил, что намного проще использовать –

. На главной странице нет ''. Вот где маршрутизатор будет размещать шаблоны – charlietfl

@JoeLloyd Спасибо за совет, я просто не вижу этого решения в угловой документации здесь: https://docs.angularjs.org/tutorial/step_07 –

Как указано в комментариях @charlieftl вам необходимо включить /#/ в вашем URL-адресе для системы маршрутов углов для работы. Тем не менее, есть также html5Mode, которые вы можете использовать, чтобы сделать свой первоначальный запрос тоже.

Просто впрыснуть $locationProvider и использование:

$locationProvider.html5Mode(true);

Вы можете прочитать больше о нем:

Это позволит Вам не требуют # в вашем URLs.

источник

2015-08-23 23:08:54

Узел + AngularJS ngRoute не отображает правильный вид?

ответ

Смежные вопросы