Angular ng-view 或 ng-include 不工作

Angular ng-view or ng-include not working

我一直在 Coursera 上学习全栈 web 开发的一门课程(预览版),并且在使用 ng-view 和 ng-controller 时遇到了一些麻烦。

我打开我的网站时没有收到任何错误,但 ng-view 或 ng-controller 似乎没有改变我网站上的视图。

这是我的索引页:

<html lang="en" ng-app="confusionApp">
    <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head 
         content must come *after* these tags -->

    <title>Ristorante Con Fusion</title>    
        <!-- Bootstrap -->
    <!-- build:css styles/main.css -->
    <link href="bower_components/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="bower_components/bootstrap/dist/css/bootstrap-theme.min.css" rel="stylesheet">
    <link href="bower_components/font-awesome/css/font-awesome.min.css" rel="stylesheet">
    <link href="css/bootstrap-social.css" rel="stylesheet">
    <link href="css/mystyles.css" rel="stylesheet">
<!-- endbuild -->
    <body>
     <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#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="#/"><img src="img/logo.png" height=30 width=41></a>
            </div>
            <div id="navbar" class="navbar-collapse collapse">
                <ul class="nav navbar-nav">
                    <li class="active"><a href="#/">
                        <span class="glyphicon glyphicon-home"
                         aria-hidden="true"></span> Home</a></li>
                    <li><a href="#/aboutus">
                        <span class="glyphicon glyphicon-info-sign"
                         aria-hidden="true"></span> About</a></li>
                    <li><a href="#/menu">
                         <span class="glyphicon glyphicon-list-alt"
                         aria-hidden="true"></span> 
                         Menu</a></li>
                     <li><a href="#/contactus">
                     <i class="fa fa-envelope-o"></i> Contact</a></li>
                </ul>
            </div>
        </div>
    </nav>         

    <header class="jumbotron">

        <!-- Main component for a primary marketing message or call to action -->

        <div class="container">
            <div class="row row-header">
                <div class="col-xs-12 col-sm-8">
                    <h1>Ristorante con Fusion</h1>
                    <p style="padding:40px;"></p>
                    <p>We take inspiration from the World's best cuisines, and create
                     a unique fusion experience. Our lipsmacking creations will 
                     tickle your culinary senses!</p>
                </div>
                <div class="col-xs-12 col-sm-2">
                <p style="padding:20px;"></p>
                <img src="img/logo.png" class="img-responsive">
                </div>
                <div class="col-xs-12 col-sm-2">
                </div>
            </div>
        </div>
    </header>

    <div ng-view></div>

    <footer class="row-footer">
        <div class="container">
            <div class="row">             
                <div class="col-xs-5 col-xs-offset-1 col-sm-2 col-sm-offset-1">
                    <h5>Links</h5>
                    <ul class="list-unstyled">
                        <li><a href="#">Home</a></li>
                        <li><a href="#">About</a></li>
                        <li><a href="#">Menu</a></li>
                        <li><a href="#">Contact</a></li>
                    </ul>
                </div>
                <div class="col-xs-6 col-sm-5">
                    <h5>Our Address</h5>
                    <address>
                      121, Clear Water Bay Road<br>
                      Clear Water Bay, Kowloon<br>
                      HONG KONG<br>
                      <i class="fa fa-phone"></i>: +852 1234 5678<br>
                      <i class="fa fa-fax"></i>: +852 8765 4321<br>
                      <i class="fa fa-envelope"></i>: 
                         <a href="mailto:confusion@food.net">
                         confusion@food.net</a>
                    </address>
                </div>
                <div class="col-xs-12 col-sm-4">
                    <div class="nav navbar-nav" style="padding: 40px 10px;">
                        <a class="btn btn-social-icon btn-google-plus" href="http://google.com/+"><i class="fa fa-google-plus"></i></a>
                        <a class="btn btn-social-icon btn-facebook" href="http://www.facebook.com/profile.php?id="><i class="fa fa-facebook"></i></a>
                        <a class="btn btn-social-icon btn-linkedin" href="http://www.linkedin.com/in/"><i class="fa fa-linkedin"></i></a>
                        <a class="btn btn-social-icon btn-twitter" href="http://twitter.com/"><i class="fa fa-twitter"></i></a>
                        <a class="btn btn-social-icon btn-youtube" href="http://youtube.com/"><i class="fa fa-youtube"></i></a>
                        <a class="btn btn-social-icon" href="mailto:"><i class="fa fa-envelope-o"></i></a>
                    </div>
                </div>
                <div class="col-xs-12">
                    <p style="padding:10px;"></p>
                    <p align=center>© Copyright 2015 Ristorante Con Fusion</p>
                </div>
            </div>
        </div>
    </footer>

