Question

我目前正在尝试构建一个角度js菜单，这里是我的代码，我似乎无法让页面加载。我错过了什么吗？我是否包含了所需的所有正确脚本。角度很新。

// create the module and name it scotchApp    
var scotchApp = angular.module('RoutingApp', ['ngRoute']);  
  
// configure our routes    
scotchApp.config(function($routeProvider) {  
    $routeProvider  
  
    // route for the home page    
        .when('/', {  
        templateUrl: 'http://www.habboholiday.net/pages/home.html',  
        controller: 'mainController'  
    })  
  
    // route for the about page    
    .when('/about', {  
        templateUrl: 'pages/about.html',  
        controller: 'aboutController'  
    })  
  
    // route for the contact page    
    .when('/contact', {  
        templateUrl: 'pages/contact.html',  
        controller: 'contactController'  
    });  
  
});  
  
// create the controller and inject Angular's $scope    
scotchApp.controller('mainController', function($scope) {  
    // create a message to display in our view    
    $scope.HomeMessage = 'Home Controller Called !!!';  
});  
  
scotchApp.controller('aboutController', function($scope) {  
    $scope.AboutMessage = 'About Controller Called !!!';  
});  
  
scotchApp.controller('contactController', function($scope) {  
    $scope.ContactMessage = 'Contact Controller Called !!!';  
});

<!DOCTYPE html>    
<!-- define angular app -->    
<html ng-app="RoutingApp">    
<head>    
    <!-- SPELLS -->    
   <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
   <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular-route.js"></script>
    <script src="script.js"></script>    
</head>    
    
<body ng-controller="mainController">    
    
    <nav class="navbar navbar-default">    
        <div class="container">    
            <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>    
        </div>    
    </nav>    
    
    <div id="main">    
        <!-- angular templating : This is where content will be injected -->    
        <div ng-view></div>    
    </div>    
</body>    
    
</html>

Answer 1

我猜你错过了ng-app指令。将其添加到您的HTML并尝试。

Answer 2

您需要将ng-app添加到您的html元素

<html ng-app="RoutingApp">
  ....
</html>

此外，您可以将Angular脚本引用移动到正文的底部，或者它们至少应包含在<head>标记中

Angular JS ng-view

2 个答案: