Угловые нг вид не показывает

var app = angular.module("myApp", ['ngRoute']); 
 

 
app.config(['$routeProvider', 
 
    function($routeProvider) { 
 
     $routeProvider.when('/', { 
 
      templateUrl: "views/table_products.html", 
 
       controller: "controller" 
 
     }) 
 
     .otherwise({ 
 
      redirectTo: '/' 
 
     }); 
 
    }]);

я понятия не имею, что это неправильно. В моем представлении ng нет table_products.html. Я правильно установил провайдера, правильные пути файлов, ng-view.

<!DOCTYPE html> 
 
<html lang="en"> 
 
<head> 
 
    <meta charset="UTF-8"> 
 
    <title>FIRST ANGULAR APP - TRAINING</title> 
 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> 
 
    <link rel="stylesheet" href="style.css"> 
 

 
</head> 
 
<body ng-app="myApp"> 
 
<script src="https://code.angularjs.org/1.2.28/angular-route.min.js"></script> 
 
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> 
 

 
     <div ng-view></div> 
 

 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
 
<script src="JS/app.js"></script> 
 
<script src="JS/controller/controller.js"></script> 
 
</body> 
 
</html> 
 

 
my app.js; 
 

 
<!-- begin snippet: js hide: false -->

и вот мой контроллер;

app.controller('controller', ['$scope', function($scope) { 
 
    $scope.products = [ 
 
     { 
 
      name: "Tomato", 
 
      calories: 10, 
 
      proteins: 20, 
 
      carbohydrates: 30, 
 
      fat: 40, 
 
      priceForKg: 3, 
 
      priceForOne: 0.6, 
 
      amount: 0 
 
     }, 
 
     { 
 
      name: "Cucumber", 
 
      calories: 10, 
 
      proteins: 80, 
 
      carbohydrates: 30, 
 
      fat: 40, 
 
      priceForKg: 3, 
 
      priceForOne: 0.6, 
 
      amount: 0 
 
     }, 
 
     { 
 
      name: "Corn", 
 
      calories: 10, 
 
      proteins: 60, 
 
      carbohydrates: 30, 
 
      fat: 40, 
 
      priceForKg: 3, 
 
      priceForOne: 0.6, 
 
      amount: 0 
 
     } 
 
    ]; 
 
    $scope.sumProtein = function() { 
 
     var sum = 0, 
 
      i; 
 
     for (i = 0 ; i < $scope.products.length ; i++) { 
 
      sum += ($scope.products[i].proteins * 0.01 * $scope.products[i].amount); 
 
     } 
 
     return sum.toFixed(0); 
 
    }; 
 
}]); 
 

 
and table_products.html

// AND HERE IS TABLE_PRODUCTS.HTML //  
 

 
<div ng-controller="controller"> 
 
<table> 
 
     <thead> 
 
     <tr> 
 
      <th> # </th> 
 
      <th> PRODUCT </th> 
 
      <th> CALORIES </th> 
 
      <th> PROTEINS </th> 
 
      <th> CARBOHYDRATES </th> 
 
      <th> FAT </th> 
 
      <th> PRICE FOR 1KG</th> 
 
      <th> PRICE FOR ONE ART</th> 
 
      <th> QUANTITY </th> 
 
     <tr> 
 
     </thead> 
 
     <tbody> 
 
     <tr ng-repeat="x in products"> 
 
      <td> {{ $index +1 }}</td> 
 
      <td> {{ x.name }}</td> 
 
      <td> {{ x.calories }}</td> 
 
      <td> {{ x.proteins }}</td> 
 
      <td> {{ x.carbohydrates }}</td> 
 
      <td> {{ x.fat }}</td> 
 
      <td> {{ x.priceForKg }}</td> 
 
      <td> {{ x.priceForOne }}</td> 
 
      <td> <input type="number" ng-model="x.amount"> </td> 
 
     </tr> 
 
     </tbody> 
 
    </table> 
 
    </div> 
 
<div> 
 
    <p> SUM: {{ sumProtein() }}</p> 
 
</div>

источник

2015-12-30 Tomasz Nast

Я думаю, что это, скорее всего, ошибка с заказом, в который вы загружаете свой javacscript. Убедитесь, что все дополнительные модули приходят после первоначального вызова для загрузки angular.min.js. Я также переместил бы весь ваш javascript в начало – bstockwell

Какая ошибка вы получаете в консоли браузера? – TheLazyChap

ошибки появляются в: –

найти здесь ваш фрагмент кода исправлен [Plunk Sample] (http://plnkr.co/edit/LBHN0u?p=preview)

эта ошибка была из-за модуля не был должным образом загружен из-за вашего сценария порядке загрузки.

Надеюсь, что эта помощь !!!

источник

2015-12-31 16:11:30 niku

Угловые нг вид не показывает

ответ

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