I am using angularjs in my application, by using ngDialog the page is not loading and shows blank page
I have used like
angular.module('pswApp', ['ngRoute', 'ngAnimate', 'ngTouch', 'ngDialog', 'ui.grid', 'myApp','newApp'])
.config(['$routeProvider',
function($routeProvider) {}]);
But the page is not loaded, when i use ngDialog in the module wherever i use it. I have used the ngDialog.js file in the common html file and i load the pages using ng route
Even i used it in another js file like this
angular.module('myApp', [ 'ngDialog' ]).controller('mainCtrl',
function($scope, ngDialog) {
});
The page is not getting loaded, is there any other way to solve this issue.
You are declaring module again while defining controller.
Injection should also be in controller.
angular.module('myApp', []).controller('mainCtrl', 'ngDialog',
function($scope, ngDialog) {
});
Related
I am very new to Angularjs. I have a single page application where index.html is the root page.it contains below content
index.html
//links to other pages
//ng-view
I have an app.js file linked to index.html which loads the respective pages when user clicks on links in index.html using ngRoute.
my app.js page looks something like this
app.js
'use strict';
angular.module('myApp', [ 'ngRoute', 'ngAnimate', 'ngSanitize',
'ui.bootstrap', 'checklist-model', 'blockUI','isteven-multi-select' ]);
var App = angular.module('myApp');
//ngroute code
Now a page search_name.html and search_name_controller.js loaded when user clicks on one of the links in index.html
search_name_controller looks something like this.
search_name_controller.js
'use strict';
App.controller('SearchCifCtrl', [ '$scope', '$location', '$uibModal',
'WorkflowService', 'ConstantService', function($scope, $location, $uibModal,
WorkflowService, ConstantService) {
//some code
} ]);
Snce it is a single page application angular.module statement is written only in app.js file. It is not written in any other js file. Now i want to test search_name_controller.js using KARMA.I have written test code like below
search_name_controller.test.js
describe('search_name_controller', function () {
beforeEach(function() {
module('myApp');
});
var $controller;
beforeEach(inject(function(_$controller_){
$controller = _$controller_;
}));
//code to test method
});
While i try to run this test, I am getting error as "$controller is not a function". i feel the error is because the angular.module part is not defined in search_name_controller.js file. When i try to add it ,i am able to run the test.But i am not allowed to make any changes to existing code. Is there any way where my test file can read angular.module part of app.js file even if i write test scenario for search_name_controller.js.
Kindly help
beforeEach(inject(function($controller){
controller = $controller('SearchCifCtrl', {
$scope: scope
});
}));
//try this to inject your controller
I am trying to create an Angular controller that has ngSanitize like in the example here https://docs.angularjs.org/api/ngSanitize/service/$sanitize
But I am not sure how to do this in CoffeeScript.
In the example in the docs, here's how a controller is being created with ngSanitize.
angular.module('sanitizeExample', ['ngSanitize'])
.controller('ExampleController', ['$scope', '$sce', function($scope, $sce)
Here is my current controller written in CoffeeScript:
app = angular.module 'example'
app.controller 'exampleController', ($scope, widgetSrv)
How would I add ngSanitize to this?
Change the second line of your controller to:
app = angular.module 'example', ['ngSanitize']
I am trying to include ngCookies in a project. The angular cookies library is included in my index.html after the ionic.bundle.
I can see on the network tab of the developer tools that it is actually loading. Angular doesn't show any error when loading the page, as it usually does when a module is missing. The problem is that, when in my code I try to access the functions of the $cookies service, the $cookies variable is actually pointing to an empty object.
Here are some relevant code snippets:
On the definition of my app.js
angular.module('myApp', [
'ionic',
'ngCookies',
'ngMessages',
'rt.eventemitter',
'myApp.views']);
On my factory:
angular.module('myApp.views')
.factory('UserStore', ['$rootScope', '$q', '$cookies', '$timeout',
function($rootScope, $q, $cookies, $timeout){
var user = {};
function setSessionId(sessionId){
console.log(">> setting sessionId to:",sessionId);
user.sessionId = sessionId;
$cookies.put('sessionId', user.sessionId);
}
return{ setSessionId:setSessionId}
}
]);
In this case, when I try to call the setSessionId method I get an error that $cookies.put is not a function since, as I mentioned above, $cookies is just an empty object.
Any Ideas?
it depends on which angular version you use!
they changed a lot in angular 1.4.. in angular 1.3 when you set a cookie you can just assign it:
$cookies.sessionId = user.sessionId;
I have created a webapp with MeanJS. I want to use ngDialog in the application, but not sure how and where to add the ngDialog.js in the application. Im trying to inject the ngDialog in the controller as shown below, but everytime error as unknown provider
angular.module('myModule').controller('MyController', ['$scope', '$http', 'ngDialog',
function ($scope, $http, ngDialog) {
error :
Error: [$injector:unpr] Unknown provider: ngDialogProvider <- ngDialog
Can anyone please let me know how to include the ngDialog in the meanjs application.
Thanks in advance
You should use bower to install ngDialog first. In your application root (where bower.json is located), issue the following command,
bower install --save ngDialog
Then, make sure you add ngDialog module in the app level. The following answer is specific to MEAN.JS.
In file public/config.js, find the line
var applicationModuleVendorDependencies = ['ngResource', 'ngCookies', 'ngAnimate', 'ngTouch', 'ngSanitize', 'ui.router', 'ui.bootstrap', 'ui.utils'];
Add 'ngDialog' to the end of the list
var applicationModuleVendorDependencies = ['ngResource', 'ngCookies', 'ngAnimate', 'ngTouch', 'ngSanitize', 'ui.router', 'ui.bootstrap', 'ui.utils', 'ngDialog'];
Then, include ngDialog's CSS and JavaScript file into the HTML template of the Angular application.
In file config/env/all.js, find assets.lib.css, append 'public/lib/ngDialog/css/ngDialog.min.css' to the list.
In the same file, find assets.lib.js, append 'public/lib/ngDialog/js/ngDialog.min.js' to the list.
You should add the ngDialog module in your module, like so:
angular.module('myModule', ['ngDialog']).controller('MyController'...
The original answer is still correct but for the new Mean.js 0.4 some stuff changed.
You still use
bower install --save ngDialog
to install ngDialog.
To add the dependency 'ngDialog' go to modules/core/client/app/config.js and add
var applicationModuleVendorDependencies = ['ngResource', 'ngCookies', 'ngAnimate', 'ngTouch', 'ngSanitize', 'ui.router', 'ui.bootstrap', 'ui.utils', 'ngDialog'];
Then this is where I struggled.
To include ngDialog's CSS and JavaScript file into the HTML template of the Angular application go to
config/assets/default.js
and under client.lib.css add 'public/lib/ng-dialog/css/ngDialog.min.css'
and client.lib.js add 'public/lib/ng-dialog/js/ngDialog.min.js' .
Note that the path of ngDialog changed to ng-dialog.
I am still relatively new to Ionic and AngularJS and I have the following problem: I created a service in the controller.js file and now need this service at loadup (app.js) to detect which start page I will route to. How can I export the service from controller.js into some other js file so that it will become available in both files app.js and controller.js.
Thanks,
EL
You import it using angular's dependency injection.
If your controller.js looks something like:
angular.module('myModule', [])
.service('myService', ['$scope', 'otherDependency', function($scope, otherDependency){
//some service code
}]);
Then the module you want to use the service in would need to import the module where the service is located and then inject the service itself. So something along the lines of:
angular.module('app', ['myModule'])
.controller('appCtrl', ['$scope', 'myService', function($scope, myService){
//some code using your service
}]);
This documentation might help:
AngularJS services - https://docs.angularjs.org/guide/services
AngularJS dependency injection - https://docs.angularjs.org/guide/di