<!-- build:js scripts/main.js -->
    <script src="bower_components/angular/angular.min.js"></script>
    <script src="bower_components/angular-route/angular-route.min.js"></script>
    <script src="scripts/app.js"></script>
    <script src="scripts/controllers.js"></script>
    <script src="scripts/services.js"></script>
<!-- endbuild -->

</body>

</html>

我想要 ng-view 显示的视图示例 (menuTemplate.html):

<div class="container">
    <div class="row row-content" ng-controller="MenuController">
        <div class="col-xs-12">
            <button ng-click="toggleDetails()" class="btn btn-xs btn-primary pull-right" type="button">
                {{showDetails ? 'Hide Details':'Show Details'}}
            </button>  
             <ul class="nav nav-tabs" role="tablist">
                <li role="presentation"
                 ng-class="{active:isSelected(1)}">
                <a ng-click="select(1)"
                 aria-controls="all menu"
                 role="tab">The Menu</a></li>
                <li role="presentation"
                 ng-class="{active:isSelected(2)}">
                <a ng-click="select(2)"
                 aria-controls="appetizers"
                 role="tab">Appetizers</a></li>
                <li role="presentation"
                 ng-class="{active:isSelected(3)}">
                <a ng-click="select(3)"
                 aria-controls="mains"
                 role="tab">Mains</a></li>
                <li role="presentation"
                 ng-class="{active:isSelected(4)}">
                <a  ng-click="select(4)"
                 aria-controls="desserts"
                 role="tab">Desserts</a></li>
            </ul>

            <div class="tab-content">

                <ul class="media-list tab-pane fade in active">
                    <li class="media" ng-repeat="dish in dishes | filter:filtText">
                        <div class="media-left media-middle">
                            <a href="#">
                            <img class="media-object img-thumbnail"
                             ng-src={{dish.image}} alt="Uthappizza">
                            </a>
                        </div>
                        <div class="media-body">
                            <h2 class="media-heading">{{dish.name}}
                             <span class="label label-danger">{{dish.label}}</span>
                             <span class="badge">{{dish.price | currency}}</span></h2>
                             <p ng-show="showDetails">{{dish.description}}</p>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</div>

app.js 文件:

'use strict';

angular.module('confusionApp',['ngRoute'])
.config(function($routeProvider) {
        $routeProvider
            // route for the contactus page
            .when('/contactus', {
                templateUrl : 'contactusTemplate.html',
                controller  : 'ContactController'
            })
            // route for the menu page
            .when('/menu', {
                templateUrl : 'menuTemplate.html',
                controller  : 'MenuController'
            })
            // route for the dish details page
            .when('/menu/:id', {
                templateUrl : 'dishdetail.html',
                controller  : 'DishDetailController'
            })
            .otherwise('/contactus');
    })
;

controllers.js:

'use strict';

