How can i assign multiple controller within a body
Html
<script src="../MyApp.js"></script>
<script src="HomeCaller.js"></script>
<body ng-app="MyApp">
<div ng-controller="AppCtrls">{{secc}}</div>
<div ng-controller="HomeCtrls">{{jan}}</div>
</body>
MyApp.js
(function () {
'use strict'
var app = angular.module('MyApp', [])
app.controller('AppCtrls', function ($scope) {
$scope.secc = "Hello Angular"
})
})();
HomeCaller.js
angular.module('MyApp', [])
.controller('HomeCtrls', function ($scope) {
$scope.jan="Hello Jan"
})
Remove the [] from the module call so you do not try to re-create it. This will retrieve the existing MyApp module.
HomeCaller.js
angular.module('MyApp')
.controller('HomeCtrls', function ($scope) {
$scope.jan="Hello Jan"
})
Related
How to Define a new function in angular can anybody please help me out
My code is like this:
var app = angular.module('rtsApp', ['ngMaterial', 'ngMessages', 'ngStorage','ngRoute', 'restangular','timepickerPop', 'ngStomp', 'ngCookies', 'angular-cron-gen','uiSwitch','ngMaterial', 'md.data.table']);
app.config(function(RestangularProvider) {
newFunction(RestangularProvider);//I need newFunction here
RestangularProvider.setDefaultHeaders({
"X-API-KEY": "sks#2017",
"Content-Type": "application/json"
});
Actually I am Getting This Error
Failed to instantiate module rtsApp due to:
ReferenceError: newFunction is not defined
at http://localhost:3000/dist/js/scripts.min.js:1738:5
at Object.invoke (http://localhost:3000/dist/js/vendor.min.js:82:460)
at d (http://localhost:3000/dist/js/vendor.min.js:80:333)
at http://localhost:3000/dist/js/vendor.min.js:80:472
at q (http://localhost:3000/dist/js/vendor.min.js:46:7)
at g (http://localhost:3000/dist/js/vendor.min.js:80:234)
at gb (http://localhost:3000/dist/js/vendor.min.js:84:352)
at c (http://localhost:3000/dist/js/vendor.min.js:60:57)
at Wc (http://localhost:3000/dist/js/vendor.min.js:60:370)
at ye (http://localhost:3000/dist/js/vendor.min.js:59:45)
try it :-
another scenario is follow below code,
'use strict';
var deck = angular.module('app',
['ui.router',other lib...]);
angular.module("app").config(["$breadcrumbProvider", "$httpProvider", function ($breadcrumbProvider, $httpProvider) {
$breadcrumbProvider.setOptions({
prefixStateName: 'userHome.main',
template: 'bootstrap3'
});
//Do No Remove This Line
$httpProvider.defaults.withCredentials = true;
}]);
Create a file and define a module in the file. For example create globalFunctions.js and add this file to your index.html file with this :
<script src="/path/to/file/location/globalFunctions.js"></script>
Define a module and also your global functions. like this:
(function () {
angular.module('test', []);
})();
function test() {
console.log("test");
}
Inject it in main app (app.module.js) and call it:
(function() {
'use strict';
var app = angular.module('app', [
'test',
...
]);
app.config(function($routeProvider, $locationProvider) {
test();
});
})();
Update
All files for a simple test:
app.module.js
(function () {
var app = angular.module('app', [
'ngRoute',
'global'
]);
app.config(function ($routeProvider, $locationProvider) {
test();
});
})();
test.module.js
(function () {
angular.module('global', []);
})();
function test() {
console.log("it is test function here");
}
index.html
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<script src="https://code.angularjs.org/1.2.16/angular-route.min.js"></script>
<script src="app.module.js"></script>
<script src="test.module.js"></script>
<body ng-app="app">
<h2>It is a test</h2>
</body>
</html>
This Plunker provided for my solution
I am tring to get the data using rxjs from promise method, and once it is success am subscribing it and passing it to my scope.
I can see the response object attached to my scope, but in UI, it is not getting mapped.
This is what I tried.
index html:
<html>
<head></head>
<body>
<my-component></my-component>
<script src="rx.lite.js"></script>
<script src="angular.min.js"></script>
<script src="rx.angular.js"></script>
<script src="app.js"></script>
<script src="service.js"></script>
<script src="component.js"></script>
</body>
</html>
app.js:
(function() {
'use strict';
angular.module('app', ['rx']);
})();
service.js:
;(function (undefined) {
'use strict';
angular.module('app').factory('myService', ['$http', '$q', 'rx',function($http, $q, rx) {
function httpReq(configObj){
var deferred = $http(configObj);
return rx.Observable
.fromPromise(deferred)
.map(function(response){ return response.data; });
}
return {
httpReq : httpReq
}
}]);
}.call(this));
component.js:
;(function (undefined) {
'use strict';
angular.module('app').component('myComponent', {
templateUrl: "myComponent.tpl.html",
controller: ['myService', 'rx', Ctrl]
});
function Ctrl(myService, rx) {
var $ctrl = this;
myService.httpReq({ url: ' http://localhost:3000/posts/1', method: 'GET'})
.subscribe(function(val) {
$ctrl.list = val;
}.bind(this));
}
}.call(this));
myComponent.tpl.html:
<div ng-if="$ctrl.list">{{$ctrl.list}}</div>
You have to call $apply() because $scope is modified outside of the $digest cycle (not sure though).
I get the following error when adding a directive to my site:
Error: [ng:areq] Argument 'MainController' is not a function, got undefined
The error only occurs when I include the welcome-directive (welcome.js) in my site. If the import is removed the controller works.
Body of my index.html
<body ng-app="my-app">
<div ng-controller="MainController">
<welcome></welcome>
</div>
<!-- Angular -->
<script src="bower_components/angular/angular.js"></script>
<script src="js/app.js"></script>
<script src="js/controllers/mainController.js"></script>
<!-- Without this line the controller works -->
<script src="js/directives/welcome.js"></script>
</body>
app.js
(function() {
var app = angular.module('my-app', []);
})();
mainController.js
angular.module('my-app', [])
.controller('MainController', ['$scope', function($scope) {
console.log('Controller working');
}]);
welcome.js
angular.module('my-app', [])
.directive("welcome", function() {
return {
restrict: "E",
template: "<div>Test test.</div>"
};
});
You are redefining the module. Define module only once.
when used as angular.module('my-app', []) it defined the module this should be used only once. When you want retrieve it. then use angular.module('my-app')
Use
angular.module('my-app') //Notice remove []
.directive("welcome", function() {
});
passing a 2nd argument like this angular.module('my-app', []) creates a new module, use it only once.
To retrive a module use var module = angular.module('my-app') and use module.controller(... or module.directive(.... etc.,
I wrote a simple Angular application and for my routing i used ui.router, but i am getting this error:
Argument 'loginController' is not a function, got undefined
modules.js:
(function () {
'use strict';
angular.module('account', ['ui.router']);
angular.module('app', ['account', 'ui.router']);
})();
routeConfig.js:
(function () {
'use strict';
var account = angular.module('account');
account.config(function ($stateProvider, $urlRouterProvider) {
// For any unmatched url
$urlRouterProvider.otherwise('/login');
$stateProvider
.state('login', {
url: '/login',
templateUrl: '/app/components/account/login.html',
controller: 'loginController'
});
});
})();
account.js:
(function () {
'use strict';
var account = angular.module('account');
account.controller('loginController', ['$scope', loginController]);
function loginController($scope) {
$scope.Title = 'login';
};
});
index.html:
<!DOCTYPE html>
<html ng-app="app">
<head>
<title></title>
</head>
<body>
<div ui-view>
</div>
<script src="Scripts/jquery-1.9.1.js"></script>
<script src="Scripts/angular.js"></script>
<script src="Scripts/angular-ui-router.js"></script>
<script src="app/modules.js"></script>
<script src="app/routeConfig.js"></script>
<script src="app/components/account/account.js"></script>
</body>
</html>
login.html:
<h4>{{Title}}</h4>
I'm new to ui.router, and the error come from route config.
Thanks for any help
When you use injection, that's not the way to do it.
If your function is separate from account.controller, use $inject:
account.controller('loginController', loginController);
...
loginController.$inject = ['$scope'];
function loginController($scope) {
...
}
Direct injection is only used when the body is inside account.controller.
account.controller('loginController', ['$scope', function($scope) {
...
}]);
Also, it seems your account.js file has an invalid IIFE - (function(){...}); instead of (function(){...})();
I think you need to remove $scope from the controller declaration as given below:
(function () {
'use strict';
var account = angular.module('account');
account.controller('loginController', loginController);
function loginController($scope) {
$scope.Title = 'login';
};
});
I am new to Angularjs and currently practising it .I have a simple example like this .
My View Index.cshtml
<div ng-app="MyApp">
<div class="show-scope-demo">
<div ng-controller="MainController">
<p>Good {{timeOfDay}}, {{name}}!</p>
<div ng-controller="subController1">
<p>Good {{timeOfDay}}, {{name}}!</p>
<div ng-controller="subController2">
<p>Good {{timeOfDay}}, {{name}}!</p>
</div>
</div>
</div>
</div>
</div>
and my controller is MyJsScript.js
(function (angular) {
angular.module('MyApp', []).controller('MainController', ['$scope', function ($scope) {
$scope.timeOfDay = 'morning';
$scope.name = 'sapan';
}]);
angular.module('MyApp', []).controller('subController1', ['$scope', function ($scope) {
$scope.name = 'sapan';
}]);
angular.module('MyApp', []).controller('subController2', ['$scope', function ($scope) {
$scope.timeOfDay = 'Evening';
$scope.name = 'Tapan';
}]);
})(window.angular);
in this case I am getting error
"[ng:areq] Argument 'MainController' is not a function, got undefined"
But if I am changing my controller like this
(function (angular) {
var myApp = angular.module('MyApp', []);
myApp.controller('MainController', ['$scope', function ($scope) {
$scope.timeOfDay = 'morning';
$scope.name = 'sapan';
}]);
myApp.controller('subController1', ['$scope', function ($scope) {
$scope.name = 'sapan';
}]);
myApp.controller('subController2', ['$scope', function ($scope) {
$scope.timeOfDay = 'Evening';
$scope.name = 'Tapan';
}]);
})(window.angular);
It is working perfectly without any error .
Can anyone please tell me what is the exact difference between these two syntax.
Every time you call
angular.module('MyApp', [])
you're defining a new module named "MyApp" (and thus effectively overwrite the module that was previously defined with the same name).
To get a reference to a previously defined module named "MyApp", the correct syntax is
angular.module('MyApp')
without the array of dependencies.