angular loading submodule fails

Question

I'm new to AngularJS and I have a problem loading a submodule. Heres is my index.php :

<!DOCTYPE html>
<html ng-app="moduleEditing">
<head lang="en">
    <meta charset="UTF-8">
    <title>Angular Website</title>
    <link rel="stylesheet" href="css/styles2.css" />
</head>
<body>
    <div class="wrapper" ng-controller="moduleController as modCtrl" style="width: 960px; background-color: #CECECE;">
        <h1>{{modCtrl.projectName}}</h1>
        <video-module></video-module>
    </div>


    <script type="text/javascript" src="js/angular.js"></script>
    <script type="text/javascript" src="js/config.js"></script>
    <script type="text/javascript" src="modules/video/js/video.js"></script>
    <script type="text/javascript" src="js/app2.js"></script>

</body>
</html>

Here is my app2.js :

(function(){
    var app;
    app = angular.module('moduleEditing',['moduleEditing-video']);

    app.controller('moduleController', ['$http', function($http){
        this.projectName = 'A page with editable modules';

    }]);

})();

And here is the video.js :

(function(){
    var app = angular.module('moduleEditing-video', []);
    app.directive('videoModule', function(){
        return {
            restrict: 'E',
            templateUrl : 'tpls/video-module.html',
            controller : ['$sce', function($sce){

                alert('qsdfsdqf');

                this.mode = 'edit';
                this.moduleName = "Vidéo module";
                this.videoTitle = "Première vidéo editable !";
                this.videoUrl = $sce.trustAsResourceUrl('http://www.youtube.com/embed/_23NTywgO6E');

                this.changeState = function(){
                    if (this.mode === 'edit') {
                        this.mode = 'save';
                    } else {
                        this.mode = 'edit';
                        // On met à jour la base de données
                    }
                }

                this.changeUrl = function(){
                    this.videoUrl = $sce.trustAsResourceUrl(this.videoUrl);
                }
            }],
            controllerAs: 'videoCtrl'
        };
    });
});

When I load the page, I'm getting this error : https://docs.angularjs.org/error/$injector/modulerr?p0=moduleEditing&p1=%5B$injector:modulerr%5D%20http:%2F%2Ferrors.angularjs.org%2F1.3.5%2F$injector%2Fmodulerr%3Fp0%3DmoduleEditing-video%26p1%3D%255B%2524injector%253Anomod%255D%2520http%253A%252F%252Ferrors.angularjs.org%252F1.3.5%252F%2524injector%252Fnomod%253Fp0%253DmoduleEditing-video%250AA%252F%253C%2540http%253A%252F%252Flocalhost%252Fangular%252Fjs%252Fangular.js%253A6%253A416%250ALd%252F%253C%252F%253C%252F%253C%2540http%253A%252F%252Flocalhost%252Fangular%252Fjs%252Fangular.js%253A21%253A338%250Aa%2540http%253A%252F%252Flocalhost%252Fangular%252Fjs%252Fangular.js%253A20%253A483%250ALd%252F%253C%252F%253C%2540http%253A%252F%252Flocalhost%252Fangular%252Fjs%252Fangular.js%253A21%253A1%250Ag%252F%253C%2540http%253A%252F%252Flocalhost%252Fangular%252Fjs%252Fangular.js%253A35%253A84%250Ar%2540http%253A%252F%252Flocalhost%252Fangular%252Fjs%252Fangular.js%253A7%253A300%250Ag%2540http%253A%252F%252Flocalhost%252Fangular%252Fjs%252Fangular.js%253A34%253A436%250Ag%252F%253C%2540http%253A%252F%252Flocalhost%252Fangular%252Fjs%252Fangular.js%253A35%253A101%250Ar%2540http%253A%252F%252Flocalhost%252Fangular%252Fjs%252Fangular.js%253A7%253A300%250Ag%2540http%253A%252F%252Flocalhost%252Fangular%252Fjs%252Fangular.js%253A34%253A436%250ALb%2540http%253A%252F%252Flocalhost%252Fangular%252Fjs%252Fangular.js%253A38%253A154%250Arc%252Fd%2540http%253A%252F%252Flocalhost%252Fangular%252Fjs%252Fangular.js%253A17%253A339%250Arc%2540http%253A%252F%252Flocalhost%252Fangular%252Fjs%252Fangular.js%253A18%253A155%250AGd%2540http%253A%252F%252Flocalhost%252Fangular%252Fjs%252Fangular.js%253A16%253A467%250A%2540http%253A%252F%252Flocalhost%252Fangular%252Fjs%252Fangular.js%253A249%253A246%250Aa%2540http%253A%252F%252Flocalhost%252Fangular%252Fjs%252Fangular.js%253A164%253A12%250Agf%252Fc%2540http%253A%252F%252Flocalhost%252Fangular%252Fjs%252Fangular.js%253A32%253A288%250A%0AA%2F%3C@http:%2F%2Flocalhost%2Fangular%2Fjs%2Fangular.js:6:416%0Ag%2F%3C@http:%2F%2Flocalhost%2Fangular%2Fjs%2Fangular.js:35:358%0Ar@http:%2F%2Flocalhost%2Fangular%2Fjs%2Fangular.js:7:300%0Ag@http:%2F%2Flocalhost%2Fangular%2Fjs%2Fangular.js:34:436%0Ag%2F%3C@http:%2F

By I don't understand what I'm doing wrong. The submodule doesn't seem to have any code errors and all the files are loading well and in the right order.

Thanks for your ideas.

Pierre M.

Have you double checked that all paths to the javascript files are correct? — Joao Leal
– Joao Leal, Commented Dec 11, 2014 at 16:19

Alan · Accepted Answer · 2014-12-11 16:19:27Z

1

In video.js, you're not calling the function - you're missing the () from the end of the statement:

(function(){
    var app = angular.module('moduleEditing-video', []);
    app.directive('videoModule', function(){
        return {
            restrict: 'E',
            templateUrl : 'tpls/video-module.html',
            controller : ['$sce', function($sce){

                alert('qsdfsdqf');

                this.mode = 'edit';
                this.moduleName = "Vidéo module";
                this.videoTitle = "Première vidéo editable !";
                this.videoUrl = $sce.trustAsResourceUrl('http://www.youtube.com/embed/_23NTywgO6E');

                this.changeState = function(){
                    if (this.mode === 'edit') {
                        this.mode = 'save';
                    } else {
                        this.mode = 'edit';
                        // On met à jour la base de données
                    }
                }

                this.changeUrl = function(){
                    this.videoUrl = $sce.trustAsResourceUrl(this.videoUrl);
                }
            }],
            controllerAs: 'videoCtrl'
        };
    });
})();

answered Dec 11, 2014 at 16:19

Alan

3,0022 gold badges17 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Pierre M Over a year ago

:/ :/ :/ So sorry for being such a blind ! Thanks :)

Alan Over a year ago

Those things are really hard to spot :)

Pierre M Over a year ago

Yes. Let's say that ;)

Collectives™ on Stack Overflow

angular loading submodule fails

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related