I'am trying to use a basic sample of interceptors, so I stared with a little piece of code but without success:
var app = angular.module('app',[]).
config(['$routeProvider','$locationProvider', function($routeProvider,$location) {
$routeProvider.
when('/home', {templateUrl: 'home.html', controller: homeCtrl}).
when('/login', {templateUrl: 'login.html', controller: loginController}).
otherwise({redirectTo : '/home' });
}]);
app.config(function ($httpProvider) {
$httpProvider.interceptors.push('httpRequestInterceptor');
});
When I launch my index page I have an error message in the console :
Uncaught TypeError: Cannot call method 'push' of undefined from app
Any idea?
Thanks
Your code is perfect. You need to make sure you are using the correct version of angularjs. The $http.interceptors array was added in version 1.1.4.
I made a plunker with your example working with angular 1.1.4, check it out here http://plnkr.co/edit/cuPfat?p=preview
$httpProvider.interceptors array was added in AngularJS v.1.1.4 (I believe). You're most probably using some older version of AngularJS.
Btw, that error says $httpProvider.interceptors is not defined, not $httpProvider as your title implies.
Related
There are a ton of examples of using the newer angular directives like ng-blur, ng-focus, form validation, etc. They all work great in a single page, or in plinkr, jsfiddle, etc. with the exception of the people who try to define the function on the global namespace, that mistake is WELL documented.
However, I was having a different problem.
I was using an example from Scotch.io. This one works great...until you introduce it into an SPA that is using angular-route :(
After many hours of fighting with the error 'Argument 'mainController' is not a function, got undefined', I found the answer in a comment from Hajder Rabiee.Thanks Hadjer, Love you man!
Hajder left this comment and in it, he says:
If you're using routes (high probability) and your config has a reference to a controller in a module that's not declared as dependency then initialisation might fail too.
E.g assuming you've configured ngRoute for your app, like
angular.module('yourModule',['ngRoute'])
.config(function($routeProvider, $httpProvider) { ... });
Be careful in the block that declares the routes,
.when('/resourcePath', {
templateUrl: 'resource.html',
controller: 'secondModuleController' //lives in secondModule
});
Declare secondModule as a dependency after 'ngRoute' should resolve the issue. I know I had this problem.
Even with this help it took me a minute to get it working, so I thought I would share my sample code here to help the next poor bastard that gets stuck on this.
First, in the place where i declare my routes:
var app = angular.module('sporkApp', ['ngRoute','validationApp']);
app.config(function ($routeProvider) {
$routeProvider
.when('/home',
{
controller: 'HomeController',
templateUrl: 'home/home.template.html'
})
.when('/tags',
{
controller: 'TagsController',
templateUrl: 'tags/tags.template.html'
})
.when('/test',
{
controller: 'mainController',
templateUrl: 'test/test.template.html'
})
.otherwise({ redirectTo: '/home' });
});
Then, you need to add your controller code somewhere, where it will get loaded in your shell page:
// create angular app
var validationApp = angular.module('validationApp', []);
// create angular controller
validationApp.controller('mainController', function($scope) {
// function to submit the form after all validation has occurred
$scope.submitForm = function() {
// check to make sure the form is completely valid
if ($scope.userForm.$valid) {
alert('our form is amazing');
}
};
});
Finally, you need to add the corresponding ng-app and ng-controller to some page element that wraps the controls you want to validate. I put the following inside of a div tag:
<div ng-app="validationApp" ng-controller="mainController">
I am having issue with routing on mobile phone when I use phonegap.
Routing on browser works but on mobile devices is not working.
If there is any question, I can provide more code.
route.js:
app.config(['$routeProvider','$locationProvider','$compileProvider', function($routeProvider,$locationProvider,$compileProvider) {
$routeProvider
.when('/', {
templateUrl: '../login.html',
controller: 'loginController'
})
.when('/home',{
templateUrl:'../home.html',
controller:'homeController'
})
.when('/profile', {
templateUrl:'../myprofile.html',
controller:'profileController'
})
.when('/reservations',{
templateUrl:'../reservations.html',
controller:'reservationController'
})
.when('/ordernow',{
templateUrl:'../ordernow.html',
controller:'ordercontroller'
})
.otherwise({
redirectTo: "/home"
});
$compileProvider.aHrefSanitizationWhitelist(/^\s*(https?|ftp|mailto|chrome-extension):/);
$compileProvider.imgSrcSanitizationWhitelist(/^\s*(https?|ftp|mailto|chrome-extension):/);
}]);
After few hours of struggling:
solution: remove "../" from templateUrl
I guess this particular issue might have been fixed long ago, but I was having similar trouble with angular 1.6 and cordova android app.
I was using the correct path for templateUrl but still routing was not working.
After spending a whole day looking through different documentations and trying out different things i stumbled upon a small mystery. I was debugging the cordova app using google chrome inspect and found the app URL to be
file:///android_asset/www/index.html#!/
When i navigate to another page, I get the URL
file:///android_asset/www/index.html#!/#%2faccounts
Then while investigating that, I stumbled upon this
I used the following while configuring the router
$locationProvider.hashPrefix('');
This seemed to fix the problem for me. Code snippet below:
var prakriya = angular.module("prakriya",["ngRoute"]);
prakriya.config(function($routeProvider, $locationProvider){
$locationProvider.hashPrefix(''); //Added Line here
$routeProvider
.when("/", {
templateUrl: "templates/workspace.html",
controller: "workspace"
});
});
angular version: 1.4.9
Hello,
I am packaging an angular web app written in John Papa code style. However I have been facing problems with basic things. One of these things is setting up routeProvider. I would like to configure it in the controller file, but seems to not work. When I configure it directly in the module config it does not accept controllerAs as syntax...
On mycontroller.js file
// Has no effect
angular.module('myDearModule').
controller('MyController', MyControllerFn).
config(function($routeProvider) {
$routeProvider.when('/page', {
templateUrl: 'tpl.html',
controller: 'MyController',
controllerAs: 'mycontrollerVm'
});
});
function MyControllerFn() {
....
Now, if I try it after loading everything, in a kind of module.routing.js file
// After setting up module and controller
angular.module('myDearModule').
config(function($routeProvider) {
$routeProvider.when('/page', {
templateUrl: 'tpl.html',
controller: 'MyController',
controllerAs: 'mycontrollerVm'
});
});
No effect... I also get this error: [ng:areq] Argument 'MyController' is not a function. Got undefined
I have tried to switch between views with this recommendation: Using angular $routeProvider with packaged apps
The directive and routing works fine but with no controller setted up :(
The same error happens when I use the ngController syntax inside the view.
I need to use routing to keep this web working. Am I doing something wrong or just there is no way? Could someone show me an example with controllerAs within a chrome app ? I have found only simple examples (no routing or page changing at all).
'MyController' is not a function. Got undefined
Could mean that you have a syntax error in your controller. There should be no error messages loading controllers, filters, etc. If you find any errors, and correct it, controllerAs should work as expected.
I have the following config for routes:
app.config( function ($routeProvider, $locationProvider, $httpProvider) {
// Routes
$routeProvider.when('/admin', {
templateUrl : '/app/partials/dashboard.html',
controller : 'DashboardCtrl'
});
$routeProvider.when('/admin/settings', {
templateUrl : '/app/partials/settings.html',
controller : 'SettingsCtrl'
});
$routeProvider.when('/404', {
templateUrl : '/app/partials/404.html',
});
$routeProvider.otherwise({redirectTo: '/404'});
$locationProvider.html5Mode(true);
});
Everything is working except, when I'm on /admin/settings and reload the page, it redirects to 404. I tried removing the html5Mode, it works. However, I really want to use html5Mode. What am I missing? Please help me.
Oh, btw, I'm using AngularJS 1.1.5.
I had a very similar error and solved it by inserting <base href='my_app_base_url'></base> into my index.html page, in the head. The idea came from this GitHub issue (https://github.com/angular/angular.js/issues/2774) and this other one (https://github.com/angular/angular.js/issues/2868), as well as the one I mentioned in my comment.
try $location.path('/404').replace();
I'm just starting out with Angular, so this might be a common newbie mistake but I am trying to achieve the following url format:
http://myapp.localhost/index.html#!/about
Which I believe should be the default for Angular?
This is my configuration:
angular.module('App', []).config(function($routeProvider, $locationProvider, VIEWS_ROOT) {
$locationProvider.html5Mode(false);
$locationProvider.hashPrefix = '!';
// Routing
$routeProvider.when('/', {templateUrl: './welcome.html', controller: 'WelcomeController'});
$routeProvider.when('/about', {templateUrl: './about.html', controller: 'AboutController'});
})
.run(function($rootScope) {
//...
});
In my html I have a simple anchor like so:
About
However when I click that anchor, the resulting URL constructed is:
http://myapp.localhost/index.html#/!/about
Which obviously fails to match any of my routes... a bit stumped on what's actually happening here, or what I'm doing wrong. I'm running off my local Apache instance under a vhost. There's nothing going on with mod_rewrite - so it looks like Angular is doing this.
It's a method to set the hashPrefix, not a property. $locationProvider.hashPrefix('!');