ngView не является шаблоном рендеринга

Я не могу отображать шаблоны в ng-view в моем угловом приложении, когда я запускаю его в разных браузерах или на локальном хосте с помощью узла. Консоль не бросает никаких ошибок. Я прочитал все, что могу найти в Интернете по этой проблеме, но ни один из них не является ответом на мою проблему. Я использую macbook pro с ОС El Capitan. Мне интересно, сделал ли я что-то смешное для своего компьютера в прошлом году как кодер для начинающих, используя sudo, устанавливая вещи и запуская без виртуальной среды. Или, может быть, здесь есть какая-то глупо очевидная ошибка, которую я забыл при попытке каждой перестановки, о которой я могу думать.ngView не является шаблоном рендеринга

Это мой файл 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:'/' 
    }); 

});

И это about.html, который я пытаюсь сделать в ngView:

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

источник

2016-10-18 John Tangney

Попытка удалить '/' из templateUrl. т. е. templateUrl: 'about.html', templateUrl: 'index.html' –

Пробовал это, но это, похоже, не проблема. –

Вы также можете запустить мой ответ, используя приведенный ниже фрагмент, или щелкнуть ссылку на плункер, вы получите решение. – Sravan

Есть несколько вопросов:

//------------------------------------ 
    //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..."} 
      ]; 
     });

Я надеюсь, что это должно работать

источник

2016-10-18 08:53:43

Спасибо, но все еще получаю эту ошибку: angular.js: 4640Uncaught Error: [$ injector: modulerr] http://errors.angularjs.org/1.5.8/$injector/modulerr?p0=OIApp&p1=Error%3A%2... udflare.com% 2Fajax% 2Flibs% 2Fangular.js% 2F1.5.8% 2Fangular.min.js% 3A20% 3A390) –

Эй, у вас был правильный ответ в вашей отредактированной версии, я вижу. Спасибо за вашу помощь. –

Ваш прием :) –

У вас есть синтаксис ошибка, [] отсутствует в 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

источник

2016-10-18 09:22:21 Sravan

Откройте плункер и перейдите по ссылкам 'index' и' about'. – Sravan

@John Tangney, вы пробовали это? – Sravan

Я тебя люблю !!! Вот и все. –

ngView не является шаблоном рендеринга

ответ

Смежные вопросы