I'm trying to use the $stateProvider in Angular to load in partial modules on a certain view. However I can't get past the first step, which is injecting 'ui.router'
var app = angular.module('app-training', ['ui.router']);
http://tinyurl.com/m5hsfr8
Failed to instantiate module portalExchange due to:
Error: [$injector:modulerr]
You must include the ui.router file to your index.html after the AngularJS library. In the last versions of angular the Google team separated the ng-router to a separate module to alow users choose between ng-router and ui-router. I do believe that in the next releases the ui.router will be default.
Related
This is common problem and Googling shows lots of instances of it, many of them on this site.
The answers seem to boil down to :
not injecting the module into the app
for getting to include the relevant JS
including things in the wrong order in index.html
I am trying to include ag-grid, following the instructions for manual include.
In my index.html, I include
Angular
ag-grid
my controller
I am using the Inspinia template, and the relevant code is
(function () {
angular.module('TapThatDashboard',
[
'ui.router', // Routing
'oc.lazyLoad', // ocLazyLoad
'ui.bootstrap', // Ui Bootstrap
'chart.js', // Charting
'agGrid'
])
})();
Note that the other stuff is working, such as the charting.
When I remove the 'agGrid' line, my app runs just fine (I have not yet added any grid to my HTML). When I add it in, I get
Module 'agGrid' is not available! You either misspelled the module name or forgot to load it
My code is far too large to post. Can anyone see what I am doing wrongly?
Please update your code like
// if you're using ag-Grid-Enterprise, you'll need to provide the License Key before doing anything else
// not necessary if you're just using ag-Grid
agGrid.LicenseManager.setLicenseKey("your license key goes here");
// get ag-Grid to create an Angular module and register the ag-Grid directive
agGrid.initialiseAgGridWithAngular1(angular);
// create your module with ag-Grid as a dependency
var module = angular.module("example", ["agGrid"]);
Reference Link : agGrid
I read this article about best practices for AngularJS project structure:
https://scotch.io/tutorials/angularjs-best-practices-directory-structure
Under the title "App Folder" he explains shortly the difference between the files app.module.js and app.route.js but I didn't understand.
Can anyone give me an example with a short pseudo code for both of the files?
Any help will be profoundly appreciated!
Under this structure, app.module.js would be used to create the main module for your application (eg. App), configure services that you are using throughout your application, or for running arbitrary code once the module has loaded all of its dependencies and configured any services it may wish to configure.
app.route.js would be for specifically configuring one service: the router that you are using to handle state in your application. It could create its own module or re-use the one from app.module.js, but if it were to use a custom module, it would have to depend on your choice of router directly. In addition, you would have to add it as a dependency for the main app.module.js eg.
angular.module('App', ['App.Routes']);
angular.module('App.Routes', ['RouterModule']);
Example using just one module named App, which also depends on some other arbitrary module SomeModule and the routing module RouterModule:
app.module.js
angular.module('App', ['SomeModule', 'RouterModule'])
.config(function (SomeServiceProvider, SomeOtherServiceProvider) {
// Configure SomeServiceProvider/SomeOtherServiceProvider.
})
.run(function () {
console.log('Done loading dependencies and configuring module!');
});
app.route.js
angular.module('App')
.config(function (YourRouterProvider) {
// Configure YourRouterProvider to define the states for the application.
});
Angular Modules:
https://docs.angularjs.org/api/ng/function/angular.module
Routing in Angular using ngRouter:
https://docs.angularjs.org/api/ngRoute
With the new angular-route version, you need to require('angular-route') in your dependencies but I can't seem to get this working. In the angular-route npm page, it says to do angular.module('myApp', [require('angular-route')]);
This is my code:
angular.module('app.routes', [require('angular-route')])
.config(function($routeProvider, $locationProvider){
$routeProvider
.when('/', {
templateUrl: 'app/views/pages/home.html'
});
$locationProvider.html5Mode(true);
});
When I run my server, I get the error: require is not defined.
Can anyone help me here.
You need to use browserify if you want to use require in frontend.
Browserify is a node module that takes your main JavaScript file, read all its required dependencies (and dependencies of dependencies), and spits out a single JavaScript file, ready to be included in your HTML. This file contains JavaScript code that is actually compatible with browsers, in other words, it browserfies your Node modules.
Also you can see the following link how he structure the angular js with browserify
http://omarfouad.com/blog/2015/03/21/advanced-angularjs-structure-with-gulp-node-and-browserify/
Other wise you need to use the following code snippet.
angular.module('app.routes', ['ngRoute']);
You should use the dependency injection as normally:
angular.module('app.routes', ['angular-route']);
Remember that you need to load the angular-route module before you load your app.js.
require is from requirejs
I'm new on AngularJS and I have problems each time I follow a tutorial and add an external module. And I have some questions about how not to get injection errors.
Q1. How I can solve the injector/module problem? I have used bower to install 'ngSanitize', included in the HTML like:
<body ...>
<script src="assets/js/angular.min.js"></script>
<script src="bower_components/ngSanitize/index.js" type="text/javascript"></script>
</body>
Q2. If the order of adding the modules affects the results, is there a plugin for NetBeans, or an online application to check modules dependencies so they can be added in order?
Q3. Finally, what are the correct steps to inject external modules to an AngularJS single page application without injector/modulerr?
Original:
angular.module('app', [
'ngRoute',
'ngAnimate',
'angularMoment',
'angular-preload-image',
'truncate',
'app.core'
]);
Objective situation that throws injection error for 'ngSanitize':
angular.module('app', [
'ngRoute',
'ngSanitize',
'ngAnimate',
'angularMoment',
'angular-preload-image',
'truncate',
'app.core'
]);
The displayed error that crashes the application loading
I got the same error using angularjs.org/1.4.8.
The main problem I think is from using that specific ngSanitize.
You should install it using: bower install angular-sanitize and not bower install ngSanitize.
Despite being related to the same thing, ngSanitize is, according to it's repo description:
angular-sanitize module without including angular.js for Backbone and
other frameworks
As you can see they belong to different repos:
angular-sanitize: https://github.com/angular/bower-angular-sanitize
ngSanitize: https://github.com/gdi2290/ngSanitize
Script loading in HTML is important. I always start by inserting jQuery, then angular, then angular specific modules like (angular-animate, angular-sanitize, etc) and then my custom angular modules scripts.
Regarding Q3, I don't think you messed up with module injection. It just showed that error because of using ngSanitize instead of angular-sanitize.
Previously , i used angular js 1.0.8
Now i updated the version from 1.0.8 to 1.2.21
But it is displaying error as below:
Uncaught Error: [$injector:modulerr] Failed to instantiate module auditApp due to:
Error: [$injector:unpr] Unknown provider: $routeProvider
http://errors.angularjs.org/1.2.21/$injector/unpr?p0=%24routeProvider
at http://localhost:8080/AuditTool...<omitted>...2)
And the $route provider functionality is not at all working .
Do anyone can help me in this regard?
ngRoute is not included any longer by default, which includes $routeProvider
You need to download and include the ngRoute package separately
Go to download angular and select additional downloads.
Then select angular-route.js or angular-route.min.js
Include the script in your project.
Make sure ngRoute is added as a dependency angular.module('myApp',['ngRoute'])
Dependencies for $routeProvider listed here