Question

我有一个情况。我目前正在使用angular-route测试angularjs路由能力。但是，当我从index.html中取出HTML代码段并将其放在一个视图文件夹中并从路径提供者调用它时，它似乎无法工作。我已经检查了我的控制台但没有错误。我在MAMP为我的网络服务器工作。

我的NET标签 enter image description here

我的控制台 enter image description here

这是我的index.html

<!DOCTYPE html>
<html lang="en" data-ng-app="customersApp">
<head>
    <meta charset="UTF-8">
    <title>Weather</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=0, minimal-ui">
    <!--[if lt IE 8]>
    <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
    <![endif]-->
    <!--[if lt IE 9]>
    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->

    <link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
    <link href='http://fonts.googleapis.com/css?family=Open+Sans:400italic,400,600,700,800,300' rel='stylesheet' type='text/css'>

</head>
<body>

    <div ng-view></div>

    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0/angular.min.js"></script>
    <script src="scripts/angular-route.js"></script>
    <script src="app/app.js"></script>
    <script src="app/controllers/customersController.js"></script>
</body>
</html>

这是我的app.js

(function(){

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

    app.config(function($routeProvider) {
        $routeProvider
            .when('/',{
                controller: 'CustomersController',
                templateUrl: 'app/views/customers.html'
            })
            .otherwise({redirectTo: '/'});
    });

}());

最后我的customersController.js

(function(){
    var CustomersController = function ($scope){
        $scope.sortBy = 'name';
        $scope.reverse = false;
        $scope.customers = [
            {
                joined: "2004-12-24", 
                name: "Charles", 
                city: "Fairfax", 
                orderTotal: "124.45"
            },
            {
                joined: "2023-09-12", 
                name: "Donte", 
                city: "Altamonte Springs", 
                orderTotal: "5.9943"
            },
            {
                joined: "2013-01-25", 
                name: "Jelon", 
                city: "Waldorf", 
                orderTotal: "100"
            }
        ],
        $scope.doSort = function(propName){
            $scope.sortBy = propName;
            $scope.reverse = !$scope.reverse;
        };
    };
    angular.module("customersApp").controller("CustomersController", ['$scope',CustomersController]);
}());

Answer 1

可能是customersController.js

angular.module("customersApp", [])

在重新创建模块时删除第二个参数。它应该是

angular.module('customerApp').controller(...

请参阅https://docs.angularjs.org/api/ng/function/angular.module#usage

AngularRouteJS无法在localhost：8888中工作

1 个答案: