不顯示角度ng-view
[英]Angular ng-view not displaying
問題描述
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。 我正確設置了provider，文件的路徑是正確的，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>
1 個解決方案
解決方案1
0 2015-12-31 16:11:30
在此處找到已更正的代碼段[Plunk示例] (http://plnkr.co/edit/LBHN0u?p=preview)
此錯誤是由於腳本加載順序導致模塊未正確加載所致。
希望這個幫助！！！
Angular 的 ng-view 路由不顯示（injector modulerr 錯誤）
[英]Angular's ng-view routing not displaying (injector modulerr error)
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.