I'm a newbie with AngularJS and I got a problem that I think that's it's can be configurable in my routeProvider.
I have this route
angular
.module('app', ['ngRoute', 'ngStorage'])
.config(['$routeProvider', function ($routeProvider) {
debugger;
$routeProvider.when('/:module/:task/:id/:menu/:action', { templateUrl: 'app/blank.html', controller: PagesCtrl });
$routeProvider.when('/:module/:task/:id/:menu', { templateUrl: 'app/blank.html', controller: PagesCtrl });
$routeProvider.when('/:module/:task/:id', { templateUrl: 'app/blank.html', controller: PagesCtrl });
$routeProvider.when('/:module/:task', { templateUrl: 'app/blank.html', controller: PagesCtrl });
$routeProvider.when('/:module', { templateUrl: 'app/blank.html', controller: PagesCtrl });
$routeProvider.when('/', { templateUrl: 'app/start.html' });
$routeProvider.otherwise({ redirectTo: '/' });
}
]);
the problem: When I just type http://localhost:53379 I'm redirected to http://localhost:53379/#/ . Where come from the /#/ ?
By default, AngularJS will route URLs with a hashtag.
For example:
http://domain.com/#/home
http://domain.com/#/about
You can very easy remove the hashtag from the URL by setting html5Mode to true in your config:
$locationProvider.html5Mode(true);
so in your code it will be:
angular
.module('app', ['ngRoute', 'ngStorage'])
.config(['$routeProvider', '$locationProvider', function ($routeProvider, $locationProvider) {
debugger;
$routeProvider.when('/:module/:task/:id/:menu/:action', { templateUrl: 'app/blank.html', controller: PagesCtrl });
$routeProvider.when('/:module/:task/:id/:menu', { templateUrl: 'app/blank.html', controller: PagesCtrl });
$routeProvider.when('/:module/:task/:id', { templateUrl: 'app/blank.html', controller: PagesCtrl });
$routeProvider.when('/:module/:task', { templateUrl: 'app/blank.html', controller: PagesCtrl });
$routeProvider.when('/:module', { templateUrl: 'app/blank.html', controller: PagesCtrl });
$routeProvider.when('/', { templateUrl: 'app/start.html' });
$routeProvider.otherwise({ redirectTo: '/' });
$locationProvider.html5Mode(true);
}
]);
Just after that you have to make sure that your backed will redirect all requests to your home page if you are doing "Single Page App"
Angular adds it by default. I don't know it this is the main reason, but one reason is that the routing doesn't work in older versions of IE. I had this problem in one angularjs app that didn't work in IE9 because of this reason.
Anyways, to remove the hashtag simply add $locationProvider.html5Mode(true); after your routing-declarations.
You can read more about it here: http://scotch.io/quick-tips/js/angular/pretty-urls-in-angularjs-removing-the-hashtag
This /#/ is used to create a single page application. the # is used to prevent that the page is completely reloaded. Angular then catches the new URL and loads the correct controller and partials depending on your route configuration.
Since HTML5 it is possible to remove this behavior with $location.html5Mode(true).
Source:
AngularJS documentation
Related
I want to add fusioncharts to my angularjs app. I have followed this link:
http://www.fusioncharts.com/blog/2015/03/angular-fusioncharts/
But as soon as I add ng-fusioncharts to my app.js as:
var app = angular.module('myApp',['ngRoute', 'firebase','ng-fusioncharts']);
app.config(function($routeProvider){
$routeProvider
.when('/', {
controller: 'OrgListController',
templateUrl: 'views/organization/list.html'
})
.when('/add_org', {
controller: 'OrgAddController',
templateUrl: 'views/organization/org_add.html'
})
.when('/edit_org/:id', {
controller: 'OrgEditController',
templateUrl: 'views/organization/org_edit.html'
})
.when('/add_access_point', {
controller: 'AccessPointAdd',
templateUrl: 'views/access_points/access_add.html'
})
.when('/edit_access_point/:id', {
controller: 'AccessPointEdit',
templateUrl: 'views/access_points/access_edit.html'
})
.when('/add_user', {
controller: 'UserAdd',
templateUrl: 'views/users/user_add.html'
})
.when('/edit_user/:id', {
controller: 'UserEdit',
templateUrl: 'views/users/user_edit.html'
})
.otherwise({
redirectTo: '/'
});
});
Nothing gets displayed and my whole project doesn't work. Viewing in console says :
error: inject modulerr.................
Somebody please suggest how to add multiple dependencies in one module?
You need to have fusion-chart.js inorder to inject ng-fusioncharts
var app = angular.module('HelloApp', ["ng-fusioncharts"])
DEMO
I'm trying to redirect after login to a specific page in Meteor using AngularJS. But somehow it is not working. After login Meteor.user() is returning null. Because of this every time it is routing to messages page only. I have seen this example from one of the forums and developed on top of that.
angular.module("jaarvis").run(["$rootScope", "$state", "$meteor", function($rootScope, $state, $meteor) {
$meteor.autorun($rootScope, function(){
if (! Meteor.user()) {
console.log('user');
if (Meteor.loggingIn()) {
console.log('loggingIn ' + Meteor.user()); -- returning null
if(Meteor.user()) {
$state.go('onlineusers');
} else {
//On login
$state.go("messages");
}
}
else{
console.log('login');
$state.go('login');
}
}
});
}]);
Routes declared as below.
angular.module('jaarvis').config(['$urlRouterProvider', '$stateProvider', '$locationProvider',
function($urlRouterProvider, $stateProvider, $locationProvider){
$locationProvider.html5Mode(true);
$stateProvider
.state('login', {
url: '/login',
templateUrl: 'login.ng.html',
controller: 'LoginCtrl'
})
.state('onlineusers',{
url: '/onlineusers',
templateUrl: 'client/onlineusers/onlineusers.ng.html',
controller: 'OnlineUsersCtrl'
})
.state('messages', {
url: '/messages',
templateUrl: 'client/chats.ng.html',
controller: 'ChatCtrl'
})
});
$urlRouterProvider.otherwise("/messages");
}]);
Logging using below snippet of code.
<meteor-include src="loginButtons"></meteor-include>
Michael is probably right about the root cause of the problem, but I think that a better alternative is provided by the the authentication methods of Angular-Meteor.
What you are going to want to do is to force the resolution of a promise on the route. From the Angular-Meteor docs (i.e. a general example...):
// In route config ('ui-router' in the example, but works with 'ngRoute' the same way)
$stateProvider
.state('home', {
url: '/',
templateUrl: 'client/views/home.ng.html',
controller: 'HomeController'
resolve: {
"currentUser": ["$meteor", function($meteor){
return $meteor.waitForUser();
}]
}
});
Your specific code would look something like:
angular.module('jaarvis').config(['$urlRouterProvider', '$stateProvider', '$locationProvider',
function($urlRouterProvider, $stateProvider, $locationProvider){
$locationProvider.html5Mode(true);
$stateProvider
.state('login', {
url: '/login',
templateUrl: 'login.ng.html',
controller: 'LoginCtrl'
})
.state('onlineusers',{
url: '/onlineusers',
templateUrl: 'client/onlineusers/onlineusers.ng.html',
controller: 'OnlineUsersCtrl',
resolve: {
"currentUser": ["$meteor", function($meteor){
return $meteor.waitForUser();
}]
}
})
.state('messages', {
url: '/messages',
templateUrl: 'client/chats.ng.html',
controller: 'ChatCtrl',
resolve: {
"currentUser": ["$meteor", function($meteor){
return $meteor.waitForUser();
}]
}
})
});
$urlRouterProvider.otherwise("/messages");
}]);
And then on your ChatCtrl and OnlineUsersCtrl controllers, you would add currentUser as one of the variables to inject, like:
angular.module("rootModule").controller("ChatCtrl", ["$scope", "$meteor", ...,
function($scope, $meteor, ..., "currentUser"){
console.log(currentUser) // SHOULD PRINT WHAT YOU WANT
}
]);
You might also want to consider the $meteor.requireUser() promise as well, and then send the user back to the login page if the promise gets rejected. All of this is documented very well on the angular-meteor website.
Good luck!
It could be that the user object hasn't loaded yet. You can try:
if ( Meteor.userId() ) ...
instead
I try to declare a route to use angular,in my security.yml after authentication i well be redirect to #/welcome but consider it a comment
default_target_path: #/welcome
my app.js
routeApp.config(['$routeProvider',function($routeProvider) {
// Routing system
$routeProvider
.when('/login', {
templateUrl: Routing.generate('login'),
controller: 'SecurityController'
})
.when('/welcome', {
templateUrl: Routing.generate('ard_backend_test'),
controller: 'WelcomeController'
})
.otherwise({
redirectTo: '/login'
});
}]);
Just add a double quote for your string and the hash # character will be able to escape.
default_target_path: "#/welcome"
Update: Do not define the default client route in your yml configuration.
This should be part of your angular router configuration. Depending which router you are using of course.
Here is an example with angular's default routeService:
angular.module('MyApp', ['ngRoute'])
.config(['$routeProvider', function($routeProvider) {
$routeProvider.
when('/welcome', {
templateUrl: 'partials/welcome.tpl.html',
controller: 'WelcomeCtrl'
}).
when('/some-other-route', {
templateUrl: 'partials/some-other-route.tpl.html',
controller: 'SomeOtherCtrl'
}).
otherwise({
redirectTo: '/welcome'
});
}]);
For some reason when I have a dynamic property in my route and access that page I get stuck in an infinite loop where that page will continuously request itself.
.config(["$routeProvider", "$locationProvider", function($routeProvider, $locationProvider)
{
$locationProvider.html5Mode(true);
$routeProvider.when("/", {
templateUrl: "pages/index.html",
controller: "IndexCtrl"
}).when("/listhome", {
templateUrl: "pages/listhome.html",
controller: "ListHomeCtrl"
}).when("/profile", {
templateUrl: "pages/profile.html",
controller: "ProfileCtrl"
}).when("/newlist", {
templateUrl: "pages/newlist.html",
controller: "NewListCtrl"
}).when("/userlists/:id", {
templateUrl: "pages/userlists.html",
controller: "UserListsCtrl"
}).otherwise({
redirectTo: "/"
});
The route I'm looking at is the /userlists/:id route. The controller for that route is-
TopTenApp.controller("UserListsCtrl", ["$scope","$routeParams", function($scope, $routeParams)
{
console.log($routeParams);
$scope.lists = [];
}]);
And when I access /userlists/9 I see-
Object {id: "9"}
Being logged every 3 seconds and the page freezes. This seems to happen whenever there is a forward slash after the location ("/userslists/" instead of "/userlists").
Does anyone know the cause of this?
Silly me I realized the problem. I guess it makes sense but the template url needs to have a forward slash in front of it when the page is multiple "directories" deep.
.config(["$routeProvider", "$locationProvider", function($routeProvider, $locationProvider)
{
$locationProvider.html5Mode(true);
$routeProvider.when("/", {
templateUrl: "/pages/index.html",
controller: "IndexCtrl"
}).when("/listhome", {
templateUrl: "/pages/listhome.html",
controller: "ListHomeCtrl"
}).when("/profile", {
templateUrl: "/pages/profile.html",
controller: "ProfileCtrl"
}).when("/newlist", {
templateUrl: "/pages/newlist.html",
controller: "NewListCtrl"
}).when("/userlists/:id", {
templateUrl: "/pages/userlists.html",
controller: "UserListsCtrl"
}).otherwise({
redirectTo: "/"
});
}]);
Hopefully that helps someone else with a similar problem.
I am using MVC Web API and Angular JS
When i am giving single routeProvider, then its working after adding one more routeProvider its not working....
My Code Is:
var phoneModelsApp = angular.module('phoneModelsApp', ['ngRoute']);
phoneModelsApp.config(['$routeProvider',
function ($routeProvider) {
$routeProvider.when('/phonelist', {
templateUrl: 'partials/Test1.html',
controller: 'phoneListCtrl'
}).
$routeProvider.when('/phonelist1', {
templateUrl: 'partials/Test2.html',
controller: 'phoneListCtrl'
}).
otherwise({
redirectTo: '/phonelist'
});
}]);
You need to add to in your urls "#" or adding in your configuration:
$locationProvider.html5Mode(true);
In order to remove the # in Angular you need to make an small change in your configuration:
You need to add:
$locationProvider.html5Mode(true);
This is the whole version:
myApp.config(function($routeProvider, $locationProvider) {
$locationProvider.html5Mode(true);
$routeProvider
.when('/page1', { template: 'page1.html', controller: 'Page1Ctrl' })
.when('/page2', { template: 'page2.html', controller: 'Page2Ctrl' })
});