I get this error, described on this url:
Description This error occurs when a module fails to load due to some
exception. The error message above should provide additional context.
Using ngRoute In AngularJS 1.2.0 and later, ngRoute has been moved to
its own module. If you are getting this error after upgrading to 1.2.x
or later, be sure that you've installed ngRoute.
But I don't see why it's going wrong, I've added ngRoute like so:
var myApp = angular.module("myProject", ["ngRoute"]);
(and a whole bunch more, but I don't think that matters)
And the ngRoute JS file is added in the _Layout.cshtml file:
<script src="~/Scripts/External/Angular/angular-route.js"></script>
What else should I look at?
controller.js
var app = angular.module('app', ["ngRoute"]);
app.config(function($routeProvider) {
$routeProvider
.when("/", {
templateUrl : "main.htm"
})
.when("/", {
templateUrl : "red.htm"
})
.when("/green", {
templateUrl : "green.htm"
})
.when("/blue", {
templateUrl : "blue.htm"
});
});
Add external file for angular-route.js after angular script in index.html
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular-route.js"></script>
working code at W3school:
https://www.w3schools.com/angular/tryit.asp?filename=try_ng_routing
Related
I am using ngRoute to my application. problem is when i reload that page, there is an error.
error said
Whitelabel Error Page
This application has no explicit mapping for /error, so you are seeing this as a fallback.
var app = angular.module('myApp',['ngTable','jcs-autoValidate','ngRoute']);
// configure our routes
app.config(function($routeProvider,$locationProvider) {
$routeProvider
.when('/container-details', {
templateUrl : 'container-details-test.jsp',
controller : 'myCtrl'
})
$locationProvider.html5Mode(true);
});
You'll need to configure your server based off the guidelines on this page:
https://github.com/angular-ui/ui-router/wiki/Frequently-Asked-Questions#how-to-configure-your-server-to-work-with-html5mode
I'm practising a demo application using AngularJs 1.4.8 with backend as core php. Im using linux os. My app files reside inside, var/www/demo/ang/ directory. What I need is, to remove the "#" hash from the url. I approached many examples from internet but the only final result Im getting is that nothing being displayed in the browser. Most of the approaches say to set
<head>
<base href="/" />
</head>
or
<head>
<base href="/var/www/demo/ang/" />
</head>
app.config(function($routeProvider, $locationProvider)
{
$routeProvider
.when('/', {
templateUrl : 'index.html',
controller : indexController
})
.when('/about', {
templateUrl : 'about.html',
controller : aboutController
});
$locationProvider.html5Mode(true);
});
or
app.config(function($routeProvider, $locationProvider)
{
$routeProvider
.when('/', {
templateUrl : 'index.html',
controller : indexController
})
.when('/about', {
templateUrl : 'about.html',
controller : aboutController
});
$locationProvider.html5Mode(
{
enabled:true,
requireBase: false
});
});
Even tried this $locationProvider.html5Mode(true).hashPrefix('!'); . I know that somewhere I'm doing a mistake or forgot to add something. Kindly help me to go through this
UPDATED: Answer Found
https://www.formget.com/angularjs-remove-hashtag/
I made two mistakes
One mistake is that, I set the <base href=""/> as absolute path rather than the relative path of the url. Hence provide the relative path http://www.siteame.com/ or http://localhost/path/to/angularjs_dir/
Second mistake is that, I named the main file which includes all the scripts, ng-view etc.., as some name other than index.html. Hence provide the base file name as index.html.
Rest of this all others were correct.
Im building a big app , and my structure goes like this:
Each module has its own folder structure for controllers, directives, etc...
Each folder has an index.js file and then other files to separates each controller, each directive, etc...
The index.js file contains the definition of the module. For instance for the controllers of the businessModule above:
angular.module('myCompany.businessModule.controllers', []);
There's no dependencies here, but there could be any.
Then in firstCtrl.js, I can reuse that module and add the controller to it:
angular.module('myCompany.businessModule.controllers').controller('firstCtrl', function(){
});
Then the app.js aggregates all the module that I want for my application by adding them to the dependencies array.
angular.module('myApp', ['myCompany.businessModule', 'myCompany.anotherBusinessModule'],'ngRoute');
Now comes the route that include the other modules view.
My Route goes like:
var myApp = angular.module('myApp');
myApp.config(function($routeProvider) {
$routeProvider
// route for the home page
.when('/', {
templateUrl : 'pages/home.html',
controller : 'mainController'
})
// route for the about page
.when('/about', {
templateUrl : 'pages/about.html',
controller : 'firstCtrl'
})
});
Now the question is can i connect a controller that from another module to the specific controller that have this module injected like in my situation when myApp contains myCompany.businessModule.controllers and has firstCtrl ?
Your modules file :
angular.module('myApp').config(function($routeProvider){
$routeProvider
// route for the home page
.when('/', {
templateUrl : 'pages/home.html',
controller : 'mainController'
})
// route for the about page
.when('/about', {
templateUrl : 'pages/about.html',
controller : 'firstCtrl'
});
});
Include it as a dependency when you want to use it.
angular.module('app',[other deps]);
I followed a tutorial on how to organize and Angular project. I have a ng directory that contains all my controllers, services and my routes.js. This is then bundled all together into an app.js by my gulp config.
My module.js is like this:
var app = angular.module('app', [
'ngRoute',
'ui.bootstrap'
]);
Here's a bit of my routes.js:
angular.module('app')
.config(function ($routeProvider) {
.when('/login', { controller: 'LoginCtrl', templateUrl: 'login.html'})
});
Here's what my working LoginCtrl looks like:
angular.module('app')
.controller('LoginCtrl', function($scope, UserSvc) {
$scope.login = function(username, password) {
...
}
})
The tutorial didn't make use of any Angular modules and I wanted to try one out. I added ui.bootstrap to my page from a CDN and try to change the LoginCtrl to:
angular.module('app')
.controller('LoginCtrl', function($scope, $uibModal, UserSvc) {
...
})
But this throws me the following error:
"Error: [$injector:unpr] Unknown provider: $templateRequestProvider <- $templateRequest <- $uibModal
What is causing this error? In every tutorial I find this seems to be how they load a module, the only difference I see is that the tutorial don't seem to be using a router.
PS: Note that if I use an empty module list [] I get the exact same error. If I use a non-existing module ['helloworld'] I get an errorModule 'helloworld' is not available'. So I'm concluding that my `ui.bootstrap' module is indeed available.
EDIT: Plunker fiddle here: http://plnkr.co/edit/FWHQ5ZDAByOWsL9YeMUH?p=preview
angular route is another module you should not only include but also use like this
in the app module creation
means DI of route
angular.module('app', ['ngRoute']);
Please go through the angular route doc
Remove ['ui.bootstrap'] form controller. You should add dependencies only one time but you add it twice so the second dependency list override the first one.
angular.module('app')
.controller('LoginCtrl', function($scope, UserSvc) {
... })
your routes snippet looks wrong, you should be hanging the when call off $routeProvider and maybe declare $routeProvider as an injected val if it's not being picked up e.g.
angular.module('app')
.config(["$routeProvider", function ($routeProvider) {
$routeProvider.when('/login', { controller: 'LoginCtrl', templateUrl: 'login.html'})
}]);
I have checked your link. I think there is a serious issue with angular and ui bootstrap version.In ui-boostrap dashboard, it is written that 0.12.0 is the last version that supports AngularJS 1.2.x. I have tried with all combinations but it doesn't work with your angular version.
I suggest you to change angular version to latest and ui-bootstrap version to latest so it will work.
Please check out this working Plukr
<script src='https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular.min.js'></script>
<script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.2.18/angular-route.js'></script> //change this to latest also.
<script src='https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/1.0.3/ui-bootstrap.min.js'></script>
<script src='./app.js'></script>
If you want to go with your angular version only. I'd request you to do some R&D. Try with different versions of ui-bootstrap. still if it doesn't work you can make PR.
I am including other html files as template in index.html. For this i am using ng-view directive. But i am getting an error:
Unknown provider: $templateRequestProvider <- $templateRequest <- $route <- ngViewDirective
The code I am using is:
'use strict';
var surveyApp = angular.module('surveyApp',['ngRoute']);
surveyApp.factory('surveyFactory',function (){
return {}
});
Here are the Controllers :
surveyApp.controller('profileController', function($scope,surveyFactory) {
// create a message to display in our view
$scope.message = 'This is the profile page';
});
surveyApp.controller('surveysController', function($scope,surveyFactory) {
// create a message to display in our view
$scope.message = 'This is the surveys page';
});
The Config:
surveyApp.config(function($routeProvider, $locationProvider) {
$routeProvider
.when('/', {
templateUrl : 'pages/profile.html',
controller : 'profileController'
})
.when('/surveys', {
templateUrl : 'pages/surveys.html',
controller : 'surveysController'
});
$locationProvider.html5Mode(true);
});
This is the HTML:
<body ng-app="surveyApp">
<div id="main">
<div ng-view></div>
</div>
</body>
Where am I missing?
Done. In most of the cases it would be the versions of angular-route and angularjs were conflicting. After then, it mostly crashed the page due to continuous loop requests in
.when('/', {
templateUrl : 'pages/profile.html',
controller : 'profileController'
})
Every time it saw a '/', it redirected to the same page all over again and hence forming an infinite redirect loop. This should be used in the last so that the first ones are checked, and if something remains, then it sees the '/' route.
Had the same problem, the issue for me was also a dependancy but not angular-route. The dependancy that caused the error for me was angular-bootstrap.
The current angular version in our project is 1.28 and angular-route is also 1.28. This error was triggered on updating angular-bootstrap from 0.12.1 to 0.13.
The only issue with your code is the missing closing curly brace after surveyFactory definition.
Change the code for app and factory definition to below to fix the issue:
var surveyApp = angular.module('surveyApp',['ngRoute']);
surveyApp.factory('surveyFactory',function (){
return {}
});