2015-05-07 5 views
0

Я создаю угловое приложение после игры. Однако мой угловой ng-view не рендеринг. Я видел аналогичный вопрос here, но на него не ответил. Ниже мой реж структураугловой частичный не рендеринг с нефритом

app.js

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

angular.module('app').config(function($routeProvider, $locationProvider){ 
    $locationProvider.html5Mode(true); 
    $routeProvider 
     .when('/', { templateUrl: 'partials/main', controller: 'mainCtrl'}); 
}); 


angular.module('app').controller('mainCtrl', function($scope){ 
    $scope.myVar = "Hello Angular"; 
}); 

Мой layout.jade

doctype html 
head 
    link(rel="styleSheet",href="css/bootstrap.css") 
    link(rel="styleSheet",href="vendor/toastr/toastr.css") 
    link(rel="styleSheet",href="css/site.css") 
body(ng-app='app') 
    block main-content 
    include scripts 

Мой main.jade

h1 This is a partial 
h2 {{ myVar }} 

Маршрут в м у server.js установлены как

app.get('partials/:partialPath',function(req,res){ 
    res.render('partials/' + req.params.partialPath); 
}); 
app.get('*', function(req,res){ 
    res.render('index'); 
}); 

мой index.jade

extends ../includes/layout 

block main-content 
    section.content 
     div(ng-view) 

Хотя я имею в виду, что не должно быть проблемой, потому что я начинаю с частичным видом, который является частью страницы , Когда я запускаю свою страницу, он возвращается в черный цвет. Я проверил элементы и обеспечил, чтобы все загруженные js и css. Источник HTML ниже был сгенерирован на моей странице:

<!DOCTYPE html> 
<head><link rel="styleSheet" href="css/bootstrap.css"> 
<link rel="styleSheet" href="vendor/toastr/toastr.css"> 
<link rel="styleSheet" href="css/site.css"> 
</head> 
<body ng-app="app"> 
    <section class="content"> 
    <div ng-view></div></section> 
    <script type="text/javascript" src="vendor/jquery/dist/jquery.js"></script><script type="text/javascript" src="vendor/angular/angular.js"></script> 
<script type="text/javascript" src="vendor/angular-resource/angular-resource.js"></script> 
<script type="text/javascript" src="vendor/angular-route/angular-route.js"></script><script type="text/javascript" src="app/app.js"></script> 
</body> 

Я подозревал routeProvider из моих app.js здесь

.when('/', { templateUrl: 'partials/main', controller: 'mainCtrl'}); 

пытался

.when('/', { templateUrl: '/partials/main', controller: 'mainCtrl'}); 

Все безрезультатно. Пожалуйста, где я ошибаюсь? Я пробовал все возможное. Я даже перезапустил тут, но все еще пуст. Любая помощь будет оценена по достоинству.

+0

Вы попробовали '' partials/main.html''? Это то, что у меня есть в одном из моих '$ stateProvider'. Я проверил, и расширение есть. Могу работать без него, ум. –

+0

да sir я сделал, тоже мой частичный в .jade. Я попробовал .html nd .jade, оба не удалось. –

+0

Не может быть .jade в любом случае, он должен быть html. Любые ошибки в консоли? –

ответ

0

Спасибо за ваше время. Оказывается, этот вопрос находится в моем макете

doctype html 
head 
    link(rel="styleSheet",href="css/bootstrap.css") 
    link(rel="styleSheet",href="vendor/toastr/toastr.css") 
    link(rel="styleSheet",href="css/site.css") 
body(ng-app='app') 
    block main-content 
    include scripts 

Изменен

doctype html 
    head 
     base(href='/') 
     link(rel="styleSheet",href="css/bootstrap.css") 
     link(rel="styleSheet",href="vendor/toastr/toastr.css") 
     link(rel="styleSheet",href="css/site.css") 
    body(ng-app='app') 
     block main-content 
     include scripts 

Что Недостающий

base(href='/') 

Он не загружает шаблоны, если вы удалите эту базу. Я узнал, что из другого tut видео с tut plus «[Tuts Plus] Создание веб-приложения с нуля с помощью AngularJS Video Tutorial». Ведущий специально упомянул о важности base(href='/') и предупредил, чтобы никогда не забывать. Кроме того, есть еще один хороший пример из ответа @Alex Choroshin here. вы должны скачать документ, который он предложил. Это прекрасный пример. Спасибо

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