How to bind controllers contained in a folder to views in angularjs dynamically

Question

I have a controller in a folder named controller at the root. I have view that I want to attach to the corresponding views when the route changes. I am using angular-ui-router.

controllers/one.js

angular.module('sub',["ui.router"]).config(function($stateProvider){
$stateProvider
    .state('index', {
        url: "/login",
        views: {
            "viewA": {
                templateUrl: "login.html"
            }
        }
    })
    .state('register', {
        url: "/register",
        views: {
            "viewA": {
                templateUrl: "register.html" 
            }
        }
    })
    .state('upload', {
        url: "/upload",
        views: {
            "viewA": {
                templateUrl: "upload.html" 
            }
        }
    })
})

test.html

    <!DOCTYPE html>
    <html ng-app="sub">

    <head>
        <title>AngularJS: UI-Router Quick Start</title>
        <!-- Bootstrap CSS -->
        <link href="bootstrap.min.css" rel="stylesheet">
    </head>

    <body class="container">

      <div class="navbar">
        <div class="navbar-inner">
          <a class="brand" ui-sref="index">Quick Start</a>
          <ul class="nav">
            <li><a ui-sref="index">Home</a></li>
            <li><a ui-sref="register">Register</a></li>
            <li><a ui-sref="upload">upload</a></li>
          </ul>
        </div>
      </div>

      <div class="row">
        <div class="span6">
          <div class="well" ui-view="viewA"></div>        
        </div>
      </div>
  <script type="text/javascript" src="angular.min.js"></script>
<script type="text/javascript" src="Controllers/one.js"></script>
<script type="text/javascript" src="angular-cookies.js"></script>
<script type="text/javascript" src="Controllers/loginController.js"></script> 
<script type="text/javascript" src="Controllers/uploadController.js"></script>
<script type="text/javascript" src="Controllers/registerController.js"></script>
<script type="text/javascript" src="angular-ui-router.js"></script> 
<script type="text/javascript" src="jquery-2.1.3.min.js"></script>
</body>

</html>

login.html

<div ng-controller="loginController">
<p>
             UserName: 
            <input id="director" type="text" ng-model="mUserName"/>
        </p>

        <p>
             Password: 
            <input id="actor" type="text" ng-model="mPassWord"/>
        </p>
        <button ng-click="login()">Login</button>
 </div>

Controllers/LoginController.js

angular.module('subsd',["ngCookies"]).controller('loginController', ['$http','$scope','$cookies',function($http,$scope,$cookies) {})]);

If I mention 'sub' instead of 'subsd' in loginController.js the routing stops working.

matewka · Accepted Answer · 2015-02-26 11:07:22Z

2

The final answer includes few things to do:

Remove <div ng-controller="loginController"> from the login.html template file.
Move the 'ngCookies' dependency to the sub module definition in controllers/one.js file (angular.module('sub',["ui.router", "ngCookies"])).
In the controllers/logincontroller.js file change the module name from subsd to sub back again and remove the second argument from the sub module invoke, to make it look like this: angular.module('sub').controller(...).

When you changed the module name before, you were trying to re-define it, which is an error.

This

angular.module('moduleName', [...dependencies])

is the module setter, while this

angular.module('moduleName')

is the module getter.

answered Feb 26, 2015 at 11:07

matewka

10.2k3 gold badges35 silver badges43 bronze badges

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

1 Comment

sham Over a year ago

I made these mistakes, while making the code modular. Everthing was working fine, when I had all the controllers in a single file. Thank you for pointing the issues in code.

matewka · Accepted Answer · 2015-02-25 18:57:27Z

0

Do you mean:

$stateProvider
    .state('index', {
        url: "/login",
        views: {
            "viewA": {
                templateUrl: "login.html",

                // THIS ?
                controller: "LoginController"
            }
        }
    })        
})

Also remember to remove the ng-controller attribute from the view.

answered Feb 25, 2015 at 18:57

matewka

10.2k3 gold badges35 silver badges43 bronze badges

11 Comments

sham Over a year ago

I have tried this, but it does not work. Also my controller is in a folder named Controllers.

matewka Over a year ago

Describe "doesn't work". What exactly didn't work? Did you get any errors in the console?

sham Over a year ago

I encounter this error, Error: [ng:areq] errors.angularjs.org/1.2.26/ng/… at Error (native)

matewka Over a year ago

You defined your controller with capital letters "LoginController" and tried to include it with the first letter as non-capital "loginController". It matters. Also remember to include the controller file with <script src="Controllers/LoginController.js"></script>.

sham Over a year ago

I have made the changes, but still the same error is thrown

|

Collectives™ on Stack Overflow

How to bind controllers contained in a folder to views in angularjs dynamically

2 Answers 2

1 Comment

11 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

11 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related