angular.module('confusionApp')
            .controller('MenuController', ['$scope', 'menuFactory', function($scope, menuFactory){

              $scope.tab = 1;
              $scope.filtText = "";
              $scope.showDetails = false;

              $scope.dishes = menuFactory.getDishes();

            $scope.select=function(setTab){
                $scope.tab=setTab;

                if (setTab === 2){
                    $scope.filtText = "appetizer";
                }
                else if (setTab === 3){
                    $scope.filtText = "mains";
                }
                else if (setTab === 4) {
                    $scope.filtText = "dessert";
                }
                else{
                    $scope.filtText = "";
                }
            };

            $scope.isSelected = function(checkTab){
                return ($scope.tab === checkTab);
            };
            $scope.toggleDetails = function() {
                $scope.showDetails = !$scope.showDetails;
            };
          }])

        .controller('ContactController', ['$scope', function($scope) {

            $scope.feedback = {mychannel:"", firstName:"", lastName:"",
                               agree:false, email:"" };

            var channels = [{value:"tel", label:"Tel."}, {value:"Email",label:"Email"}];

            $scope.channels = channels;
            $scope.invalidChannelSelection = false;
        }])

        .controller('FeedbackController', ['$scope', function($scope) {

          $scope.sendFeedback = function() {
                                console.log($scope.feedback);
                                if ($scope.feedback.agree && ($scope.feedback.mychannel == "")&& !$scope.feedback.mychannel) {
                                  $scope.invalidChannelSelection = true;
                                  console.log('incorrect');
                                }
                                else {
                                  $scope.invalidChannelSelection = false;
                                  //after saving the form to the database, clear it
                                  $scope.feedback = {mychannel:"", firstName:"", lastName:"",
                                                     agree:false, email:"" };
                                  $scope.feedback.mychannel="";

                                  $scope.feedbackForm.$setPristine();
                                  console.log($scope.feedback);
                                }
                              }


        }])

        .controller('DishDetailController', ['$scope', 'menuFactory', function($scope, menuFactory) {


            var dish= menuFactory.getDish(3);

            $scope.dish = dish;            
        }])

        .controller('DishCommentController', ['$scope', function($scope) {

            //Step 1: Create a JavaScript object to hold the comment from the form
            $scope.commentData = {rating:5, comment:"", author:"", date:""};


            $scope.submitComment = function () {

                //Step 2: This is how you record the date
                $scope.commentData.date = new Date().toISOString();

                // Step 3: Push your comment into the dish's comment array
                $scope.dish.comments.push($scope.commentData);

                //Step 4: reset your form to pristine
                $scope.commentForm.$setPristine();

                //Step 5: reset your JavaScript object that holds your comment
                $scope.commentData = {rating:5, comment:"", author:"", date:""};

            }
        }])

;

services.js:

'use strict'

