Question

我的RouteProvider配置和单个Js文件中的控制器如下所示

    var empApp = angular.module('employee', ['ngRoute']);
empApp.config(function ($routeProvider) {
    debugger;
    $routeProvider.when('/', {
        templateUrl: '/ShowAll.html',
        controller: 'mainCtrlr1'
    }).when('/AddEmployee', {
        templateUrl: '/AddEmployee.html',

    }).when('/EditEmployee', {
        templateUrl: '/EditEmployee.html',

    }).when('/deleteEmployee', {
        templateUrl: '/deleteEmployee.html',

    });
})
.controller('mainCtrlr1', ['$scope', '$location', function ($scope, $location) {
    $location.path('/');
    alert('Hi');
}]);

我希望将配置和控制器保存在两个不同的文件中 1. Configs.js

var empApp = angular.module('employee', ['ngRoute']);
empApp.config(function ($routeProvider) {
    debugger;
    $routeProvider.when('/', {
        templateUrl: '/ShowAll.html',
        controller: 'mainCtrlr1'
    }).when('/AddEmployee', {
        templateUrl: '/AddEmployee.html',

    }).when('/EditEmployee', {
        templateUrl: '/EditEmployee.html',

    }).when('/deleteEmployee', {
        templateUrl: '/deleteEmployee.html',

    });
});

我在Controller1.js中的控制器如下所示。

var empApp=angular.module('employee', ['ngRoute']);
empApp.controller('mainCtrlr1', ['$scope', '$location', function ($scope, $location) {
    //$location.path('/');
    alert('Hi');
}]);

现在我已经在我的html中引用了这两个文件，如下所示

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8" />
    <script src="Lib/angular.js"></script>
    <!--<script src="Scripts/Services.js"></script>-->

    <script src="Scripts/Controller1.js"></script>
    <script src="Scripts/conifgs.js"></script>
    <script src="Lib/angular-route.js"></script>


</head>
<body ng-app="employee">

    <div ng-view></div>

</body>
</html>

我的ShowAll.html代码如下所示

<div ng-controller="mainCtrlr1">
    <table>
        <thead>
            <th>Employee ID</th>
            <th>First Name</th>
            <th>Last Name</th>
            <th>Email</th>
            <th>Age</th>
            <th>Telephone</th>
        </thead>
        <tbody ng-repeat="emp in GetAllEmployees()">
            <tr>
                <td>{{emp.EmployeeID}}</td>
                <td>{{emp.FirstName}}</td>
                <td>{{emp.LastName}}</td>
                <td>{{emp.Email}}</td>
                <td>{{emp.Age}}</td>
                <td>{{emp.telephone}}</td>
            </tr>
        </tbody>
    </table>
</div>

现在当我执行上述更改时，我的控制器无法注册。但是当我的控制器和配置在同一个js文件中时，我的应用程序工作正常。

任何建议都非常感谢:)

Answer 1

此代码段angular.module('employee', ['ngRoute'])创建一个新的角度模块。

由于你有两次这个片段（每个新文件中有一个），你将创建两个不同的角度模块。

<强>解决方案：

将var empApp = angular.module('employee', ['ngRoute']);保留在html文件中导入的第一个js文件中。

在第二个js文件中，将第一行替换为var empApp = angular.module('employee');

为了进一步说明，angular.module('employee', ['ngRoute'])将创建一个新模块，因此需要先执行。 angular.module('employee')将获得对已创建的模块的引用，因此应该在需要引用该模块的所有后续js文件中使用。

无法将我的配置和控制器保存在angularJs中的不同文件中

1 个答案: