Angular 1.5.0 routing Issue - javascript

For some reason I cannot get routing working using 1.5.0. This works with angular 1.4.9.
.config([
"$routeProvider", "$locationProvider", function($routeProvider, $locationProvider) {
$routeProvider
.when("/:stepNumber", {
templateUrl: function (urlattr) {
return "/views/" + urlattr.stepNumber + ".html";
}
})
.otherwise({
//Redirect to first step if unknown
redirectTo: "/1"
});
$locationProvider.html5Mode(true);
}
])
The redirect doesn't seem to be happening. Replacing all angular references from 1.5.0 back to 1.4.9 makes everything work as normal.

Related

Angular.js route is not working

friends, I am new in angular js and I was trying to work with angular Route, but when I click on #/home it gives me some strange URL http://127.0.0.1:3000/#!/home#%2Fhome
But By default, the otherwise condition is working fine http://127.0.0.1:3000/#!/home
app.config(['$routeProvider', function($routeProvider){
$routeProvider
.when('/home', {
templateUrl: 'views/home.html'
})
.when('/list', {
templateUrl: 'Views/listing.html',
controller: 'mycontroller'
}).otherwise({
redirectTo: '/home'
})
}]);

you can try with
use $locationProvider
angular.module('myApp', ['ngRoute'])
.config(['$locationProvider', function($locationProvider) {
$locationProvider.html5Mode(false);
$locationProvider.hashPrefix('');
}]);

ngRoute in AngularJS not routing to ashx file

I am trying to route a link to a .ashx service file, but it's not working. It works fine when I redirect to .html files, but when I redirect it to an .ashx, file it gives an error; file does not exist on current directory.
The following is my App.config code:
App.config(function($routeProvider, $locationProvider) {
$routeProvider.caseInsensitiveMatch = true;
$routeProvider
.when("/home", {
controller: "homeController",
templateUrl: "templates/home.html",
})
.when("/api", {
controller: "apiController",
templateUrl: "../ExclusiveAutoSales_Handler.ashx",
})
.when("/filter", {
controller: "filterController",
templateUrl: "templates/filter.html",
})
.otherwise({
redirectTo: "/home"
})
$locationProvider.html5Mode(true);
});

AngularJS routing doesn't work

I can't implement angularJS routing in my page, when I first made it, it worked, but after browser returns nothing.
Code:
http://plnkr.co/edit/lIXeC0X6SkzXKcr8hoAp?p=catalogue
app:
angular.module('$routingApp', ['ngRoute'])
.config(['$routeProvider', function($routeProvider){
$routeProvider
.when('/', {
templateUrl: 'main.html'
})
.otherwise({
redirectTo: '/'
});
}]);

The problem is with your module name, as suggest by #sp00m, see the updated plunkr link below :
angular.module('routingApp', ['ngRoute'])
.config(['$routeProvider', function($routeProvider){
$routeProvider
.when('/', {
templateUrl: 'main.html'
})
.otherwise({
redirectTo: '/'
});
}]);
PLUNKR

Tried to load angular more than once with MVC4

I installed AngularJs with MVC4 using Nuget package and created a bundle for AngularJS
bundles.Add(new Bundle("~/bundles/scripts")
.Include("~/Scripts/angular.js")
.Include("~/Scripts/jquery-{version}.js"));
In Layout I included it as follow:
#Scripts.Render("/scripts/angular-route.js")
#Scripts.Render("/scripts/loginController.js")
#Scripts.Render("/scripts/routeConfig.js")
routeConfig.js
angular
.module('MyApp', [
'ngRoute',
'MyApp.ctrl.crud',
])
.config(['$routeProvider', '$locationProvider', function ($routeProvider, $locationProvider) {
$routeProvider.when('/', {
templateUrl: '/Home/Index',
// controller: 'loginController'
});
$routeProvider.when('/login', {
templateUrl: '/Home/loginPage',
controller: 'crudController'
});
$locationProvider.html5Mode({
enabled: true,
requireBase: false
});
}]);
loginController.js
angular
.module('MyApp.ctrl.crud', [])
.controller('loginController', [
'$scope',
function ($scope) {
alert("In Login Controller")
}
]);
When I program is display following exception:
WARNING: Tried to load angular more than once.
Why I get this Warning?

How to inject dependencies in app.config in angularjs?

I've been getting errors when minifying my AngularJS app because manually injected dependencies aren't working how I'd expect. The following didn't work:
var config = app.config(function($routeProvider) {
$routeProvider
.when('/', {controller: 'PageCtrl', templateUrl: '../templates/home.html'});
.otherwise({redirectTo: '/'});
});
config.$inject = ['$routeProvider'];
The only thing that worked is:
app.config(['$routeProvider', function($routeProvider) {
...
}]);
Why does the first dependency injection technique work for controllers but not configs?

It is because app.config returns reference to the app (for chaining). This code works:
var config = function($routeProvider) {
$routeProvider
.when('/', {controller: 'PageCtrl', templateUrl: '../templates/home.html'})
.otherwise({redirectTo: '/'});
};
config.$inject = ['$routeProvider'];
app.config(config);
http://jsfiddle.net/ADukg/3196/

Categories

Resources