angular.module('confusionApp')
    .service('menuFactory', function(){

            var dishes =[
                        {
                           _id:0,
                           name:'Uthapizza',
                           image: 'img/uthapizza.png',
                           category: 'mains',
                           label:'Hot',
                           price:'4.99',
                           description:'A unique combination of Indian Uthappam (pancake) and Italian pizza, topped with Cerignola olives, ripe vine cherry tomatoes, Vidalia onion, Guntur chillies and Buffalo Paneer.',
                           comments: [
                               {
                                   rating:5,
                                   comment:"Imagine all the eatables, living in conFusion!",
                                   author:"John Lemon",
                                   date:"2012-10-16T17:57:28.556094Z"
                               },
                               {
                                   rating:4,
                                   comment:"Sends anyone to heaven, I wish I could get my mother-in-law to eat it!",
                                   author:"Paul McVites",
                                   date:"2014-09-05T17:57:28.556094Z"
                               },
                               {
                                   rating:3,
                                   comment:"Eat it, just eat it!",
                                   author:"Michael Jaikishan",
                                   date:"2015-02-13T17:57:28.556094Z"
                               },
                               {
                                   rating:4,
                                   comment:"Ultimate, Reaching for the stars!",
                                   author:"Ringo Starry",
                                   date:"2013-12-02T17:57:28.556094Z"
                               },
                               {
                                   rating:2,
                                   comment:"It's your birthday, we're gonna party!",
                                   author:"25 Cent",
                                   date:"2011-12-02T17:57:28.556094Z"
                               }

                           ]
                        },
                        {
                           _id:1,
                           name:'Zucchipakoda',
                           image: 'img/zucchipakoda.png',
                           category: 'appetizer',
                           label:'',
                           price:'1.99',
                           description:'Deep fried Zucchini coated with mildly spiced Chickpea flour batter accompanied with a sweet-tangy tamarind sauce',
                           comments: [
                               {
                                   rating:5,
                                   comment:"Imagine all the eatables, living in conFusion!",
                                   author:"John Lemon",
                                   date:"2012-10-16T17:57:28.556094Z"
                               },
                               {
                                   rating:4,
                                   comment:"Sends anyone to heaven, I wish I could get my mother-in-law to eat it!",
                                   author:"Paul McVites",
                                   date:"2014-09-05T17:57:28.556094Z"
                               },
                               {
                                   rating:3,
                                   comment:"Eat it, just eat it!",
                                   author:"Michael Jaikishan",
                                   date:"2015-02-13T17:57:28.556094Z"
                               },
                               {
                                   rating:4,
                                   comment:"Ultimate, Reaching for the stars!",
                                   author:"Ringo Starry",
                                   date:"2013-12-02T17:57:28.556094Z"
                               },
                               {
                                   rating:2,
                                   comment:"It's your birthday, we're gonna party!",
                                   author:"25 Cent",
                                   date:"2011-12-02T17:57:28.556094Z"
                               }

                           ]
                        },
                        {
                           _id:2,
                           name:'Vadonut',
                           image: 'img/vadonut.png',
                           category: 'appetizer',
                           label:'New',
                           price:'1.99',
                           description:'A quintessential ConFusion experience, is it a vada or is it a donut?',
                           comments: [
                               {
                                   rating:5,
                                   comment:"Imagine all the eatables, living in conFusion!",
                                   author:"John Lemon",
                                   date:"2012-10-16T17:57:28.556094Z"
                               },
                               {
                                   rating:4,
                                   comment:"Sends anyone to heaven, I wish I could get my mother-in-law to eat it!",
                                   author:"Paul McVites",
                                   date:"2014-09-05T17:57:28.556094Z"
                               },
                               {
                                   rating:3,
                                   comment:"Eat it, just eat it!",
                                   author:"Michael Jaikishan",
                                   date:"2015-02-13T17:57:28.556094Z"
                               },
                               {
                                   rating:4,
                                   comment:"Ultimate, Reaching for the stars!",
                                   author:"Ringo Starry",
                                   date:"2013-12-02T17:57:28.556094Z"
                               },
                               {
                                   rating:2,
                                   comment:"It's your birthday, we're gonna party!",
                                   author:"25 Cent",
                                   date:"2011-12-02T17:57:28.556094Z"
                               }

                           ]
                        },
                        {
                           _id:3,
                           name:'ElaiCheese Cake',
                           image: 'img/elaicheesecake.png',
                           category: 'dessert',
                           label:'',
                           price:'2.99',
                           description:'A delectable, semi-sweet New York Style Cheese Cake, with Graham cracker crust and spiced with Indian cardamoms',
                           comments: [
                               {
                                   rating:5,
                                   comment:"Imagine all the eatables, living in conFusion!",
                                   author:"John Lemon",
                                   date:"2012-10-16T17:57:28.556094Z"
                               },
                               {
                                   rating:4,
                                   comment:"Sends anyone to heaven, I wish I could get my mother-in-law to eat it!",
                                   author:"Paul McVites",
                                   date:"2014-09-05T17:57:28.556094Z"
                               },
                               {
                                   rating:3,
                                   comment:"Eat it, just eat it!",
                                   author:"Michael Jaikishan",
                                   date:"2015-02-13T17:57:28.556094Z"
                               },
                               {
                                   rating:4,
                                   comment:"Ultimate, Reaching for the stars!",
                                   author:"Ringo Starry",
                                   date:"2013-12-02T17:57:28.556094Z"
                               },
                               {
                                   rating:2,
                                   comment:"It's your birthday, we're gonna party!",
                                   author:"25 Cent",
                                   date:"2011-12-02T17:57:28.556094Z"
                               }

                           ]
                        }
                    ];


              this.getDishes = function(){
                return dishes;
              };

              this.getDish = function(index){
                  return dishes[index];
              };

    })

;

过去一周我一直被困在这里。非常感谢您的帮助!

您如何访问该网站?

您是否在 index.html 位置旁边添加了井号“#”?

我的意思是,如果您 运行 在本地主机上的一个文件夹中:

http://localhost/folder/#/contactus ?

记住 AngularJS 使用散列来检测路由。

你没有提到angular的版本。 angular最新版本需要#!在 URL 的下半部分之前,而不仅仅是 #

所以,

<a href="#/aboutus"> About</a>

行不通。您必须将其更改为

<a href="#!/aboutus"> About</a>

它会起作用。