Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to define controllers in multiple files - AngularJs

I am trying to define controllers in separate files, but I'm getting the error:

transactionsController not a function got undefined

File structure

I have added files in this sequence 1- common.js 2- transactions.js

Common.js In common files I have defined

var app = angular.module("spModule", ["ngMessages", "ui.bootstrap"]);

Transactions.js

angular.module('spModule').controller('transactionsController',
    ['$scope', '$http', function ($scope, $http) {} ]
);

HTML FIle

<body ng-app="spModule" ng-controller="transactionsController">
like image 620
naCheex Avatar asked Jan 30 '15 07:01

naCheex


People also ask

Can we have multiple controllers in AngularJS?

An AngularJS application can contain one or more controllers as needed, in real application a good approach is to create a new controller for every significant view within the application.

Can we have multiple Ng-controller?

If you really want to have two ng-controllers across a page you can do by separating divs. I have add some of my app. js codings in to the above post. I have two .

Can we have multiple modules in AngularJS?

Yes, you can define multiple modules in angularJS as given below. The modularization in AngularJS helps us to keep the code clarity and easy to understand, as we can combine multiple modules to generate the application.

What is $$ in AngularJS?

The $ in AngularJs is a built-in object.It contains application data and methods.


2 Answers

First, you should get rid of the global app variable. This is not necessary. Second, you have to understand the principle of the angular.module() method.

Using angular.module() with two parameters (e.g. angular.module('my-module', [])) would result in setting a new module with its corresponding dependencies. In contrast, when using angular.module('my-module') the corresponding module is looked up internally and returned to the caller (getting).

The means when you first define you application you might just create the following files and structure.

app.js

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

FirstController.js

angular.module('myApp').controller('FirstController', function () {});

SecondController.js

angular.module('myApp').controller('SecondController', function () {});

If you now include these files in your html document in this particularly order (at least app.js has to come first), your application works just fine with two separate controllers in two separate files.

Further readings

I can recommend the AngularJS Styleguide on modules for getting more ideas on this topic.

like image 197
fdomig Avatar answered Sep 27 '22 15:09

fdomig


You Can put this controller in seprate file like mycontroller1.js

    

    app.controller('myController', ['$scope',function($scope)    
        {
        $scope.myValue='hello World'
        }])


Same like this you can create new js file 'myNewcontroller.js' and can put new controller :



    app.controller('myController2', ['$scope',function($scope)    
        {
        $scope.myValue='hello World'
        }])


Hope this will help you :) Cheers !!

like image 3
Viral Pala Avatar answered Sep 30 '22 15:09

Viral Pala