AngularJS - Просмотр не будет отображаться в моем браузере?

Я перехожу на маршрут '/ login', который я установил в своем угловом приложении. Когда я пытаюсь перейти к представлению, которое я создал, используя угловую маршрутизацию, я вижу только навигационную панель на своей странице и ничего внутри ng-view. На вкладке «Сеть» моей консоли Chrome она показывает, что представление успешно запрошено и отправлено клиенту, но оно не отображается для меня в исходном источнике. Также я хотел бы отметить, что мой маршрут для '/' работает исправление. В консоли нет ошибок.AngularJS - Просмотр не будет отображаться в моем браузере?

Я использую NodeJS + ExpressJS для своего веб-сервера. Это СПА. Также я использую RequireJS для загрузки модуля.

server.js

var express = require('express'), 
    app = express(), 
    path = require('path'), 
    apiRouter = require('./app/routes/api'), 
    mongoose = require('mongoose'), 
    compression = require('compression'); 

app.use(compression()); 
app.use(express.static('public')); 
app.use('/api', apiRouter); 

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

mongoose.connect('mongodb://localhost/triviaattack'); 

var db = mongoose.connection; 
db.on('error', console.error.bind(console, 'connection error:')); 
db.once('open', function() { 
    //Connected to DB successfully. 

}); 

app.listen(1337);

index.html

<!doctype html> 
<html class="no-js" lang=""> 
    <head> 
     <meta charset="utf-8"> 
     <meta http-equiv="x-ua-compatible" content="ie=edge"> 
     <title></title> 
     <meta name="description" content=""> 
     <meta name="viewport" content="width=device-width, initial-scale=1"> 

     <link rel="apple-touch-icon" href="apple-touch-icon.png"> 
     <!-- Place favicon.ico in the root directory --> 

     <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"> 
     <link rel="stylesheet" href="css/normalize.css"> 
     <link rel="stylesheet" href="css/main.css"> 
     <!-- <script src="js/vendor/modernizr-2.8.3.min.js"></script> --> 
     <script data-main="js/main" src="js/vendor/require.js"></script>  
    </head> 
    <body> 
     <!--[if lt IE 8]> 
      <p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p> 
     <![endif]--> 
    <nav class="navbar navbar-inverse navbar-fixed-top" ng-controller="navCtrl"> 
     <div class="container"> 
     <div class="navbar-header"> 
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> 
      <span class="sr-only">Toggle navigation</span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
      </button> 
      <a class="navbar-brand" href="#">Brand</a> 
     </div> 
     <div id="navbar" class="navbar-collapse collapse"> 
      <ul class="nav navbar-nav navbar-right"> 
       <li><button class="btn btn-default navbar-btn" ng-click="login()">Login</button></li> 
       <li><button class="btn btn-info navbar-btn" ng-click="register()">Register</button></li> 
      </ul> 
     </div><!--/.navbar-collapse --> 
     </div> 
    </nav> 
     <div ng-view></div> 
    </body> 
</html>

main.js

require.config({ 

    paths: { 
     'angular': 'vendor/angular', 
     'domReady': 'vendor/domready', 
     'angularRoute': 'vendor/angular-route', 
     'bootstrapCss': 'vendor/bootstrap-css' 
    }, 

    shim: { 
     'angular': { 
      exports: 'angular' 
     }, 
     'angularRoute': { 
      deps: ['angular'], 
      exports: 'angularRouter' 
     } 
    }, 

    deps: ['./bootstrap'] 
});

bootstrap.js

require([ 
    'angular', 
    'angularRoute', 
    'app', 
    'services/loginSvc', 
    'controllers/navCtrl', 
    'controllers/homeCtrl', 
    'controllers/loginCtrl', 
    'routes' 
    ], function (angular, angularRoute, app) { 
    'use strict'; 

    angular.element(document).ready(function() { 
     angular.bootstrap(document, ['myApp']); 
    }); 

});

app.js

define([ 
    'angular', 
    'angularRoute' 
], function(angular, angularRoute) { 

'use strict'; 

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

return app; 

});

routes.js

define(['app'], function(app) { 
    'use strict'; 

    app.config(function($routeProvider) { 
     $routeProvider 
     .when('/', { 
      templateUrl: 'js/views/home.html', 
      controller: 'homeCtrl' 
     }) 
     .when('/login', { 
      templateUrl: 'js/views/login.html', 
      controller: 'loginCtrl' 
     }); 
    }); 
});

источник

2016-01-20 David Stampher

У вас есть какое-либо сообщение в консоли broser? Что-то вроде «не может найти js/views/login.html?». Похоже, что файл не отправляется вашим сервером при доступе к маршруту '/', который вы отправляете html-файл, но не также статическим зависимостям. Сообщите мне, есть ли в консоли какие-либо сообщения. – alexsc

Нет, никаких ошибок, и я могу увидеть login.html в сетевой консоли, когда я перейду к example.com/#/login –

Можете ли вы попробовать программно переместиться в/login? Что-то вроде '$ location.path ('/ login')' из вашего homeCtrl? – Zlatko

Я полагаю, вы набираете /login путь прямо в вашем браузере. Если вы вводите маршрут вручную в свой браузер, при вводе http://myapp.com/myapp/ ng-route будет следовать маршруту /. Однако, если вы наберете http://myapp.com/myapp/login, он не будет следовать маршруту login. Это связано с тем, что ng-route ожидает, что маршрут появится после #.

Попробуйте ввести http://myapp.com/myapp/#/login, очевидно, заменив части myapp на соответствующий путь для вашего приложения.

Кроме того, это может помочь сделать маршрут /home, а затем использовать функцию .otherwise()$routeProvider, чтобы сделать маршрут по умолчанию, который он загружает. Таким образом, если вы попытаетесь выполнить маршрут, который не существует, он по умолчанию будет использовать маршрут /home вместо того, чтобы показывать пустой шаблон.

Вот как бы вы achive что:

app.config(function($routeProvider) { 
    $routeProvider 
    .when('/home', { 
     templateUrl: 'js/views/home.html', 
     controller: 'homeCtrl' 
    }) 
    .when('/login', { 
     templateUrl: 'js/views/login.html', 
     controller: 'loginCtrl' 
    }) 
    .otherwise({ 
     redirectTo: '/home' 
    }); 
});

EDIT:

Всегда используйте элемент инспектора вашего браузера, когда вы используете ng-view. Параметр «Просмотр источника» в вашем браузере никогда не покажет ваш загруженный код шаблона, потому что фактический исходный код вашей страницы содержит только <div ng-view></div>, а не код шаблона.

источник

2016-01-20 13:46:08

Я использовал hashbang btw для навигации, не работал. –

Просто протестирован снова, перейдя по адресу http: // localhost: 1337/#/login, появляется навигационная панель, нет ошибок в консоли, login.html отображается в сетевой консоли, но не заполняется в ng-view –

Попробуйте освежиться, когда вы введите его прямо. – Zlatko

Мой взгляд на самом деле был рендеринг. Но поскольку я использовал фиксированную навигационную панель, она отображалась за ней (так что она была невидимой.) Я могу добавить маркер к верхней части моего ng-view div, действительно простое исправление.

источник

2016-01-20 14:25:50

AngularJS - Просмотр не будет отображаться в моем браузере?

ответ

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