Angular ng-view не работает должным образом

Я работаю над учебным пособием по средним машинам и пришел к дорожному блоку при использовании ng-view для ввода страниц в основной макет. Я настроил маршруты в app.routes.js, определил контроллеры в app.js, а также создал html-файлы для каждой страницы. Оба файла app.js и app.routes.js загружены в файл index.html. mainController работает нормально, а не вспомогательные контроллеры. См. Код ниже. Любая идея о том, что я делаю неправильно?Angular ng-view не работает должным образом

общественности/просмотров/index.html

<html> 
<head> 
    <meta charset="utf-8"> 
    <title>My Routing App!</title> 

    <!-- set the base path for angular routing --> 
    <base href="/"> 

    <!-- CSS --> 
    <!-- load bootstrap and fontawesome via CDN --> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css"> 
    <style> 
    body { padding-top:50px; } 
    </style> 

    <!-- JS --> 
    <!-- load angular and angular-route via CDN --> 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script> 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-route.js"></script> 

<!-- load our custom angular app files --> 
    <script src="js/app.js"></script> 
    <script src="js/app.routes.js"></script> 
</head> 
<body class="container" ng-app="routerApp" ng-controller="mainController as main"> 

    <!-- HEADER AND NAVBAR --> 
    <header> 
    <nav class="navbar navbar-default"> 
     <div class ="navbar-header"> 
     <a class="navbar-brand" href="/">Angular Routing Example</a> 
     </div> 

     <ul class="nav navbar-nav navbar-right"> 
     <li><a href="/"><i class="fa fa-home"></i> Home</a></li> 
     <li><a href="/about"><i class="fa fa-shield"></i> About</a></li> 
     <li><a href="/contact"><i class="fa fa-comment"></i> Contact</a></li> 
     </ul> 
    </nav> 
    </header> 

    <!-- MAIN CONTENT AND INJECTED VIEWS --> 
    <main> 

    <!-- angular templating will go here --> 
    <!-- this is where content will be injected --> 

    <div ng-view></div> 

    </main> 

</body> 
</html>

общественные/JS/app.js

angular.module('routerApp', ['routerRoutes']) 

// create the controllers 
// this will be the controller for the ENTIRE site 
.controller('mainController', function() { 

    var vm = this; 

    // create a bigMessage variable to display in our views 
    vm.bigMessage = 'A smooth sea never made a skilled sailor.'; 
}) 

// home page specific controller 
.controller('homeController', function() { 

    var vm = this; 

    vm.message = 'This is the home page!'; 
}) 

// about page controller 
.controller('aboutController', function() { 

    var vm = this; 

    vm.message = 'Look! I am an about page.'; 
}) 

// contact page controller 
.controller('contactController', function() { 

    var vm = this; 

    vm.message = 'Contact us! JK. This is just a demo.'; 
});

общественные/JS/app.routes.js

// inject ngRoute for all our routing needs 
angular.module('routerRoutes', ['ngRoute']) 

// configure our routes 
.config(function($routeProvider, $locationProvider) { 
    $routeProvider 

    // route for the home page 
    .when('/', { 
    templateURL: 'views/pages/home.html', 
    controller: 'homeController', 
    controllerAs: 'home' 
    }) 

    // route for the about page 
    .when('/about', { 
    templateURL: 'views/pages/about.html', 
    controller: 'aboutController', 
    controllerAs: 'about' 
    }) 

    // route for the contact page 
    .when('/contact', { 
    templateURL: 'views/pages/contact.html', 
    controller: 'contactController', 
    controllerAs: 'contact' 
    }); 

    // set our app to have pretty URLS 
    $locationProvider.html5Mode(true); 
});

общественности/views/pages/home.html

<div class="jumbotron text-center"> 
    <h1>Home Page</h1> 

    <p>{{ home.message }}</p> 
</div>

общественные/просмотров/страниц/about.html

<div class="jumbotron text-center"> 
    <h1>About Page</h1> 

    <p>{{ about.message }}</p> 
</div>

общественности/просмотров/страниц/contact.html

<div class="jumbotron text-center"> 
    <h1>Contact Page</h1> 

    <p>{{ contact.message }}</p> 
</div>

источник

2015-11-12 Nick Carroll

Вы уверены, что ваши свойства templateURL имеют правильное значение? Попробуйте с public/views/pages/home.html или любым полным URL-адресом, который отображается при просмотре вашего приложения в вашем браузере.

См. Документацию по маршруту $ routeProvider: https://docs.angularjs.org/api/ngRoute/provider/ $ routeProvider.

источник

2015-11-12 16:10:27

Я пробовал - это не имело значения. Я действительно нашел корень проблемы, в файле app.routes.js, я написал templateURL вместо templateUrl. Я сошел с ума там на секунду, спасибо, что заглянул в него! –

Angular ng-view не работает должным образом

ответ

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