将 AngularJS 控制器分离到单独的文件中 [英] Separate AngularJS Controllers Into Separate Files
问题描述
我在我的 AngularJS 应用程序中使用 Ui-Router，我想知道我是如何将我的角度控制器拆分为不同的文件，使它们更加干净.
例如:
var app = angular.module('myApp', ["xeditable", 'ngRoute','ngSanitize','ngAnimate', 'ngAria', 'ngMaterial','ngFileUpload','ui.router']);app.config(function($stateProvider, $urlRouterProvider){//对于任何不匹配的 url，发送到/route1$urlRouterProvider.otherwise("/my_requisitions/list");$stateProvider.state('my_requisitions', {url: "/my_requisitions",templateUrl: "../../../partials/requisitions/my_requisitions.ctp",//控制器:'my_controller'}).state('my_requisitions.list', {网址:/列表"，templateUrl: "../../../partials/requisitions/my_requisitions.list.ctp",//控制器:'my_controller'}).state('my_requisitions.add', {url: "/add/:type",templateUrl: "../../../partials/requisitions/my_requisitions.add.ctp",控制器:'my_controller'}).state('manage_requisitions', {url: "/manage_requisitions",templateUrl: "../../../partials/requisitions/manage_requisitions.ctp"}).state('manage_requisitions.list', {网址:/列表"，templateUrl: "../../../partials/requisitions/manage_requisitions.list.ctp",控制器:'manage_controller'})})在这段代码中，我将如何制作它以便可以在外部文件中声明 my_controller 而不是像这样在底部声明它:
app.controller('my_controller', function($scope, $filter, $http, $timeout,$mdDialog, $stateParams) {等等....简单地引用主 HTML 文件中的 javascript 文件，然后使用 app.controller... 声明控制器似乎不起作用.
提前致谢！
你可以在单独的文件中编写你的控制器，并在你包含你的应用程序文件后将它包含在你的 HTML 文件中
<头><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>演示</title><身体><div ng-app="demoApp"><div ng-controller="demoController"><span>{{dummyData}}</span></html>
Demo.js 代码
var demoApp = angular.module('demoApp',[]);DemoController.js 代码
demoApp.controller('demoController', function($scope) {$scope.dummyData = "来自演示应用程序的你好";});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.
For example:
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'
})
})
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....
simply referencing the javascript file in the main HTML file and then declaring the controller with app.controller... does not seem to work.
Thanks in advance!
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>
code of Demo.js
var demoApp = angular.module('demoApp',[]);
code of DemoController.js
demoApp.controller('demoController', function($scope) {
$scope.dummyData = "hello from demo app";
});
这篇关于将 AngularJS 控制器分离到单独的文件中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
