Javascript 将AngularJS控制器分离到单独的文件中_Javascript_Angularjs_Angular Ui Router

Javascript 将AngularJS控制器分离到单独的文件中

javascript angularjs

Javascript 将AngularJS控制器分离到单独的文件中,javascript,angularjs,angular-ui-router,Javascript,Angularjs,Angular Ui Router,我正在与AngularJS应用程序一起使用，我想知道如何将我的角度控制器拆分为不同的文件，以使它们更干净例如： var app = angular.module('myApp', ["xeditable", 'ngRoute','ngSanitize', 'ngAnimate', 'ngAria', 'ngMaterial','ngFileUpload','ui.router']); app.config(function($stateProvider, $urlRouterProvide

我正在与AngularJS应用程序一起使用，我想知道如何将我的角度控制器拆分为不同的文件，以使它们更干净

例如：

var app = angular.module('myApp', ["xeditable", 'ngRoute','ngSanitize',
 'ngAnimate', 'ngAria', 'ngMaterial','ngFileUpload','ui.router']);

app.config(function($stateProvider, $urlRouterProvider){

// For any unmatched url, send to /route1
$urlRouterProvider.otherwise("/my_requisitions/list");

$stateProvider
    .state('my_requisitions', {
        url: "/my_requisitions",
        templateUrl: "../../../partials/requisitions/my_requisitions.ctp",
        //controller: 'my_controller'
    })
    .state('my_requisitions.list', {
        url: "/list",
        templateUrl: "../../../partials/requisitions/my_requisitions.list.ctp",
        //controller: 'my_controller'

    })
    .state('my_requisitions.add', {
        url: "/add/:type",
        templateUrl: "../../../partials/requisitions/my_requisitions.add.ctp",
        controller: 'my_controller'

    })
    .state('manage_requisitions', {
        url: "/manage_requisitions",
        templateUrl: "../../../partials/requisitions/manage_requisitions.ctp"
    })
    .state('manage_requisitions.list', {
        url: "/list",
        templateUrl: "../../../partials/requisitions/manage_requisitions.list.ctp",
        controller: 'manage_controller'
    })
})

在这段代码中，我如何使我的_控制器可以在外部文件中声明，而不是像这样在底部声明：

app.controller('my_controller', function($scope, $filter, $http, $timeout,$mdDialog, $stateParams) {
etc....

只需在主HTML文件中引用javascript文件，然后用app.controller声明控制器。。。似乎不起作用

提前谢谢

在加载声明应用程序的文件之前，需要在HTML中加载包含控制器的文件

<script src="/path/to/angular.js"></script>
<script src="/path/to/controller1.js"></script>
<script src="/path/to/controller2.js"></script>
<script src="/path/to/yourapp.js"></script>

声明应用程序变量后，在主文件中：

app.controller('Controller', Controller);

您可以在单独的文件中编写控制器，并在包含应用程序文件后将其包含在HTML文件中

<!DOCTYPE html>

<html>
<head>
<meta name="viewport" content="width=device-width" />
<script src="~/Scripts/angular.js"></script>
<script src="~/Scripts/Demo.js"></script>
<script src="~/Scripts/DemoController.js"></script>
<title>Demo</title>
</head>
<body>
<div ng-app="demoApp">
    <div ng-controller="demoController">
        <span>{{dummyData}}</span>
    </div> 
</div>
</body>
</html>

DemoController.js的代码

demoApp.controller('demoController', function($scope) {
     $scope.dummyData = "hello from demo app";
});

您可以共享您的js文件注入序列吗？只要您的javascript文件以正确的顺序加载，在不同的文件中包含控制器定义就不会起作用。显示错误行，然后帮助查找解决方案您还需要在单个文件中指定模块。。不仅仅是

app.controller

。因此，在

app.controller

之前，您应该拥有

var app=angular.module（'myApp'）

@HirenSavaliya，这可能是避免文件加载依赖性的一种可能解决方案。在把答案打为否定之前，你应该理解它。但是这种方式不合适。你用这种方式就不需要用路线。那么，你能用正确的方式做出你自己的答案吗？我对angularjs比较陌生，这就是我工作的方式。如果有更好的方法，我会很感兴趣的。谢谢。我想看看是否有一个适当的方法，否则这将很好。你是对的。非常感谢。查看后，看起来我在实际应用程序文件之前就包含了我的控制器文件。。。。哎呀，这是倒退。您正在加载依赖于控制器的文件，然后加载声明控制器的文件@DaveMcGregor，你最初的方式是对的。

var demoApp = angular.module('demoApp',[]);

demoApp.controller('demoController', function($scope) {
     $scope.dummyData = "hello from demo app";
});