个人中心
gpt4 book ai didi

javascript - ng-view 在 Angular 中不起作用

转载 作者：行者123 更新时间：2023-12-02 14:30:36 25 4
gpt4 key购买 nike

我正在使用 Angular 和 Bootstrap 开发单页应用程序。但 ng-view 没有附加到index.html

index.html:

<!DOCTYPE html>
<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">

    <title>Ristorante Con Fusion</title>    

    <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="styles/bootstrap-social.css" rel="stylesheet">
    <link href="styles/mystyles.css" rel="stylesheet">
<!-- endbuild -->

       </head>

<body>

    <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>
        </div>
    </header>

    <ng-view></ng-view>
    <footer class="row-footer">

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

这是我的 app.js

'use strict';

angular.module('confusionApp', ['ngRoute']){

    .config(function($routeProvider){
        $routeProvider

        .when('/contactUs',{
            templateUrl:'contactUs.html'
            controller :'ContactController'
        })

        .when('/menu',{
             templateUrl:'menu.html'
            controller :'MenuController'
        })

       .when('/menu/:id',{
         templateUrl:'dishdetail.html'
        controller :'DishDetailController'
        })

        .otherwise('/contactUs');

    })

};

这是我的controller.js

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

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

        }])

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

            //Step 1: Create a JavaScript object to hold the comment from the form

            $scope.isSelected=function(checkStar){
                console.log(checkStar==5);
                return checkStar==5;
            };

            $scope.stars=stars;

            $scope.comment={name:"",rating:"5",textComments:"",date:""};

        }])

这是我的 service.js

'use strict';

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

           var dishes=[
                         {
                          _id=0,


                           comments: [
                               {
                                   rating:5,
                                   comment:"Imagine all the eatables, living in conFusion!",
                                   author:"John Lemon",
                                   date:"2012-10-16T17:57:28.556094Z"
                               },

                                                                          ]
                        },
                        {
                             _id=1,
                                                                                    comments: [
                                                                 {
                                   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: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中我给出了 将我的代码附加到同一个

最佳答案

可能的原因是您的配置中的 templateUrl 和 Controller 之间没有逗号。即 templateUrl:'contactUs.html', Controller :'ContactController'

关于javascript - ng-view 在 Angular 中不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37868207/

25 4 0
文章推荐： javascript - 编写可移植的js上传代码(JS代码在桌面上有效，在移动设备上失败)
文章推荐： grails - Grails 3功能测试
文章推荐： git - 尽管身份验证成功，但无法克隆 repo
文章推荐： javascript - 使用 Angular 搜索 JSON
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com