4

I have an app.js file where I specify my dependencies:

angular.module("myApp", ['angular-jwt', 'chart.js']).config(...)

I want an external file for directives, so in directives.js I write:

angular.module('myApp').directive(...)

same thing for the controller.js:

angular.module('myApp').controller('pokerstrazzkCtrl', function($scope, $http, jwtHelper) { ...

and this is the include script order in the html file:

    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
    <script src="https://cdn.rawgit.com/auth0/angular-jwt/master/dist/angular-jwt.js"></script>
    <script src="Chart.min.js"></script>
    <script src="angular-chart.js"></script>
    <script src="controller.js"></script>
    <script src="directives.js"></script>
    <script src="app.js"></script>

when displaying in the browsers I get no console errors and source code of the page is exactly what it should but I only see the background, no text or other elements. What am I doing wrong?

skjorrface
  • 161
  • 2
  • 16

3 Answers3

1

Please try this one,

Declare a global variable for your module.

var myApp = angular.module("myApp", ['angular-jwt', 'chart.js']).config(...)

And then use this variable for representing your module.

myApp.directive(...)
Abhilash Augustine
  • 4,128
  • 1
  • 24
  • 24
1

Ok I finally figured out why it wasn't working before but the really correct way to define modules, directives and controllers without the use of global variable is the following:

// app.js - main file, where the app module is defined
angular.module('yourApp', ['yourDependencies']).config(function Config($service1, $service2) {


// directives.js
angular.module('yourApp')

.directive('yourDirective', function() { ...

// controller.js
angular.module('yourApp').controller('yourController', function($service1, $two, ...) { ...

Of course the order in which you include the file in is fundamental:

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

app.js must precede all of his children (controller.js and directives.js) or it won't work!!! That's why it wasn't working for me. Everything was fixed when I inverted directives.js and controller.js

skjorrface
  • 161
  • 2
  • 16
0

Use the same variable var 'myApp' in external files

var myApp = angular.module('myApp',[]);

in exernal file controller.js

myApp.controller('pokerstrazzkCtrl', ['$scope', function($scope) { 
 $scope.greeting = 'Hola!';
}]);

in exernal file directives.js

myApp.directive('myCustomer', function() { 
return {
template: 'Name: {{customer.name}} Address: {{customer.address}}'
  };
});
Sachin Verma
  • 493
  • 1
  • 5
  • 11
  • yes I could do that and thanks for the answer, but I've read it's not a good practice using variables for angular modules, etc. Is this the only way to make it work? – skjorrface Oct 26 '15 at 04:45
  • refer this post http://stackoverflow.com/questions/20612484/angularjs-separating-directive-files-but-staying-on-the-same-module – Sachin Verma Oct 26 '15 at 04:55
  • We are taught to avoid global variable like a plague XD. While it's ok to use global variable in this case, but some part in me got the uneasy feeling... – Icycool Oct 26 '15 at 05:04