ngView 不呈现模板

Question

当我运行在各种浏览器或使用节点的本地主机上时，我无法在我的 angular 应用程序的 ng-view 中呈现模板。控制台没有抛出任何错误。我已经阅读了我可以在网上找到的有关此问题的所有内容，但其中 none 是我问题的答案。我正在使用带有 El Capitan OS 的 macbook pro。我想知道在过去的一年里，作为一名初学者编码员，我是否对我的计算机做了一些有趣的事情，通过 sudo 安装东西和运行在没有虚拟环境的情况下安装东西。或者也许这里有一些愚蠢的明显错误，我在尝试我能想到的每一种排列时都忽略了。

这是我的 index.html 文件：

   <!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="UTF-8">
    <title>My App</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="stylesheet.css">

</head>

<body ng-app="OIApp">
     <nav id="mainnav" class="navbar navbar-inverse navbar-fixed-top">

        <div class="container"> 

            <div class="navbar-header">

            <a class="navbar-brand" href="#">
                <h1>My App</h1>
            </a>

            </div> 
            <ul class="nav navbar-nav navbar-right">

                <li class="active">
                    <a href="#/">Home</a>
                </li>
                <li>
                    <a href="#/about">About</a>
                </li>
                <li>
                    <a href="#/blog">Blog</a>
                </li>
                <li>
                    <a href="#/products">Products</a>
                </li>

            </ul>
        </div>
    </nav> 

        <div ng-controller="OIController1">
            <div ng-view>

            </div>

        </div>



    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular-route.min.js"></script>
    <script src="OIController.js"></script>
    <script src="OIApp.js"></script>
    <script src="config.js"></script>
    <script src="http://code.jquery.com/jquery.min.js"></script>
    <script src="bootstrap/js/bootstrap.min.js"></script>
</body>
</html>

App.js 看起来像这样：

var app = angular.module("OIApp", ["ngRoute", "myControllers"])

Controller.js是这样的：

   angular.module('myControllers', [])

.controller('OIController1', function($scope, $route) {
    $scope.names = [
        {name:"Colin Wilson", blurb: "Commodities are usually raw materials such as metals and agricultural products, but a commodity can also..."},
        {name:"Graham Hancock", blurb:"Commodities are usually raw materials such as metals and agricultural products, but a commodity can also..."},
        {name:"John Moriarty", blurb:"Commodities are usually raw materials such as metals and agricultural products, but a commodity can also ..."},
        {name:"William Thompson", blurb:"Commodities are usually raw materials such as metals and agricultural products, but a commodity can also..."} 
        ];

    });

Config.js:

    angular.module('myRoutes', ['ngRoute', 'myControllers'])

.config('$routeProvider', function($routeProvider) {
    $routeProvider
    .when("/", {
        templateUrl : "/index.html",
        controller : "OIController1",
    })

    .when("/about", {
        templateUrl : "/about.html",
        controller : "OIController1"
    })

    .otherwise({
      redirectTo:'/'
    });

});

这是我要在 ngView 中呈现的 about.html：

<div class="col-sm-2" ng-repeat="x in names">
    {{x.name}}
    {{x.blurb}}
</div>

Answer 1

有几个问题：

    //------------------------------------
    //Let say, it's a app.router.js
    //------------------------------------
     angular.module('myRoutes', ['ngRoute', 'myControllers'])
    .config(['$routeProvider', function($routeProvider) {
        $routeProvider
        .when("/", {
            templateUrl : "index.html",
            controller : "OIController1",
        })

        .when("/about", {
            templateUrl : "about.html",
            controller : "OIController1"
        })

        .otherwise({
          redirectTo:'/'
        });

    }]);

    //------------------------------------
    //Let say, it's a app.module.js
    //------------------------------------

    angular.module("OIApp", ["ngRoute", "myRoutes", "myControllers"]);

//------------------------------------
//Let say, it's a app.controller.js
//------------------------------------        

    angular.module('myControllers', [])
    .controller('OIController1', function($scope) {
        $scope.names = [
            {name:"Colin Wilson", blurb: "Commodities are usually raw materials such as metals and agricultural products, but a commodity can also..."},
            {name:"Graham Hancock", blurb:"Commodities are usually raw materials such as metals and agricultural products, but a commodity can also..."},
            {name:"John Moriarty", blurb:"Commodities are usually raw materials such as metals and agricultural products, but a commodity can also ..."},
            {name:"William Thompson", blurb:"Commodities are usually raw materials such as metals and agricultural products, but a commodity can also..."} 
            ];
        });

我希望这能奏效

Answer 2

您有语法错误，route provider 中缺少 []。

Pls run the below snippet.

// Code goes here

var app = angular.module("OIApp", ["ngRoute", "myControllers"]);
  
  app.config(['$routeProvider', function($routeProvider) {
    $routeProvider
    .when("/", {
        
    })

    .when("/about", {
        templateUrl : "about.html",
        controller : "OIController1"
    })

    .otherwise({
      redirectTo:'/'
    });

}]);

var test = angular.module('myControllers', [])
test.controller('OIController1', function($scope, $route) {
    $scope.names = [
        {name:"Colin Wilson", blurb: "Commodities are usually raw materials such as metals and agricultural products, but a commodity can also..."},
        {name:"Graham Hancock", blurb:"Commodities are usually raw materials such as metals and agricultural products, but a commodity can also..."},
        {name:"John Moriarty", blurb:"Commodities are usually raw materials such as metals and agricultural products, but a commodity can also ..."},
        {name:"William Thompson", blurb:"Commodities are usually raw materials such as metals and agricultural products, but a commodity can also..."} 
        ];

    });

<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="UTF-8">
    <title>My App</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="stylesheet.css">

</head>

<body ng-app="OIApp">
  
  <script type="text/ng-template" id="about.html">
  <div class="col-sm-2" ng-repeat="x in names">
    {{x.name}}
    {{x.blurb}}
</div>
</script>
  
  <script>
  
  



  
</script>


     <nav id="mainnav" class="navbar navbar-inverse navbar-fixed-top">

        <div class="container"> 

            <div class="navbar-header">

            <a class="navbar-brand" href="#">
                <h1>My App</h1>
            </a>

            </div> 
            <ul class="nav navbar-nav navbar-right">

                <li class="active">
                    <a href="#/">Home</a>
                </li>
                <li>
                    <a href="#/about">About</a>
                </li>
                <li>
                    <a href="#/blog">Blog</a>
                </li>
                <li>
                    <a href="#/products">Products</a>
                </li>

            </ul>
        </div>
    </nav> 

        <div ng-controller="OIController1">
            <div ng-view>

            </div>

        </div>



    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular-route.min.js"></script>
    
    <script src="http://code.jquery.com/jquery.min.js"></script>
    <script src="bootstrap/js/bootstrap.min.js"></script>
    <script src="script.js"></script>
</body>

</html>

HEre is the plunker

ngView 不呈现模板

ngView is not rendering templates

javascript

angularjs

ng-view