I have built a simple angular and am trying to implement ui-router and specifically, $UrlRouteProvier.otherwise to redirect to a certain url if something nonexistent is entered. I am getting the following exception when trying to load my page now and can't seem to find the error. All help is appreciated. Code and error below.
Angular app:
var app = angular.module('myApp', ['ui.router','ngAnimate', 'ui.bootstrap']);
app.config(['$urlRouterProvider', '$stateProvider', function($urlRouterProvider, $stateProvider){
$urlRouterProvider.otherwise('/browse/overview.html');
}])
error:
Failed to instantiate module myApp due to:
Error: [$injector:nomod] http://errors.angularjs.org/1.3.4/$injector/nomod?p0=gcIm...
at Error (native)
at https://ajax.googleapis.com/ajax/libs/angularjs/1.3.4/angular.min.js:6:416
at https://ajax.googleapis.com/ajax/libs/angularjs/1.3.4/angular.min.js:21:334
at a (https://ajax.googleapis.com/ajax/libs/angularjs/1.3.4/angular.min.js:20:483)
at https://ajax.googleapis.com/ajax/libs/angularjs/1.3.4/angular.min.js:21:218
at https://ajax.googleapis.com/ajax/libs/angularjs/1.3.4/angular.min.js:35:76
at r (https://ajax.googleapis.com/ajax/libs/angularjs/1.3.4/angular.min.js:7:302)
at g (https://ajax.googleapis.com/ajax/libs/angularjs/1.3.4/angular.min.js:34:428)
at Lb (https://ajax.googleapis.com/ajax/libs/angularjs/1.3.4/angular.min.js:38:146)
at d (https://ajax.googleapis.com/ajax/libs/angularjs/1.3.4/angular.min.js:17:339
note: everything works fine if I remove ui.router from the list of dependencies
It looks like you don't have ui-router code loaded. Try to include:
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.18/angular-ui-router.js"></script>
Try writing your config line like this:
.config(function($stateProvider, $urlRouterProvider) {
Related
I need to mask my input in my application. I was using ngMask in angularjs. But i found an issue in ngMask is that if we update the mid value the cursor move to end. I tried to resolve the issue but did not find anything. Even on github this issue has reported but still not resolved. Here is the link
ngMask Issue
Then i decided to use another mask library. I found ui-mask and trying to use in my application but i am getting error when i include in my project. My application is in angularjs and i am using requirejs as well to load the modules.
This is what i have done in main.js:
paths: {
...////
"angular-ui-mask": "../../lib/ui-mask/ui-mask.min",
},
'angular-ui-mask': {
deps: ['angular'],
exports: 'angular-ui-mask'
},
in app.js i have done:
var app = angular.module("app",
[
"ui.router",
"mobile-angular-ui",
"scrollable-table", //for alert triggering
"rzModule", //slider for SEMI diagram
"isteven-multi-select",
"ui.bootstrap",
"cgBusy", "dndLists", 'apm-kpi-widget',
'angular.filter',
"pascalprecht.translate",
"jQueryScrollbar",
"ui.checkbox",
"angular-ui-mask"
])
This is exact i was doing for ngMask. But in this case i am getting error
[$injector:modulerr] http://errors.angularjs.org/1.5.5/$injector/modulerr?
at angular.js:38
at angular.js:4587
at q (angular.js:322)
at g (angular.js:4548)
at bb (angular.js:4470)
at c (angular.js:1746)
at Object.yc [as bootstrap] (angular.js:1767)
at HTMLDocument.<anonymous> (angularAMD.js:449)
at i (jquery-1.12.3.min.js?v=1531811705531:2)
at Object.add [as done] (jquery-1.12.3.min.js?v=1531811705531:2)
What's the issue?
I have an app which worked great, until I decided to refactor the code and use Gulp for my project. Here is the error I get:
Error: [$injector:unpr] Unknown provider: _Provider <- _ <- utilsFactory <- storageService <- httpRequestInterceptor <- $http <- $templateFactory <- $view <- $state
Since I'm not sure how to read this error and if they all have an issue or if it's only one of them, here are the two places where I use some of these providers when I start my app:
app.run(function($rootScope, $state, storageService, modalsFactory, appFactory, _) { ... }
And:
angular.module("mediaControl").controller("loginCtrl", function ($state, $translate, authService, utilsFactory, appFactory, storageService) { ... }
In my index.html file, I have:
<!-- inject:js -->
<script src="src/mediaControl.js"></script>
...
<script src="src/login/providers/httpRequestInterceptor.service.js"></script>
...
<script src="src/common/providers/utils.factory.js"></script>
<script src="src/common/providers/storage.service.js"></script>
...
<script src="src/login/login.controller.js"></script>
...
<!-- endinject -->
What I checked/did:
Check if Gulp put all of the necessary js files in index.html and in the good order (seems ok to me)
Check the names of the providers (I didn't change them during the refactoring though)
Try to remove my custom providers from loginCtrl and app.run (I still have the same error when I'm doing this)
I read the documentation and some SO questions, but I don't see anything that I would do wrong, considering that my app worked before the refactoring (which consists in reorganizing my file structure, renaming the files, and starting to rewrite the code using ES6 standards). Any idea about what could be wrong here?
As noticed by #shaunhusain, the lodash provider was missing in my index.html. I fixed my Gulpfile so that the file is injected as well, and it works.
I'm using yeoman generator for scaffolding angular web application with requirejs. Its working fine but when I tried to concat and minifying all the js file into a single file through grunt task runner its started giving me above mentioned error. I've researched online about the issue and common solution is I may be mis-spelled any service injecting in the module or service does not exists, I've cross checked again all the spelling, quotation marks etc everything seems fine but still I'm unable to resolve this issue.
Here is my app.js file where my main module with dependencies is listed.
return angular
.module('arteciateYeomanApp', [
'arteciateYeomanApp.controllers.MainCtrl',
'arteciateYeomanApp.controllers.AboutCtrl',
'arteciateYeomanApp.services.Xhr',
'arteciateYeomanApp.services.Common',
'arteciateYeomanApp.controllers.ArtworkCtrl',
'arteciateYeomanApp.controllers.AddAccountCtrl',
'arteciateYeomanApp.controllers.AddArtgroupCtrl',
'arteciateYeomanApp.controllers.AddArtistCtrl',
'arteciateYeomanApp.controllers.AddArtworkCtrl',
'arteciateYeomanApp.controllers.AddCampaignsCtrl',
'arteciateYeomanApp.controllers.AddGenreCtrl',
'arteciateYeomanApp.controllers.AddInstitutionCtrl',
'arteciateYeomanApp.controllers.AdminSignupCtrl',
'arteciateYeomanApp.controllers.ArtistInfoCtrl',
'arteciateYeomanApp.controllers.DirectUserSignupCtrl',
'arteciateYeomanApp.controllers.ErrorCtrl',
'arteciateYeomanApp.controllers.ForgotPasswordCtrl',
'arteciateYeomanApp.controllers.GroupBuyingCtrl',
'arteciateYeomanApp.controllers.LoginCtrl',
'arteciateYeomanApp.controllers.AdminLoginCtrl',
'arteciateYeomanApp.controllers.ResetPasswordCtrl',
'arteciateYeomanApp.controllers.SignupCtrl',
'arteciateYeomanApp.controllers.UnblockUserCtrl',
'arteciateYeomanApp.controllers.UpdatePasswordCtrl',
'arteciateYeomanApp.controllers.DashboardCtrl',
'ngRoute','ngResource']).config(.....);
here is grunt task which I'm running for minifying the js files.
registering task
grunt.registerTask('dev', ['requirejs' ]);
Here is task running script
requirejs : {
compile : {
options : {
baseUrl : "<%= yeoman.app %>/scripts",
mainConfigFile : "<%= yeoman.app %>/scripts/main.js",
name : "main",
out : "requireArterciate.js"
}
}
}
Please let me know if I'm doing something wrong here.
If you need to minify the angularjs code, then use the following standard format syntax to define the controller and to inject the dependencies. Refer Dependency Injection
angular.module('test').controller('testController', testController);
testController.$inject = ['$scope', '$rootScope'];
function testController($scope, $rootScope) {};
Running into a weird issue with loading an Angular module.
I have a file structure like so
-ng-app
-app
-account
accountCtrl.js.coffee
-auth
authCtrl.js.coffee
-other_folders
app.js.coffee
and I'm loading accountCtrl and other controllers like so
#app/app.js.coffee
angular.module("app", [
'ngResource'
'smart-table'
'checklist-model'
'ui.router'
...
])
#app/account/accountCtrl.js.coffee
#app = angular.module('app')
app.controller 'accountCtrl', ($scope, $state) ->
....
#app/auth/authCtrl.js.coffee
#app = angular.module('app')
app.controller 'authCtrl', ($scope, $state) ->
....
But then accountCtrl throws an error
Module 'app' is not available! You either misspelled the module name
or forgot to load it. If registering a module ensure that you specify
the dependencies as the second argument.
I know the syntax is correct, because I'm loading a a few dozen other controllers with the same syntax. So I started playing around with different scenarios.
I deleted the 'account' folder
No error thrown, other controllers load normally
I renamed account folder to z-account
No error thrown, all controllers including accountCtrl load normally
So the error only occurs when the folder is named 'account' and is the first file in the 'app' folder. Any ideas what's going on?
Rails asset pipeline includes javascript files aphabetically, and app/account.js.coffee was being included before app/app.js.coffee, hence the missing module error.
Two solutions possible:
prefix files with an underscore to ensure it loads first like so:
_app.js.coffee
Or
Remove
//= require_tree .
in application.js and include files manually.
With grunt-html2js I'm getting a views.js which contains:
angular.module('templates-dist', ['../views/attachment-modal.html', ...
...
angular.module("../views/attachment-modal.html", []).run(["$templateCache", function($templateCache) { ...
(etc. all the views)
I've added this module to my app.js, like this:
angular.module('myApp', [
'ngRoute',
'ui.bootstrap',
'templates-dist', // <--- there it is.
'ui.select']);
I want to add this module also to my routes.js, using array notation:
angular.module('myApp')
.config(['$routeProvider', 'templates-dist', function($routeProvider, X) { ... }
But, as you can see, I don't know how to do that, because of the "-" sign
Question: In the previous piece of code, what should I put in the X?
I think that putting templates-dist without quotes will be evaluated in javascript as a substraction
Also, bonus question: after injecting the templates-dist module, the loading of the views will automatically be from templateCache ?
There is no reason to add this to the config phase of your myApp module. There is no provider associated with templates-dist and it will throw an error because of that. You can inject it as a dependencies to a module like you did above
angular.module('myApp', [
'ngRoute',
'ui.bootstrap',
'templates-dist', // <--- there it is.
'ui.select']);
but you cannot do anything with it and therefore shouldn't include it in the config phase of your application.
In regards to your $templateCache cache question. I see in your example above you have
angular.module('templates-dist', ['../views/attachment-modal.html', ...
Usually with Grunt html2js it will create a module with dependencies of your templates as modules, i.e. attachement-modal.html and the module would look something like this:
angular.module("attachement-modal.html", []).run(["$templateCache", function($templateCache) {
$templateCache.put("step.html", "YOUR HTML HERE");
}]);
So yes that is now stored and served from $templateCache