I'm working on an angularjs app, it uses ui-select but it only works on chrome.
I don't provide code because it works well in a plunker.
Have you ever see this kind of behaviour, i'm suspecting a conflict with another angular module.
Here is the list of modules that i am using.
'ngAnimate',
'ngCookies',
'ngResource',
'ngSanitize',
'ngTouch',
'ui.router',
'pascalprecht.translate',
'ui.bootstrap',
'ui.select',
'ngLodash',
'ngIntlTelInput',
'angularjs-dropdown-multiselect',
'AxelSoft',
'ngFileUpload',
'toastr',
'tmh.dynamicLocale'
Related
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) {
});
I am building my website based on MEAN stack and I am having trouble with angular routing on mobile browsers for which I am using client side routing with ngRoute.
The site works fine in every possible desktop browser, even the mobile design (it has a different menu than the desktop version), but on mobile browsers I have to click about 10 times before the menu responds in both versions (desktop and mobile - depends on the resolution of the browser), that goes for every link inside the website. I have tried googling but have not found anyone with similar issues.
Can anyone point me in the direction of where do I start troubleshooting this? I am using ngAnimate for ng-view animations and some css transitions for the menu borders.
The development version of the website can be found here: http://meanapp1-boilerplatesand.rhcloud.com
Excuse the foreign language, the content isn't the issue here anyway.
Routes code:
var app = angular.module('myApp', [
'ngRoute',
'angular-carousel',
'ngTouch',
'ngAnimate',
'ngResource',
'myApp.domov',
'myApp.onas',
'myApp.fotogalerija',
'myApp.fotogalerija.single',
'myApp.novice',
'myApp.novice.single',
'myApp.kontakt',
'myApp.storitve',
'myApp.version',
'myApp.admin',
'myApp.meni',
'duScroll'
]).
config(['$routeProvider', function($routeProvider) {
$routeProvider.otherwise({redirectTo: '/domov'});
}]);
And then for every module declared I have more or less the same code:
'use strict';
angular.module('myApp.novice', ['ngRoute', 'ngResource', 'myApp.novice.single'])
.config(['$routeProvider', function($routeProvider) {
$routeProvider.when('/novice', {
templateUrl: 'novice/novice.html',
controller: 'noviceCtrl'
});
}])
I have declared modules that aren't acessible from the main menu as submodules of menu item modules. The routing code:
'use strict';
angular.module('myApp.fotogalerija.single', ['ngRoute', 'ngResource', 'angular-carousel'])
.config(['$routeProvider', function($routeProvider) {
$routeProvider.when('/fotogalerija/:item/single', {
templateUrl: 'fotogalerija/single/single.html',
controller: 'singleCtrl'
});
$routeProvider.when('/fotogalerija/:item/single/:index', {
templateUrl: 'fotogalerija/single/single.html',
controller: 'singleCtrl'
});
}])
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 having issues injecting Angulartics into my application. When I include Angulartics, I get the following error:
Unknown provider: $routeParamsProvider <- $routeParams <- $route
I am following this guide.
This is my code snippet for injecting the dependencies in app.js:
angular.module('parrotApp',
['parrotApp.filters', 'parrotApp.services', 'parrotApp.url', 'parrotApp.directives',
...
'lvl.directives.dragdrop', 'ui.bootstrap',
'ui.compat', 'spinner.directive', 'ngSanitize', 'ngAnimate', 'angularFileUpload',
'angular-hallo', 'ui.grid', 'ui.grid.pagination', 'ui.grid.autoResize',
'ui.grid.selection', 'angulartics', 'angulartics.google.analytics'])
.config([
'$routeProvider', '$stateProvider', 'QUERY_PARAMS', '$httpProvider',
/**
* Define the routings
* #param $routeProvider
* #param $stateProvider
*/
function($routeProvider, $stateProvider, QUERY_PARAMS, $httpProvider) {
...
})
]);
This is my code snippet for including the dependencies in home.jsp:
<!-- Google Analytics -->
<script src="/app/lib/analytics/analytics.js"></script>
<!-- Angulartics -->
<script src="/app/lib/analytics/angulartics.js"></script>
<script src="/app/lib/analytics/angulartics-ga.js"></script>
I double checked the paths to ensure they are correct. I have included angularjs, and the other angular dependencies seem to work fine. Any help is greatly appreciated!
I have a an angular app and in it I can see this coffee in the app.coffee file....
app = angular.module 'app', [
'ngRoute',
'ngResource',
'ui.router',
'app.filters',
'app.services',
'app.directives',
'app.controllers',
'app.templates',
]
angular.module('app.services', ['ngResource'])
angular.module('app.controllers',[])
angular.module('app.directives', [])
angular.module('app.filters', [])
angular.module('app.templates', [])
angular.module('app.models', [])
I don't really understand why I have to inject ngResource into the app.services module direct AND into the app module. Surely I can just wire up All dependencies into the app module and then it will allow global access to the rest of the modules?
When you write
app = angular.module 'app', [
'ngRoute',
'ngResource',
'ui.router',
'app.filters',
'app.services',
'app.directives',
'app.controllers',
'app.templates',
]
this means these are the dependencies of your app.
When you write
angular.module('app.services', ['ngResource'])
this means app.services has a dependency ngResource. About your question as to why you need to write it again. It is fairly simple, app.services uses ngResource. If you don't want the whole app to have ngResouce dependency, you can ignore it in the first line, but it has to be there for app.services
You can read more about it here