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>
Related
I am getting headercontroller not defined error. I have reference this controller.js file in Index.html and is there anything i am missing
Controller.js
(function () {
'use strict';
angular
.module('myApp')
.controller('headerController', headerController);
headerController.$inject = ['$scope', '$http' ,'$rootScope'];
function headerController($scope, $http) {
var vm = this;
}
})();
app.js
(function () {
var myapp = angular.module('myApp', ["ui.router"]);
myapp.config(function ($stateProvider, $locationProvider, $urlRouterProvider) {
// For any unmatched url, send to /route1
$urlRouterProvider.otherwise("/route1")
$stateProvider
.state('route1', {
url: "/route1",
templateUrl: "SOC/Views/route1.html",
controller: "route1ctrl"
})
.state('route2', {
url: "/route2",
templateUrl: "SOC/Views/route2.html",
controller: "route2ctrl"
})
$locationProvider.html5Mode({
enabled: true,
requireBase: false
});
});
})();
Index.html
<script src="app.js"></script>
<script src="SOC/Directives/Header/controller.js"></script>
I tried even this below code it does not work
angular
.module('myApp', [])
.controller('headerController', headerController);
You are overwrite the dependency of the angular module by providing empty array
angular
.module('myApp', [])
.controller('headerController', headerController);
Remove the array from module('myApp)
angular
.module('myApp')
.controller('headerController', headerController);
Controller.js
(function () {
'use strict';
function headerController($scope, $http) {
var vm = this;
}
headerController.$inject = ['$scope', '$http' ,'$rootScope'];
angular
.module('myApp')
.controller('headerController', headerController);
})();
More about $inject in angularjs - https://docs.angularjs.org/guide/di
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
Would anyone know why my service is not being passed into controller. I receive an error: Argument 'fn' is not a function.
references within my main web page:
<script src="~/js/app-categories.js"></script>
<script src="~/js/addingNewTaskService.js"></script>
<script src="~/js/addNewTaskController.js"></script>
app-categories.js:
(function () {
"use strict";
angular.module("app-categories", ["simpleControls", "ngRoute", "ngAnimate", "addNewTask"])
.config(function ($routeProvider) {
...
});
})();
addingNewTaskService.js:
(function () {
"use strict";
alert("inside service");
angular.module("app-categories")
.service('addingNewTaskService'), function () {
};
})();
addNewTaskController.js:
(function () {
"use strict";
angular.module("app-categories")
.controller("addNewTaskController", addNewTaskController);
function addNewTaskController($scope, $http, addingNewTaskService) {
...
}
})();
You have a syntax error here:
.service('addingNewTaskService'), function () {
};
That should be:
.service('addingNewTaskService', function() {
});
I have sample on Angular JS as:
angular.module('wm-admin', []).
config(function($routeProvider) {
$routeProvider.
when('/users', {controller:UsersController, templateUrl:'/public/html/crm/users/list.html'}).
otherwise({redirectTo:'/users'});
});
// Controllers //
function UsersController($scope) {
}
It gives me error:
Uncaught Error: [$injector:modulerr]
So, what I do wrong?
HTML:
<body ng-app="wm-admin">
</body>
I tried also any code:
Angular JS:
(function (angular) {
'use strict';
angular.module('wm-admin', [])
.config(function($routeProvider) {
$routeProvider.
when('/users', {controller:UsersController, templateUrl:'/public/html/crm/users/list.html'}).
otherwise({redirectTo:'/users'});
})
// Controllers //
.controller('UsersController', ['$scope', '$http', function ($scope, $http) {
}])
})(window.angular);
Look please code upper
You haven't injected the controller properly to your app. Add this line:
angular.module('wm-admin').controller('UsersController', UsersController);
EDIT
In your updated question you have this code:
(function (angular) {
'use strict';
angular.module('wm-admin', [])
.config(function($routeProvider) {
$routeProvider.
when('/users', {controller:UsersController, templateUrl:'/public/html/crm/users/list.html'}).
otherwise({redirectTo:'/users'});
})
// Controllers //
.controller('UsersController', ['$scope', '$http', function ($scope, $http) {
}])
})(window.angular);
But now UsersController is no longer a function within the scope of the {controller: UsersController} line. Change it to controller: 'UsersController' (string, not reference to a function):
(function (angular) {
'use strict';
angular.module('wm-admin', [])
.config(function($routeProvider) {
$routeProvider.
when('/users', {controller: 'UsersController', templateUrl:'/public/html/crm/users/list.html'}).
otherwise({redirectTo:'/users'});
})
// Controllers //
.controller('UsersController', ['$scope', '$http', function ($scope, $http) {
}])
})(window.angular);
You never actually made a controller.
angular
.module('wm-admin')
.controller('UsersController', UsersController);
UsersController.$inject = ['$scope'];
function UsersController($scope) {
}
Example... Plunker
addon.js:
(function () {
'use strict';
angular.module('jzAddons', [])
.factory('jzThemeFac', function () {
return {
themes:[
{
name: 'none',
url: '',
margin: '8px',
bg: '#ffffff'
},
{
name: 'amelia',
url: '//netdna.bootstrapcdn.com/bootswatch/3.1.0/amelia/bootstrap.min.css',
margin: '6px',
bg: '#108a93'
}
],
changeTheme: function (theme) {
var oldLink = angular.element('#bootstrapTheme');
oldLink.remove();
if (theme.name !== 'none') {
var head = angular.element('head');
head.append('<link id="bootstrapTheme" href="' + theme.url + '" rel="stylesheet" media="screen">');
}
currentTheme = theme;
}
};
});
})();
app.js:
var app = angular.module('example', ['jzAddons']);
(function () {
'use strict';
app.controller('MainCtrl', ['jzThemeFac', function ($scope, jzThemeFac) {
$scope.themes = jzThemeFac.themes; /* Error comes from this line */
}]);
})();
At the bottom of my body tag I've got:
<script src="addon.js"></script>
<script src="app.js"></script>
I keep getting the error:
TypeError: Cannot read property 'themes' of undefined
Your factory inject was wrong, you can do:
app.controller('MainCtrl', ['$scope', 'jzThemeFac', function ($scope, jzThemeFac) {...
or just:
app.controller('MainCtrl', function ($scope, jzThemeFac) {
edit: you can also move:
(function () {
'use strict';
to the beginning of file
You need to remember to inject $scope into your MainCtrl. So app.js should look like this:
var app = angular.module('example', ['jzAddons']);
(function () {
'use strict';
app.controller('MainCtrl', ['$scope', 'jzThemeFac', function ($scope, jzThemeFac) {
$scope.themes = jzThemeFac.themes; /* Error comes from this line */
}]);
})();