Question

我正在使用AngularJS 1.6，但路由似乎有问题，其中未注册Controller，尽管似乎没有问题。尝试了不同的解决方案，但没有帮助。

products.html

<div ng-controller="ProductController">
    <div class="container">
         <div class="row">
            <div class="item col-sm-6 col-md-4 col-lg-3" ng-repeat="product in products">
                <h3>{{product.title}}</h3>
                <img class="product-photo" src="{{product.photoURL}}" alt="">
                <p>{{product.price}}</p>
                <button class="btn btn-cart" (click)="onAddToCart()">Add to cart</button>
            </div> 
        </div>
     </div>
</div>

控制器

ProductController.js

 var testApp = angular.module('testApp');
 testApp.controller('ProductController',function ProductController($scope,$http) {
    $scope.products = [
       { id:1, title: 'Margarita', photoURL:'...',price:'260 UAH'},
       { id:2, title: 'Margarita', photoURL:'...', price:'240 UAH'},
       { id:3, title: 'Margarita', photoURL:'...', price:'200 UAH'},
       { id:4, title: 'Margarita', photoURL:'...', price:'190 UAH'}
    ]; 
});

路由

app-routing.js

var questApp = angular.module('testApp', ["ngRoute"])
    .config(function($routeProvider){
        $routeProvider.when('/products',
        {
            templateUrl:'./views/products.html',
            controller:'ProductController'
        });
        $routeProvider.when('/cart',
        {
            templateUrl:'./views/cart.html',
            controller:'CartController'
        });
        $routeProvider.otherwise({redirectTo: '/products'});
});

index.html

<!doctype html>
<html ng-app="testApp">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<link href="https://fonts.googleapis.com/css?family=Bungee+Inline|Cabin+Sketch|Fredericka+the+Great|Love+Ya+Like+A+Sister|Rancho|Roboto" rel="stylesheet">
</head>
<body>
<nav><a href="#!/products">Products</a>|<a href="#!/cart">Cart</a></nav>
<ng-view></ng-view>
<script src="https://code.angularjs.org/1.6.0/angular.min.js"></script>
<script src="https://code.angularjs.org/1.6.0/angular-route.min.js"></script>
<script src="./js/ProductController.js"></script>
<script src="./js/CartController.js"></script>
<script src="./js/app-routing.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</body>
</html>

Answer 1

在其他两个控制器之前加载 app-routing.js

<script src="./js/app-routing.js"></script>
<script src="./js/ProductController.js"></script>
<script src="./js/CartController.js"></script>

，您不必在控制器内部再次声明模块，

 var testApp = angular.module('testApp'); //remove this line
 testApp.controller('ProductController',function ProductController($scope,$http) {
    $scope.products = [
       { id:1, title: 'Margarita', photoURL:'...',price:'260 UAH'},
       { id:2, title: 'Margarita', photoURL:'...', price:'240 UAH'},
       { id:3, title: 'Margarita', photoURL:'...', price:'200 UAH'},
       { id:4, title: 'Margarita', photoURL:'...', price:'190 UAH'}
    ]; 
});

名称为“ ..”的控制器未注册

1 个答案: