Kann ein Controller in einer separaten Datei sein, wenn Sie ng-view verwenden?

Question

Momentan lerne ich AngularJS. Ich habe eine App "Hallo Welt" erstellt, die über die ng-view-Direktive angezeigt wird. So weit, ist es gut!

Meine Dateien werden auf diese Weise bestellt:

- WebContent *(root)* 
> - controllers *(folder)* 
>> - controllers.js 
> - views *(folder)* 
>> - view1.html 
>> - view2.html 
> - index.html 

Die Route Config wie folgt aussieht:

function routeConfig($routeProvider){ 
$routeProvider.when('/', 
{ 
templateUrl: "views/view1.html", 
controller: "View1Ctrl" 
} 
).when("/view/:id", 
{ 
templateUrl: "views/view2.html", 
controller: "View2Ctrl" 
} 
).otherwise(
{ 
redirectTo: "/" 
}); 
}; 

app.controller("View1Ctrl", function($scope) { 
$scope.message = "Hello World1"; 
} 
[... etc. ...] 

Wie ich bereits erwähnt habe vor: das völlig in Ordnung funktioniert. Die Dinge könnten jedoch komplexer werden. Die Controller könnten mehr Funktionen enthalten usw. Ist es möglich, diese Controller in externe Dateien zu legen? So wäre es etwa so aussehen:

- WebContent *(root)* 
> - controllers *(folder)* 
>> - controllers.js 
>> - view1-controller.js 
>> - view2-controller.js 
> - views *(folder)* 
>> - view1.html 
>> - view2.html 
> - index.html 

Ich habe bereits versucht einfach, um diese Dateien in den Index zu importieren:

<script src="controllers/view1-controller.js"></script> 

Aber das scheint nicht zu funktionieren. (Es hat mich mit einer Blank-Seite verlassen.) Hoffe, dass jemand mir helfen kann!

Answer 1

Dag Robert,

Das sicherlich möglich, noch mehr würde ich es empfehlen! Ich möchte Sie beziehen sich auf diese Plunkr

Grundsätzlich kann man nur so etwas tun:

(function() { 
    angular 
    .module('plunker') 
    .directive('helloWorld', function() { 
     return { 
     scope: true, 
     restrict: 'E', 
     controller: 'HelloWorldController', 
     controllerAs: '$ctrl', 
     templateUrl: 'app/directives/hello-world/template.html' 
     }; 
    }) 
})(); 

Wichtige Hinweise:

• Um ein neues Modul zu erstellen, schreiben Sie: angular.module('name', dependencies);. Wo die Abhängigkeiten ein Array sind.
• Um das gleiche Modul abzurufen, schreiben Sie nicht die Abhängigkeiten: angular.module('name'). Dies wird einfach erhalten das Modul

Answer 2

• WebContent (root)

  • Controller (Ordner)

  Home.js

  Employee.js

  • Ansichten * (Ordner)

  view1.html

  view2.html

  • Index.html

dies index.js

var myApp = angular.module('myApp'); hier ist der seprate Home Controller (Home.js)

myApp.controller('HomeCtrl', function ($scope) { }

myApp.config(["$routeProvider",function ($routeProvider) { 
$routeProvider 
.when("/Employees", { 
    templateUrl: "templates/Employees/Employee.cshtml", 
    controller: "EmployeeController" 
}) 
.when("/Home", { 
    templateUrl: "templates/Home/Home.cshtml" 
}) 

.when("/EmployeeProgress", { 
templateUrl: "templates/EmployeeStats/EmployeeStats.cshtml" 
}) 
.otherwise({ 
    templateUrl: "templates/Home/Home.cshtml" 

}); 

}]); 

hier ist der seprate Mitarbeiter. js

myApp.controller('EmployeeController',function ($scope) { }

hier ist die seprate Home.js

myApp.controller('HomeController',function ($scope) { }