AngularJS路由不會加載視圖，並且不會報告任何錯誤
[英]AngularJS route won't load the view and reports no errors
問題描述
結構如下：
以下是來源：
/* @flow */ "use strict"; (function () { const app = angular.module('Lesson2', ['ngRoute', 'ngAnimate'] ); app.config(function($routeProvider){ $routeProvider .when('/what', { controller:'FavoCtrl', templateURL:'pages/what.html'}) .when('/where', { controller:'FavoCtrl', templateURL:'pages/where.html'}) .otherwise({redirectTo:'/what'}); }); app.controller('FavoCtrl', function ($scope) { $scope.favouriteThings=[ {what:'raindrops', by:'on', where:'roses'}, {what:'whiskers', by:'on', where:'mittens'}, {what:'Brown paper packages', by:'tied up with', where:'strings'}, {what:'schnitzel', by:'with', where:'noodles'}, {what:'Wild geese', by:'that fly with', where:'the moon on their wings'}, {what:'girls', by:'in', where:'white dresses'}, {what:'Snowflakes', by:'that stay on', where:'my nose and eyelashes'} ]; }) })();
<!DOCTYPE html> <html ng-app="Lesson2"> <head lang="en"> <link rel="stylesheet" type="text/css" href="styles/style.css"> <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.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-animate.min.js"></script> <script src="scripts/app.js"></script> <meta charset="UTF-8"> <title>Lesson 2</title> </head> <body> Hello! <ng-view></ng-view> </body> </html>
還有兩個“ what.html”和“ where.html”是純文本，例如， This is "where.html"
這里最難的是瀏覽器不會拋出任何錯誤，控制台是干凈的。 視圖未加載，我只看到“ index.html”的“ Hello”
2 個解決方案
解決方案1
2 已采納 2015-05-27 07:40:43
好像您有錯字，在配置塊中，使用templateUrl而不是templateURL 。
它應該看起來像：
app.config(function($routeProvider){
$routeProvider
.when('/what', { controller:'FavoCtrl', templateUrl:'pages/what.html'})
.when('/where', { controller:'FavoCtrl', templateUrl:'pages/where.html'})
.otherwise({redirectTo:'/what'});
});
解決方案2
0 2015-05-27 07:43:43
首先，您的路由配置中有一個錯字，它是“ templateUrl”而不是“ templateURL”。
如果這不能解決您的問題，請嘗試在index.html中添加控制器
<html ng-app="Lesson2" ng-controller="FavoCtrl">
AngularJS路由-不會加載視圖
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.