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

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

angularjs

无法将我的配置和控制器保存在angularJs中的不同文件中,angularjs,Angularjs,我在一个Js文件中有一个RouteProvider的配置和一个控制器，如下所示 var empApp = angular.module('employee', ['ngRoute']); empApp.config(function ($routeProvider) { debugger; $routeProvider.when('/', { templateUrl: '/ShowAll.html', controller: 'mainCt

我在一个Js文件中有一个RouteProvider的配置和一个控制器，如下所示

    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');
}]);

<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>

我想把我的配置和控制器保存在两个不同的文件中 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代码如下所示

    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');
}]);

<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>


员工ID
名字
姓
电子邮件
年龄
电话
{{emp.EmployeeID}
{{emp.FirstName}
{{emp.LastName}
{{emp.Email}
{{emp.Age}
{{emp.telephone}}

现在，当我执行上述更改时，我的控制器无法注册。然而，当我的控制器和配置在同一个js文件中时，我的应用程序运行良好

非常感谢您的建议：）

此代码片段

angular.module（'employee'，['ngRoute']）

创建了一个新的angular模块

由于此代码段有两次（每个新文件中有一个），因此将创建两个不同的角度模块

解决方案：

保持

var empApp=angular.module（'employee'，['ngRoute']）
在第二个js文件中，将第一行替换为var empApp=angular.module（'employee'）
为了进一步澄清，angular.module（'employee'，['ngRoute']）
将创建一个新模块，因此需要首先执行angular.module（'employee'）
将获得对已创建模块的引用，因此应在需要引用该模块的所有后续js文件中使用。
此代码段angular.module（'employee'，['ngRoute']）
由于此代码段有两次（每个新文件中有一个），因此将创建两个不同的角度模块
解决方案：
保持var empApp=angular.module（'employee'，['ngRoute']）
在第二个js文件中，将第一行替换为var empApp=angular.module（'employee'）
为了进一步澄清，angular.module（'employee'，['ngRoute']）
将创建一个新模块，因此需要首先执行angular.module（'employee'）
将获得对已创建模块的引用，因此应在所有需要引用该模块的后续js文件中使用