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
Related
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).
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"
})
I'm trying to do a simple $anchorScroll but my controller is not working.
here's my module
(function () {
'use strict';
angular.module('app', [
'ui.bootstrap',
'app.article'
]);
})();
and here's my controller
(function () {
'use strict';
angular
.module('app.article')
.controller('Article', Article);
function Article($scope, $location, $anchorScroll) {
var vm = this;
vm.backToTop = backToTop;
function backToTop() {
$location.hash('top');
$anchorScroll();
}
}
})();
I'm adding the ng-app and the ng-controller correctly.
Any ideas?
here's the plunkr: https://plnkr.co/edit/Rnsahf24ds1pYWKz9Ete?p=preview
There are few things that you are missing in your code,
(i) You are refering to angular2 script while your code is defined for angular 1.3, so change the reference as
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.6/angular.js"></script>
(ii) You need to refer to bootstrap library and necessary css if you are injecting in angular application
<script type="text/javascript" src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.11.2.js"></script>
Here is the working App
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';
};
});
What do i have to do in myService.js to access the constant 'appSettings' from app.js?
app.js
(function () {
'use strict';
angular
.module('myApp', ['ngMaterial'])
.constant('appSettings', {
someValue: 123
})
})();
Here is my services/myService.js
(function () {
'use strict';
angular
.module('myApp')
.factory('myService', ['appSettings', MyService]);
function MyService(appSettings) {
console.log(appSettings.someValue)
}
})();
Browser's console says appSettings.someValue is undefined`
Not sure what is the problem you are facing but I can access the value.
(function() {
'use strict';
angular
.module('myApp', [])
.constant('appSettings', {
someValue: 123
})
})();
(function() {
'use strict';
angular
.module('myApp')
.factory('myService', ['appSettings', MyService]);
function MyService(appSettings) {
console.log(appSettings.someValue);
alert(appSettings.someValue);
return {
foo: function() {}
}
}
angular.module("myApp")
.controller("sa", function($scope, myService) {
myService.foo();
})
})();
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="sa"></div>