javascript angularjs angularjs-directive angularjs-scope angular-ui

How to import module and display on view in angular?

enter image description here

I am trying to load my first view in angular. But I make a project in modular fashion to learn good coding style.

I will show how I make a directory to create a module

Or look at full image here...

enter image description here

I write this on my index.html page

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="css/foundation.css" />
    <script src="lib/angular.js" type="text/javascript"></script>
    <script src="lib/angular-ui-router.js" type="text/javascript"></script>
    <script src="js/app.js" type="text/javascript"></script>
</head>

<body >
     <div ng-app="firstApp">
         <div ui-view="app"></div>
     </div>


</body>

</html>

in app.js

var app= angular.module('firstApp',['ui.router']);

in controller firstcontroller.js file I write this

(function() {
    'use strict';

    angular
        .module('firstApp')
        .controller('firstcont', firstcont);

    firstcont.$inject = ['$scope'];
    function firstcont($scope) {
        $scope.clickEvent=function(){
            alert('---')
        }
    }

})();

on router.js file I write this

(function() {
    'use strict';

    angular.module('firstApp.firstdir').config(Routes);


    Routes.$inject = ['$stateProvider', '$urlRouterProvider'];
    function Routes($stateProvider, $urlRouterProvider) {
        // Default
        $urlRouterProvider.otherwise('/app');
        // Application
        $stateProvider
            .state('app', {
                url: '/app',
                views:{
                    app: { templateUrl: 'firstdir/templates/firstpage.html' }
                },
                controller:"firstcont"

            });
    }

})();

in module.js file I write this

(function() {
    'use strict',

        angular.module('firstApp.firstdir', [
            'ui.router',
        ]);

})();

on template.html I write this

<div ng-controller="firstcont">
    <h1>First page</h1>
    <button ng-click="clickEvent()"> go to second page</button>
</div>

I don't know why it doesn't display first view. Actually, I am not able to make plunker, because there is no way to make directory?

angular.js:78 Uncaught Error: [$injector:modulerr] Failed to instantiate module firstApp due to:
Error: [$injector:modulerr] Failed to instantiate module firstApp.firstdir due to:
Error: [$injector:nomod] Module 'firstApp.firstdir' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.
http://errors.angularjs.org/1.2.21/$injector/nomod?p0=firstApp.firstdir
    at file:///C:/Users/nksharma/Desktop/Angularjs/lib/angular.js:78:12
    at file:///C:/Users/nksharma/Desktop/Angularjs/lib/angular.js:1668:17
    at ensure (file:///C:/Users/nksharma/Desktop/Angularjs/lib/angular.js:1592:38)
    at module (file:///C:/Users/nksharma/Desktop/Angularjs/lib/angular.js:1666:14)
    at file:///C:/Users/nksharma/Desktop/Angularjs/lib/angular.js:3852:22
    at forEach (file:///C:/Users/nksharma/Desktop/Angularjs/lib/angular.js:325:18)
    at loadModules (file:///C:/Users/nksharma/Desktop/Angularjs/lib/angular.js:3846:5)
    at file:///C:/Users/nksharma/Desktop/Angularjs/lib/angular.js:3853:40
    at forEach (file:///C:/Users/nksharma/Desktop/Angularjs/lib/angular.js:325:18)
    at loadModules (file:///C:/Users/nksharma/Desktop/Angularjs/lib/angular.js:3846:5)
http://errors.angularjs.org/1.2.21/$injector/modulerr?p0=firstApp.firstdir&…%3A%2FUsers%2Fnksharma%2FDesktop%2FAngularjs%2Flib%2Fangular.js%3A3846%3A5)
    at file:///C:/Users/nksharma/Desktop/Angularjs/lib/angular.js:78:12
    at file:///C:/Users/nksharma/Desktop/Angularjs/lib/angular.js:3880:15
    at forEach (file:///C:/Users/nksharma/Desktop/Angularjs/lib/angular.js:325:18)
    at loadModules (file:///C:/Users/nksharma/Desktop/Angularjs/lib/angular.js:3846:5)
    at file:///C:/Users/nksharma/Desktop/Angularjs/lib/angular.js:3853:40
    at forEach (file:///C:/Users/nksharma/Desktop/Angularjs/lib/angular.js:325:18)
    at loadModules (file:///C:/Users/nksharma/Desktop/Angularjs/lib/angular.js:3846:5)
    at createInjector (file:///C:/Users/nksharma/Desktop/Angularjs/lib/angular.js:3786:11)
    at doBootstrap (file:///C:/Users/nksharma/Desktop/Angularjs/lib/angular.js:1435:20)
    at bootstrap (file:///C:/Users/nksharma/Desktop/Angularjs/lib/angular.js:1450:12)
http://errors.angularjs.org/1.2.21/$injector/modulerr?p0=firstApp&p1=Error%…3A%2FUsers%2Fnksharma%2FDesktop%2FAngularjs%2Flib%2Fangular.js%3A1450%3A12)

Solution

First include the js files (the module declaration always come first, and first submodules)

<!-- The order here is very important -->
<script src="js/module.js" type="text/javascript"></script>
<script src="js/router.js" type="text/javascript"></script>
<script src="js/firstcontroller.js" type="text/javascript"></script>
<script src="js/app.js" type="text/javascript"></script>

Declare your 'firstcont' as a firstApp.firstDir controller:

var firstDir = angular.module('firstApp.firstdir');
...
firstDir.controller('firstcont', firstcont);

Put your submodule as a dependece of your firstApp module:

//Remember firstApp.firstdir must be already declared :)
var app= angular.module('firstApp',['firstApp.firstdir', 'ui.router']);