Actualmente estoy aprendiendo AngularJS. He creado una aplicación 'hola mundo' que se muestra a través de la directiva ng-view. ¡Hasta ahora tan bueno!

Mis archivos están ordenados de esta manera:

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

La configuración de la ruta se ve así:

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

Como mencioné antes: esto funciona perfectamente bien. Sin embargo, las cosas pueden volverse más complejas. Los controladores podrían contener más funciones, etc. ¿Es posible colocar estos controladores en archivos externos? Entonces se vería algo como esto:

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

Ya intenté simplemente importar estos archivos al índice:

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

Pero esto no pareció funcionar. (Me dejó con una página en blanco.) ¡Espero que alguien pueda ayudarme!

0
Robert van der Spek 26 jul. 2016 a las 14:41

1 respuesta

  • WebContent (raíz)

    • controladores (carpeta)

    Home.jsp>

    Employee.jsp>

    • vistas * (carpeta)

    view1.html

    view2.html

    • index.html

Esto es index.js

var myApp = angular.module('myApp'); aquí está el Home Controller separado (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"

});

}]);

Aquí está el employee.js separado

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

Aquí está el Home.js separado

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

1
Sam khan 26 jul. 2016 a las 12:33