Question

我真的需要帮助ngRoute模块，因为无论我做什么 - 部分内容都没有得到更新。基本上这是我的文件夹结构：

https://gyazo.com/a5c7ce7e52687f525d8d1ffd718c9a5a

Index.html菜单：

<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="images/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>

这些是index.html包括：

<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>

这些是我配置routeProvider

的app.js的内容

'use strict';

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

我正在使用

<ng-view></ng-view>

取消部分，但似乎没有任何工作。我是Angular的新手，所以任何帮助或建议都将非常感谢!!!

以防万一有controllers.js ＆＃39;使用严格的＆＃39;;

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.invalidChannelSelection = true;
            console.log('incorrect');
        }
        else {
            $scope.invalidChannelSelection = false;
            $scope.feedback = {mychannel:"", firstName:"", lastName:"", agree:false, email:"" };
            $scope.feedback.mychannel="";
            $scope.feedbackForm.$setPristine();
            console.log($scope.feedback);
        }
    };
}])

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

    var dish= menuFactory.getDish(parseInt($routeParams.id,10));
    $scope.dish = dish;
}])

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

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

    $scope.submitComment = function () {



        //Step 2: This is how you record the date
        //"The date property of your JavaScript object holding the comment" = new Date().toISOString();
        var date = new Date().toISOString();
        $scope.customer_comments.date = date;
        console.log($scope.customer_comments);
        // Step 3: Push your comment into the dish's comment array
        //$scope.dish.comments.push("Your JavaScript Object holding the comment");
        $scope.customer_comments.rating = Number($scope.customer_comments.rating);
        $scope.dish.comments.push($scope.customer_comments);


        //Step 4: reset your form to pristine
        $scope.customer_comments = {name:"", number_of_stars:"", comment:"", date:""};
        $scope.commentForm.$setPristine();
        $scope.customer_comments.rating = 5;
        console.log($scope.customer_comments);


        //Step 5: reset your JavaScript object that holds your comment
    }
}])

Answer 1

好像你的app.js在错误的文件夹中。将它保存在脚本文件夹之外，即与html页面平行。

希望这有效!!

Answer 2

您在html代码中缺少 ng-app =“confusionApp”

Answer 3

我们不应该在每个地方初始化angualr.module（），因为它将替换之前的模块并创建一个新模块。

在这里，当您在app.js，controller.js（也可能在service.js中）创建模块时，您无法实现所需的功能。

而不是在app.js中只创建一次模块。并且在任何地方使用该变量，即在controller.js和service.js
中
Ex：var confusionApp = module（'confusionApp'，['ngRoute']）;并在需要的地方使用“confusionApp”变量！

希望这应该有用!!

Answer 4

我非常感谢快速反应和大力帮助！我发现了我犯的错误。在我的controllers.js中，我不应该包含＆＃39; []＆＃39;所以它不会创造一个新的moule但寻找现有的。所以：app.js - angular.module（＆＃39; confusionApp＆＃39;，[＆＃39; ngRoute＆＃39;]），services.js - angular.module（＆＃39; confusionApp＆＃39;）和控制器.js angular.module（＆＃39; confusionApp＆＃39;，[]）和controler.js应该是angular.module（＆＃39; confusionApp＆＃39;）！这样我们就可以在app.js中创建模块，然后在服务和控制器上使用它。谢谢大家

angular.js ngRoute模块未刷新视图

4 个答案: