Question

我一直在学习angular.js一周，我正在尝试做一个练习项目。当我看到HTML代码时＆lt; div ng-view＆gt;部分被视为只是＆lt; ！ - ngView： - ＆gt;

以下是我的文件

应用程序/ index.html的

<html data-ng-app="RhythmicWorks">
<head>
    <title>RhytmicWorks Software</title>
    <link rel="stylesheet" href="css/app.css">
     <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Lobster" />
    <script src="bower_components/jquery/jquery.js"></script>
    <script src="bower_components/angular/angular.js"></script>
    <script src="bower_components/angular-route/angular-route.js"></script>
    <script src="bower_components/angular-resource/angular-resource.js"></script>
        <script type="text/javascript" src="jquery.videoBG/jquery.videoBG.js"></script>
    <script src="js/videobg.js"></script>

    <script src="js/app.js"></script>
    <script src="js/controllers.js"></script>

  <script src="js/services.js"></script>


</head>
<body>

    <!-- The following div includes the logo as well as the nav bar -->
    <div data-ng-controller="common" class="common">

        <div class="mainLogo">{{mainLogo}}</div>
      <nav>
            <ul class="fancyNav">
                <li data-ng-repeat="item in navBarItems" id="{{item.id}}">
                    <a href="{{item.href}}">{{item.name}}</a>

                </li>

            </ul>
       </nav>
     </div>
    <div class="content" data-ng-view></div>
</body>
</html>

应用程序/ JS / controllers.js

'use strict'

var RhythmicWorksControllers = angular.module('RhythmicWorksControllers',[]);

RhythmicWorksControllers.controller('common',['$scope','navBarData',function($scope,navBarData){

    //$scope.navBarItems = navBarData.query();
    $scope.navBarItems = [{
        "name":"Home",
        "href":"#/home",
        "id":"home"

    },
    {

        "name":"News",
        "href":"#/news",
        "id":"news"

    },
    {

        "name":"About us",
        "href":"#/about",
        "id":"about"

    },
    {

        "name":"Services",
        "href":"#/services",
        "id":"services"

    },
    {

        "name":"Contact us",
        "href":"#/contact",
        "id":"contact"

    }];
    //Main logo text. Can be replaced with a link to the logo

    $scope.mainLogo = "RhythmicWorks";

}]);

RhythmicWorksControllers.controller('homeCtrl', ['$scope', function($scope){

    $scope.home = "This is home page";

}]);

RhythmicWorksControllers.controller('newsCtrl', ['$scope', function($scope){

    $scope.news = "news page";

}]);

RhythmicWorksControllers.controller('contactCtrl', ['$scope', function($scope){

    $scope.home = "contact page";

}]);

RhythmicWorksControllers.controller('aboutCtrl', ['$scope', function($scope){


    $scope.home = "This is about page";

}]);

RhythmicWorksControllers.controller('servicesCtrl', ['$scope', function($scope){

    $scope.home = "This is services page";

}]);

应用程序/ JS / app.js

var RhythmicWorks = angular.module('RhythmicWorks',['ngRoute','RhythmicWorksControllers','RhythmicWorksServices']);


RhythmicWorks.config(['$routeProvider',
    function($routeProvider){
        $routeProvider.
            when('/home',{
                templateUrl: 'partials/home.html',
                controller: 'homeCtrl'

            }).
            when('/news',{
                templateUrl: 'partials/news.html',
                controller: 'newsCtrl'
            }).
            when('/about',{
                templateUrl: 'partials/about.html',
                controller: 'aboutCtrl'
            }).
            when('/services',{
                templateUrl: 'partials/services.html',
                controller: 'servicesCtrl'
            }).
            when('/contact',{
                templateUrl: 'partials/contact.html',
                controller: 'contactCtrl'
            }).
            otherwise({
                redirectTo: '/home'

            });

    }]);

当我点击导航栏中的链接时，网址会发生变化。如果我检查HTML代码，该部分被视为

注意：如果我将templateUrl更改为只是模板：，它可以正常工作。

我无法理解templateUrl无法正常工作的原因。部分目录中存在正确的部分html文件，其中包含一些随机文本。

Answer 1

我试图在后台播放视频。一旦我评论这个，它就有效了

ng-view无法正常工作

1 个答案: