独立AngularJS控制器为独立的文件 [英] Separate AngularJS Controllers Into Separate Files
问题描述
我使用 UI的路由器我AngularJS应用程序，并想知道如何我我的角度控制器分裂成不同的文件，使他们更加干净。
I am using Ui-Router with my AngularJS application, and am wondering how I split my angular controllers into different files to make them much more clean.
例如：
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'
})
})
在此code，我将如何让这个my_controller可以在外部文件中声明，而不是在像这样的底部宣布它：
In this code, how would I make it so that my_controller could be declared in an outside file rather than declaring it at the bottom like so:
app.controller('my_controller', function($scope, $filter, $http, $timeout,$mdDialog, $stateParams) {
etc....
只是引用了主HTML文件的JavaScript文件，然后用app.controller声明控制器......似乎并没有工作。
simply referencing the javascript file in the main HTML file and then declaring the controller with app.controller... does not seem to work.
在此先感谢！
推荐答案
您可以写你在单独的文件中的控制器，只是将其包含在HTML文件您包括您的应用程序文件后，
you can write your controller in separate file and just include it in your HTML file after you include your app file
<!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>
Demo.js的code
code of Demo.js
var demoApp = angular.module('demoApp',[]);
DemoController.js的code
code of DemoController.js
demoApp.controller('demoController', function($scope) {
$scope.dummyData = "hello from demo app";
});
这篇关于独立AngularJS控制器为独立的文件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
