0

its my first time asking here and i would like to know if there is any way to separate files in AngularJS.

I have UI Route but everytime i want to create an external controller i have to declare it on the head of the page.

My code looks like this:

app.js:

'use strict';

// Declare app level module which depends on views, and core components
angular.module('mainApp.controllers', [
    "ui.router"
]).config(function($stateProvider, $locationProvider, $urlRouterProvider) {
    // creating routes or states
    $stateProvider
        .state('dashboard', {
            url : '/dashboard',
            templateUrl : 'templates/home.html',
            controller: "HomeController"
        })
        .state('apartments', {
            url : '/apartments',
            templateUrl : "templates/Apartments/apartments.html",
            controller : "ApartmentsController"
        }).state('longstay', {
            url : '/longstay',
            templateUrl : 'templates/Longstay/longstay.html',
            controller: 'LongstayController'
        }).state('logout', {
            url : '/home'
        }).state('login', {
            url : '/login',
            templateUrl : 'templates/Authentication/authentication.html',
            controller: 'AuthenticationController'
        });
    // Redirect to home page if url does not
    // matches any of the three mentioned above
    $urlRouterProvider.otherwise("/dashboard");
})
// create empty controllers for the states as we are
// not doing anything but just displaying message
.controller('MainCtrl', function () {});

index.html:

<script src="app.js"></script>

<!-- Controller includes -->
<script src="templates/HomeController.js"></script>
<script src="templates/Apartments/ApartmentsController.js"></script>
<script src="templates/Authentication/AuthenticationController.js"></script>
<script src="templates/Longstay/LongstayController.js"></script>

I want to find a way to import this controllers but have them in external folders with their templates or views in there without anything in the index.html just import them inside app.js.

"Would love" folder structure:

app/|
    |-Apartments/|
    |            |-apartments.tpl.html
    |            |-ApartmentsController.js
    |            |-ApartmentsFactory.js
    |            
    |           
    |-app.js
    |-index.html

If anyone could help i would be very grateful!

georgeawg
  • 48,608
  • 13
  • 72
  • 95
Pau
  • 138
  • 2
  • 14
  • Check out this questions and its answers: https://stackoverflow.com/questions/20087627/how-to-create-separate-angularjs-controller-files I think they explain nicely how to write in one file `angular.module('mainApp.controllers', ["ui.router"])` then in another file `angular.module('mainApp.controllers').controller('Ctrl1', ['$scope', '$http', function($scope, $http){}]);` etc. – Alex L Jan 20 '20 at 12:52
  • yeah but they dont explain how to import them into the main app.js! i have the three files mentioned in that question but i dont know how to import them into my app.js – Pau Jan 20 '20 at 13:42
  • you can just call the modules & controllers by name like this from the main app.js right? `angular.module('mainApp.controllers').controller('Ctrl1')` Did you check Google's guide? https://docs.google.com/document/d/1XXMvReO8-Awi1EZXAXS4PzDzdNvV6pGcuaF4Q9821Es/pub or the angular seed repo? https://github.com/angular/angular-seed - Maybe I am missing the point of what you want to do. Sorry if that is the case. – Alex L Jan 20 '20 at 14:16
  • Yes, the first google link u sent me, explains it at this line: --- Or, in the case where the directive and the service are unrelated, we'd have: --- sampleapp/ app.css app.js app-controller.js app-controller_test.js components/ bar/ "bar" describes what the service does bar.js bar-service.js bar-service_test.js foo/ "foo" describes what the directive does foo.js foo-directive.js foo-directive_test.js index.html --- – Pau Jan 20 '20 at 14:39
  • but it doesnt explain how to bind those files – Pau Jan 20 '20 at 14:56

0 Answers0