I can't get the provider injected in my config section, here my code:
<!-- they are placed in that order -->
<script src="app/components/department/DepartmentController.js"></script>
<script src="app/components/department/DepartmentProvider.js"></script>
<script src="app/components/department/DepartmentService.js"></script>
<script src="app/components/department/support/SupportController.js"></script>
<script src="app/components/department/support/SupportRouter.js"></script>
Department.js
var departmentModule = angular.module('module.department', ['ngResource']);
// departmentModule.controller('DepartmentController', function($scope) {
// nothing here
// });
DepartmentService.js:
departmentModule.factory('Department', function($http) {
return {
getAll : function(){
return $http.get('/api/departments');
},
getByName : function(name){
return $http.get('/api/department/'+name);
}
};
});
DepartmentProvider.js:
departmentModule.provider('Department', function() {
var name = 'marwen';
this.$get = function() {
return {
name: name
};
};
});
SupportRouter.js :
supportModule.config(function($stateProvider, $urlRouterProvider,$locationProvider,DepartmentProvider) {
...
I get this error: Unknown provider: DepartmentProvider
Department provider has been overridden by the Department service, you need to specify the different name for provider & service, Both can not be with a same name, The latest one will get register. As you are loading service after provider. Service gets register with in Angular App & the provider is not available inside config.
Try to change supportModule.config(function($stateProvider, $urlRouterProvider,$locationProvider,DepartmentProvider) to supportModule.config(function($stateProvider, $urlRouterProvider,$locationProvider,Department)
or change your provider name from Department to DepartmentProvider
Related
I have a module like this :
var master = angular.module('master', ['DataService'])
master.controller('MasterController', function ($scope, MasterOp) {
$scope.status;
$scope.reports;
$scope.data = {
singleSelect: "all",
flag : "true"
};
$scope.filter = function() {
$scope.data.flag = "false";
};
$scope.groupBy = {
pubid : "false",
sid : "false",
device : "false"
};
$scope.getMasterReports = function() {
$scope.user = JSON.parse(sessionStorage.response);
//alert($scope.groupBy.pubid+"ak");
MasterOp.getMasterReport($scope.sdate,$scope.edate,$scope.user.pubProfile.pubid,$scope.groupBy.pubid,$scope.groupBy.sid,$scope.groupBy.device)
.success(function (data) {
$scope.reports = JSON.parse(data.report);
$scope.metrics= $scope.user.pubProfile.metrics;
})
.error(function (error) {
$scope.status = 'Unable to load customer data: ' + error.message;
});
};
$scope.logout = function(){
window.location.href="/AnalyticsMaster/index.html";
};
$scope.tab2 = function()
{
$scope.groupBy.sid="true";
$scope.groupBy.pubid="false";
$scope.data.flag = "true";
$scope.data.SingleSelect = "all";
$scope.reports=null;
$scope.getMasterReports();
};
$scope.tab3 = function()
{
$scope.groupBy.pubid="true";
$scope.groupBy.sid="false";
$scope.data.SingleSelect = "all";
$scope.data.flag = "true";
$scope.reports=null;
$scope.getMasterReports();
};
$scope.tab1 = function()
{
$scope.groupBy.pubid="false";
$scope.groupBy.sid="false";
$scope.data.flag = "true";
$scope.data.SingleSelect = "all";
$scope.reports=null;
$scope.getMasterReports();
};
});
When i trying to add more module in this it stop working. I am not able to understand why its happening.
For Example if i add like this its not working even adding any other module also its stop working.
var master = angular.module('master',['myApp','DataService'])
var master = angular.module('master',['ui.directives','ui.filters','DataService'])
Both cases it stop working. Please help me to understand what i am doing wrong.
Index.html
when adding multiple modules in your project make sure you have a ref to it in your index html. like this
<!-- Angular Modules -->
<script type="text/javascript" src="app/app.module.js"></script>
<script type="text/javascript" src="app/app.routes.js"></script>
<script type="text/javascript" src="app/components/home/homeCtrl.js"></script>
Or non custom modules
<!-- Angular links -->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular-animate.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.15/angular-ui-router.js"></script>
Its the same as adding any script.
Main Module
The second thing you do is add them to your main module like this
var app = angular.module("myApp", [
'ui.bootstrap',
'ngAnimate',
'myAppRouter',
'myAppHomeCtrl',
'myAppHomeService',
'myAppNavbarDirective',
'myAppNavbarService',
'myAppLoginCtrl',
'myAppLoginService'
]);
Live Example
The best practice in angular is to create a module for each of your features. I've been working on a project here is a link to the project, feel free to fork or clone it to get a good look at the structure.
You are declaring the same module name repeatedly.
You only declare a module once. The module function requires the second argument for dependency array when you declare it.
After that when you want to add components to that module you use the module getter which doesn't have the dependency array argument
// declare a new module
angular.module('master', ['DataService']); // has another module dependency
// add components to existing module
angular.module('master').controller(....;
// add the dependency module shown in "master"
angular.module('DataService', []);// might also have different dependencies here
I would like to pass some static configuration data from my server (.NET, PHP) to my Angular application. I don't want to call a web service for this.
In this question a javascript block is generated, but I don't want this.
How do I pass a value from main html to partials?
What's the best way to do this?
I was thinking of using the ng-init directive for this:
<div data-ng-app="MyApp" data-ng-init="foo='bar'">
Or is there a better way?
What I would recommend doing is using constants in angular. This is an example of one that I have used in a project (the #Url.Content part is c#, but I think you will get the idea).
<script>
angular.module('App.ConfigurationSettings', [])
.constant('ApiBaseUrl','#Url.Content("~/api/")')
.constant('WebBaseUrl','#Url.Content("~")');
</script>
and then when we actually use those constants in our service it looks like this:
var app = angular.module('App.BrandService', ['App.ConfigurationSettings']);
app.factory("BrandService", function ($http, $q, ApiBaseUrl) {
return {
getBrand: function (brandId) {
var deferred = $q.defer();
var url = ApiBaseUrl + 'brands/' + brandId + '.json';
return HttpGet($http, url, deferred);
},
getBrands: function () {
var deferred = $q.defer();
var url = ApiBaseUrl + 'brands.json';
return HttpGet($http, url, deferred);
}
};
});
Usually static information is configurable and related to some service. If so, I would create a provider (which is just a specialized service) and configure it in your config function.
Here is the Angular documentation on Providers
Create a Provider
myApp.provider('tooltip', function () {
var version;
var author;
this.setVersion= function(value) {
version = value;
};
this.setAuthor = function(value) {
author = value;
};
this.$get = function (/* injectibles go here */) {
return {
version: version,
author: author,
etc...
};
};
});
Configure the Provider
When you inject your provider in your config function, make sure that you append 'Provider':
myApp.config(function(tooltipProvider) {
tooltipProvider.setVersion('1.0');
tooltipProvider.setAuthor('John Smith');
// more configuration of static data
});
Using the Provider
Inject the provider where you need it, and make use of your static data. Here, we are binding the static data to scope so that we can display it in the view.
// JS
app.controller('ctrl', function($scope, tooltip) {
$scope.version = tooltip.version;
$scope.author = tooltip.author;
});
// HTML
<div ng-controller='ctrl'>
Tooltip Plugin: <br />
Version: {{ version }} <br />
Author: {{ author }} <br />
</div>
for some reason unknown to me, I can't get the controller scope to update the view,
even though apply is running and the scope itself has been updated.
I know that because when I console.log(data) I see its been updated.
userList directive should assign data.activeUser property on controller's scope.
its working, but the view is not updating accordingly
Link to the demo: http://jsbin.com/mojemiki/6/edit
var app = angular.module('app', []);
app.controller('myCtrl', function ($scope) {
$scope.data = {
users : [{
name : 'bob'
},{
name : 'koko'
}],
activeUser : {}
};
$scope.selectUser = function (user) {
// console is showing user data
console.log(user);
$scope.data.activeUser = user;
console.log($scope.data.activeUser);
// data.activeUser has been updated, but the view is not. why is that?
// $scope.$apply() - is not helping
// because its aleady running
};
});
app.directive('userList', function () {
return {
scope : {
users : '=',
onSelect : '&'
},
template : '<h3>in directive scope</h3>' +
'<button ng-repeat="u in users" ng-click="onSelect({ user : u })">Set Active User: {{u.name}}</button>' +
'<br/><code>{{users}}</code>'
};
});
The problem is that you are including Angular.js twice (version 1.2.1 from Cloudflare CDN and version 1.2.14 from Google CDN) and this is causing some kind of conflict. Remove one of them and it will work.
<script src="http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.1/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.14/angular.js"></script>
Here is your fiddle.
I'm using Require.js in combination with Angular.js.
Some controllers need huge external dependencies which others don't need, for example, FirstController requires Angular UI Codemirror. That's a extra 135 kb, at least:
require([
"angular",
"angular.ui.codemirror" // requires codemirror itself
], function(angular) {
angular.module("app", [ ..., "ui.codemirror" ]).controller("FirstController", [ ... ]);
});
I don't want to have to include the directive and the Codemirror lib everytime my page loads just to make Angular happy.
That's why I'm right now loading the controller only when the route is hit, like what's done here.
However, when I need something like
define([
"app",
"angular.ui.codemirror"
], function(app) {
// ui-codemirror directive MUST be available to the view of this controller as of now
app.lazy.controller("FirstController", [
"$scope",
function($scope) {
// ...
}
]);
});
How can I tell Angular to inject ui.codemirror module (or any other module) in the app module aswell?
I don't care if it's a hackish way to accomplish this, unless it involves modifying the code of external dependencies.
If it's useful: I'm running Angular 1.2.0.
I have been trying to mix requirejs+Angular for some time now. I published a little project in Github (angular-require-lazy) with my effort so far, since the scope is too large for inline code or fiddles. The project demonstrates the following points:
AngularJS modules are lazy loaded.
Directives can be lazy loaded too.
There is a "module" discovery and metadata mechanism (see my other pet project: require-lazy)
The application is split into bundles automatically (i.e. building with r.js works)
How is it done:
The providers (e.g. $controllerProvider, $compileProvider) are captured from a config function (technique I first saw in angularjs-requirejs-lazy-controllers).
After bootstraping, angular is replaced by our own wrapper that can handle lazy loaded modules.
The injector is captured and provided as a promise.
AMD modules can be converted to Angular modules.
This implementation satisfies your needs: it can lazy-load Angular modules (at least the ng-grid I am using), is definitely hackish :) and does not modify external libraries.
Comments/opinions are more than welcome.
(EDIT) The differentiation of this solution from others is that it does not do dynamic require() calls, thus can be built with r.js (and my require-lazy project). Other than that the ideas are more or less convergent across the various solutions.
Good luck to all!
Attention: use the solution by Nikos Paraskevopoulos, as it's more reliable (I'm using it), and has way more examples.
Okay, I have finally found out how to achieve this with a brief help with this answer.
As I said in my question, this has come to be a very hacky way. It envolves applying each function in the _invokeQueue array of the depended module in the context of the app module.
It's something like this (pay more attention in the moduleExtender function please):
define([ "angular" ], function( angular ) {
// Returns a angular module, searching for its name, if it's a string
function get( name ) {
if ( typeof name === "string" ) {
return angular.module( name );
}
return name;
};
var moduleExtender = function( sourceModule ) {
var modules = Array.prototype.slice.call( arguments );
// Take sourceModule out of the array
modules.shift();
// Parse the source module
sourceModule = get( sourceModule );
if ( !sourceModule._amdDecorated ) {
throw new Error( "Can't extend a module which hasn't been decorated." );
}
// Merge all modules into the source module
modules.forEach(function( module ) {
module = get( module );
module._invokeQueue.reverse().forEach(function( call ) {
// call is in format [ provider, function, args ]
var provider = sourceModule._lazyProviders[ call[ 0 ] ];
// Same as for example $controllerProvider.register("Ctrl", function() { ... })
provider && provider[ call[ 1 ] ].apply( provider, call[ 2 ] );
});
});
};
var moduleDecorator = function( module ) {
module = get( module );
module.extend = moduleExtender.bind( null, module );
// Add config to decorate with lazy providers
module.config([
"$compileProvider",
"$controllerProvider",
"$filterProvider",
"$provide",
function( $compileProvider, $controllerProvider, $filterProvider, $provide ) {
module._lazyProviders = {
$compileProvider: $compileProvider,
$controllerProvider: $controllerProvider,
$filterProvider: $filterProvider,
$provide: $provide
};
module.lazy = {
// ...controller, directive, etc, all functions to define something in angular are here, just like the project mentioned in the question
};
module._amdDecorated = true;
}
]);
};
// Tadaaa, all done!
return {
decorate: moduleDecorator
};
});
After this has been done, I just need, for example, to do this:
app.extend( "ui.codemirror" ); // ui.codemirror module will now be available in my application
app.controller( "FirstController", [ ..., function() { });
The key to this is that any modules your app module depends on also needs to be a lazy loading module as well. This is because the provider and instance caches that angular uses for its $injector service are private and they do not expose a method to register new modules after initialization is completed.
So the 'hacky' way to do this would be to edit each of the modules you wish to lazy load to require a lazy loading module object (In the example you linked, the module is located in the file 'appModules.js'), then edit each of the controller, directive, factory etc calls to use app.lazy.{same call} instead.
After that, you can continue to follow the sample project you've linked to by looking at how app routes are lazily loaded (the 'appRoutes.js' file shows how to do this).
Not too sure if this helps, but good luck.
There is a directive that will do this:
https://github.com/AndyGrom/loadOnDemand
example:
<div load-on-demand="'module_name'"></div>
The problem with existing lazy load techniques is that they do things which I want to do by myself.
For example, using requirejs, I would like to just call:
require(['tinymce', function() {
// here I would like to just have tinymce module loaded and working
});
However it doesn't work in that way. Why? As I understand, AngularJS just marks the module as 'to be loaded in the future', and if, for example, I will wait a bit, it will work - I will be able to use it. So in the function above I would like to call some function like loadPendingModules();
In my project I created simple provider ('lazyLoad') which does exactly this thing and nothing more, so now, if I need to have some module completely loaded, I can do the following:
myApp.controller('myController', ['$scope', 'lazyLoad', function($scope, lazyLoad) {
// ........
$scope.onMyButtonClicked = function() {
require(['tinymce', function() {
lazyLoad.loadModules();
// and here I can work with the modules as they are completely loaded
}]);
};
// ........
});
here is link to the source file (MPL license):
https://github.com/lessmarkup/less-markup/blob/master/LessMarkup/UserInterface/Scripts/Providers/lazyload.js
I am sending you sample code. It is working fine for me. So please check this:
var myapp = angular.module('myapp', ['ngRoute']);
/* Module Creation */
var app = angular.module('app', ['ngRoute']);
app.config(['$routeProvider', '$controllerProvider', function ($routeProvider, $controllerProvider) {
app.register = {
controller: $controllerProvider.register,
//directive: $compileProvider.directive,
//filter: $filterProvider.register,
//factory: $provide.factory,
//service: $provide.service
};
// so I keep a reference from when I ran my module config
function registerController(moduleName, controllerName) {
// Here I cannot get the controller function directly so I
// need to loop through the module's _invokeQueue to get it
var queue = angular.module(moduleName)._invokeQueue;
for (var i = 0; i < queue.length; i++) {
var call = queue[i];
if (call[0] == "$controllerProvider" &&
call[1] == "register" &&
call[2][0] == controllerName) {
app.register.controller(controllerName, call[2][1]);
}
}
}
var tt = {
loadScript:
function (path) {
var result = $.Deferred(),
script = document.createElement("script");
script.async = "async";
script.type = "text/javascript";
script.src = path;
script.onload = script.onreadystatechange = function (_, isAbort) {
if (!script.readyState || /loaded|complete/.test(script.readyState)) {
if (isAbort)
result.reject();
else {
result.resolve();
}
}
};
script.onerror = function () { result.reject(); };
document.querySelector(".shubham").appendChild(script);
return result.promise();
}
}
function stripScripts(s) {
var div = document.querySelector(".shubham");
div.innerHTML = s;
var scripts = div.getElementsByTagName('script');
var i = scripts.length;
while (i--) {
scripts[i].parentNode.removeChild(scripts[i]);
}
return div.innerHTML;
}
function loader(arrayName) {
return {
load: function ($q) {
stripScripts(''); // This Function Remove javascript from Local
var deferred = $q.defer(),
map = arrayName.map(function (obj) {
return tt.loadScript(obj.path)
.then(function () {
registerController(obj.module, obj.controller);
})
});
$q.all(map).then(function (r) {
deferred.resolve();
});
return deferred.promise;
}
};
};
$routeProvider
.when('/first', {
templateUrl: '/Views/foo.html',
resolve: loader([{ controller: 'FirstController', path: '/MyScripts/FirstController.js', module: 'app' },
{ controller: 'SecondController', path: '/MyScripts/SecondController.js', module: 'app' }])
})
.when('/second', {
templateUrl: '/Views/bar.html',
resolve: loader([{ controller: 'SecondController', path: '/MyScripts/SecondController.js', module: 'app' },
{ controller: 'A', path: '/MyScripts/anotherModuleController.js', module: 'myapp' }])
})
.otherwise({
redirectTo: document.location.pathname
});
}])
And in HTML Page:
<body ng-app="app">
<div class="container example">
<!--ng-controller="testController"-->
<h3>Hello</h3>
<table>
<tr>
<td>First Page </td>
<td>Second Page</td>
</tr>
</table>
<div id="ng-view" class="wrapper_inside" ng-view>
</div>
<div class="shubham">
</div>
</div>
I am trying to write unit tests for my Angular.js application but I cannot manage to inject what I need (it is not able to find a suitable provider).
Does anyone see what I missed?
Firefox 21.0 (Linux) filter staticList should convert static list object into its display value FAILED
Error: Unknown provider: staticListProvider <- staticList in /path/to/my-app/public/third-party/angular/angular.js (line 2734)
createInjector/providerInjector<#/path/to/my-app/public/third-party/angular/angular.js:2734
getService#/path/to/my-app/public/third-party/angular/angular.js:2862
createInjector/instanceCache.$injector<#/path/to/my-app/public/third-party/angular/angular.js:2739
getService#/path/to/my-app/public/third-party/angular/angular.js:2862
invoke#/path/to/my-app/public/third-party/angular/angular.js:2880
workFn#/path/to/my-app/test/lib/angular/angular-mocks.js:1778
angular.mock.inject#/path/to/my-app/test/lib/angular/angular-mocks.js:1764
#/path/to/my-app/test/unit/filtersSpec.js:19
#/path/to/my-app/test/unit/filtersSpec.js:16
#/path/to/my-app/test/unit/filtersSpec.js:3
The application:
angular.module('myApp', ['myAppFilters', 'ui.bootstrap', '$strap.directives']).
// Some other stuff
The filters:
"use strict";
angular.module('myAppFilters', []).
filter('staticList', function () {
return function (listItem) {
if (!listItem) {
return '';
}
return listItem.value;
};
});
The test:
'use strict';
describe('filter', function () {
beforeEach(angular.module('myAppFilters'));
describe('staticList', function () {
it('should convert static list object into its display value',
inject(function (staticList) {
expect(undefined).toBe('');
expect({key: 'A', value: 'B'}).toBe('B');
}));
});
});
The Karma configuration:
basePath = '../';
files = [
JASMINE,
JASMINE_ADAPTER,
'public/third-party/jquery/*.js',
'public/third-party/angular/angular.js',
'public/third-party/angular/i18n/angular-*.js',
'public/third-party/moment/moment.min.js',
'public/third-party/moment/moment-*.js',
'public/js/**/*.js',
'test/lib/**/*.js',
'test/unit/**/*.js'
];
colors = true;
autoWatch = true;
browsers = ['Firefox'];
junitReporter = {
outputFile: 'test_out/unit.xml',
suite: 'unit'
};
If anybody wants to see the full code, the application repository is here: https://github.com/adericbourg/GestionCourrier
Thanks a lot,
Alban
In your inject code
it('should convert static list object into its display value',
inject(function (staticList) {
expect(undefined).toBe('');
expect({key: 'A', value: 'B'}).toBe('B');
}));
replace "inject(function (staticList)" with "inject(function (staticListFilter)". This is some random convention angular is following. You can check comments on this page for more info http://docs.angularjs.org/tutorial/step_09
I faced similar problem, but in my case my filter name contained suffix 'Filter' which caused the same injection problem.
.filter('assetLabelFilter', function(){
return function(assets, selectedLabels){
// Implementation here
};
});
I was finally able to solve the problem by manually injecting the filter to my test
'use strict';
describe('assetLabelFilter', function() {
beforeEach(module('filters.labels'));
var asset1 = {labels: ['A']};
var asset2 = {labels: ['B']};
var asset3 = {labels: []};
var asset4 = {labels: ['A', 'B']};
var assets = [asset1, asset2, asset3, asset4];
var assetLabelFilter;
beforeEach(inject(function($filter) {
assetLabelFilter = $filter('assetLabelFilter');
}));
it('should return only assets with selected label', function() {
var selectedLabels = ['B'];
expect(assetLabelFilter(assets, selectedLabels)).toEqual([asset2, asset4]);
});
});
The nice answer above made me realize that in order to use the angular tutorial way:
it('should ', inject(function(assetLabelFilter) {
var selectedLabels = ['B'];
expect(assetLabelFilter(assets, selectedLabels)).toEqual([asset2, asset4]);
}));
The filter name can't have the suffix 'Filter' because it is magic word as mentioned in the answer above.
To demonstrate the scenario I also created a Plunker