External file controllers and AngularJs directives: how to write them correctly?

Question

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 the .js directives I write:

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

same for 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 displayed in browsers, I do not get any console errors, and the source code of the page is exactly what I need, but I see only the background, text or other elements. What am I doing wrong?

Answer 1

Try it,

Declare a global variable for your module.

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

And then use this variable to represent your module.

myApp.directive(...)

Answer 2

, , , , :

// 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, ...) { ...

, , , :

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

app.js (controller.js directives.js), !!! . , .js controller.js

Answer 3

var 'myApp'

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

controller.js

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

exernal directives.js

myApp.directive('myCustomer', function() { 
return {
template: 'Name: {{customer.name}} Address: {{customer.address}}'
  };
});