0

Hi I have created an angular application and I have created separate controller for each I want to load each controller when the corresponding state has been reached

I don't to want to load all controller at my index.html

My index.html

 <!-- UI Elements-->
        <link rel="stylesheet" type="text/css" href="common/resources/UI/css/bootstrap.css">
        <script src="common/resources/UI/js/bootstrap.js"></script>
    <!-- UI Elements-->

    <!--Angular Elements-->

        <!--Angular js file from google-->
            <script src="common/resources/Angular/Angular/angular.js"></script>
            <script src="common/resources/Angular/Angular/angular-route.js"></script>
            <script src="common/resources/Angular/Angular/angular-ui-router.js"></script>
            <script src="common/resources/Angular/Angular/angular-router-styles.js"></script>
        <!--Angular js file from google-->

        <!--Angular Modules-->
            <script src="common/resources/Angular/Module/module.js"></script>
        <!--Angular Modules-->

        <!--Angular Route Config-->
            <script src="common/resources/Angular/Module/Configuration/rootConfig.js"></script>
        <!--Angular Route Config-->

        <!--Angular Controller-->
            <script src="common/resources/Angular/Controller/ControllerImpl/mainControllerImpl.js"></script>
            <script src="common/resources/Angular/Controller/controllers.js"></script>
        <!--Angular Controller-->

My RootStatefile I want to load login.js and use controller loginController when state chnages to /login 

 /*
        Summary        :  Login Page
        Description    :  Used to show the login page of application
        Author         :  Nithin Prasad
    */
        .state('/login', {
            url: '/', 
            controller: 'loginController',
            templateUrl: 'module/login/login.html',
            data: {
                css: [
                        {
                            href: 'module/login/css/login.css'
                        }
                     ],
                 scripts: [
                        {
                                href: 'module/login/js/login.js'
                        }
                     ]
                  }
        })

I don't want to write all controller implementation in one file and i want it to modularized

Please help my login.js

var loginController = function ($scope, $log) {
    $scope.userName = "nithinprasad59@yahoo.com";
    $scope.password = "nithin123";
    $scope.userEmail = $scope.userName;
}

smartExpenseApp.controller('loginController', loginController);

my login.html has a reference to loginController

<div class="container" ng-controller="loginController">
    <div class="row">
        <div class="col-md-6 col-md-offset-3">
            <div class="jumbotron">
                <h1>Login</h1>
                <form class="form-horizontal" name="loginForm">
                    <div class="form-group">
                        <label for="inputEmail3" class="col-sm-2 control-label">Email</label>
                        <div class="col-sm-10">
                            <input type="email" class="form-control" required id="inputEmail3" placeholder="Email" name="email" ng-model="userEmail">
                        </div>
                    </div>
                    <div ng-show="loginForm.email.$dirty && loginForm.email.$invalid" class="alert alert-danger" role="alert">
                        <span class="glyphicon glyphicon-exclamation-sign" aria-hidden="true"></span>
                        <span ng-show="loginForm.email.$error.required">Email is required.</span>
                        <span ng-show="loginForm.email.$error.email">Invalid email address.</span>
                    </div>
                    <div class="form-group">
                        <label for="inputPassword3" class="col-sm-2 control-label">Password</label>
                        <div class="col-sm-10">
                            <input type="password" required name="password" class="form-control" id="inputPassword3" placeholder="Password" ng-model="password">
                        </div>
                    </div>
                     <div ng-show="loginForm.password.$dirty && loginForm.password.$invalid" class="alert alert-danger" role="alert">
                        <span class="glyphicon glyphicon-exclamation-sign" aria-hidden="true"></span>
                        <span ng-show="loginForm.password.$error.required">Password is required.</span>
                    </div>
                    <div class="form-group">
                        <div class="col-sm-offset-2 col-sm-10">
                            <button type="submit" class="btn btn-primary">Sign in</button>
                        </div>
                    </div>

                    Hello ! {{userEmail}} Your password is {{password}}
            </div>
        </div>

        </form>
        
    </div>
</div>

</div>

but i am getting following error LoginControler not found

nithin prasad
  • 168
  • 1
  • 9
  • Please include login.js file in index.html – Zaslam Apr 05 '16 at 19:40
  • If I add login,js over there it will work but the problem is that if I want to have around 50 different states and am using 50 different controllers and I don't want to add 50 entries in index.html and I also don't want to add in single file because I want it to be modulized – nithin prasad Apr 05 '16 at 19:48
  • Please have a look at angular lazylaoding and $controllerProvider, if it helps your case: http://ify.io/lazy-loading-in-angularjs/ – Zaslam Apr 05 '16 at 19:51

2 Answers2

0

You need to include your login.js file in index.html, just as you have included others. This is necessary to include all js files, so that they are loaded in sequence. Otherwise your controller function will not be found by system.

If you don't want to load all files at startup on single page load, then you can use angular lazyloading feature, and $controllerProvider.

http://ify.io/lazy-loading-in-angularjs/

Zaslam
  • 334
  • 1
  • 3
  • 8
  • If I add login,js over there it will work but the problem is that if I want to have around 50 different states and am using 50 different controllers and I don't want to add 50 entries in index.html and I also don't want to add in single file because I want it to be modulized – nithin prasad Apr 05 '16 at 19:45
0

You want to load the files only when its needed. Such type of loading is called lazy loading. You can add only the primary js and css files in the html and can load the template html and other js files later on when needed.

You can use oclazyload for this.

first do install the dependancy file using bower or npm.

bower install oclazyload or npm install oclazyload

then you need to add the module to your application

var smartExpenseApp = angular.module("smartExpenseApp", ["oc.lazyLoad"]);

You are done with that. now inject the dependancy in your controller file that you are added in the index.html.

smartExpenseApp.controller("MyCtrl",['$ocLazyLoad', function($ocLazyLoad) { //do something here //now you need your login controller $ocLazyLoad.load('login.js'); }]);

You can load a file inside a function, switch cases etc.

for more details refer https://oclazyload.readme.io/docs

Syam Pillai
  • 4,967
  • 2
  • 26
  • 42
  • Hi syam thank you for your help But my doubt is i am redirecting directly to a state using state loader and if i load login,js in min controller that is fine and if am using another page also i have to include the lazy load under maincontroller only? so it is same as that of including all the js in a single file that has a reference to in index.html so can i use ocLazyLoad in a state specific code – nithin prasad Apr 07 '16 at 14:56
  • Hi Nithin, I didnt got exactly what are you trying to convey. But if you are loaded a file using **lazyload** it will remain loaded. no need to load that again once you change your state. you can even load the js and html files in you state routing section also as like you are _resolving_ data before loading a new **state** – Syam Pillai Apr 08 '16 at 11:51