I am using routesegment provider for routing in angular. how can i make a url call using $location.path().
Code is below :
FinancialGameApp.config(['$routeSegmentProvider', '$routeProvider', function ($routeSegmentProvider, $routeProvider) {
// Configuring provider options
$routeSegmentProvider.options.autoLoadTemplates = true;
// Setting routes. This consists of two parts:
// 1. `when` is similar to vanilla $route `when` but takes segment name instead of params hash
// 2. traversing through segment tree to set it up
$routeSegmentProvider
.when('/Home', 's1')
.when('/Login', 's2')
.when('/Signup', 's3')
.when('/UserDetails', 's4')
.segment('s1', {
templateUrl: 'Views/home.html',
controller: 'loginController'
})
.segment('s2', {
templateUrl: 'Views/login.html',
controller: 'loginController'
})
.segment('s3', {
templateUrl: 'Views/signup.html',
controller: 'loginController'
})
.segment('s4', {
templateUrl: 'Views/UserDetailsPage.html',
controller: 'userDetailsController'
})
$routeProvider.otherwise({ redirectTo: '/Home' });
}]);
And I want to call the segment s4 through method call using $location.path()
authService.login($scope.loginData).then(function (response) {
$location.path('/UserDetails');
}
Try it by adding # before the url.
authService.login($scope.loginData).then(function (response) {
$location.path('/#/UserDetails');
}
Also, you can use segment name with getSegmentUrl to get the hash instead of the direct url
authService.login($scope.loginData).then(function (response) {
$location.path($routeSegment.getSegmentUrl('s4'));
}
Related
I have the following routing:
app.config(['$routeProvider',
function ($routeProvider) {
$routeProvider.
when('/panel', {
templateUrl: 'views/panel.html'
}).
when('/make', {
templateUrl: 'views/makePanel.html',
controller: 'painelCtrl'
}).
when('/paneluser', {
templateUrl: 'views/panelUser.html',
controller: 'userCtrl'
}).
when('/paneluserblocks', {
templateUrl: 'views/userPanels.html',
controller: 'userCtrl'
}).
when('/registred', {
templateUrl: 'views/registredPanels.html'
}).
when('/color', {
templateUrl: 'views/color.html',
controller: 'alarmCtrl'
}).
otherwise('/', {
templateUrl: 'Index.html',
});
}]);
When I specify a controller for a particular html template, my $scope variables are no longer updated in the view.
When I pull out the controller specification for a particular route, things return to normal.
The controller 'userCtrl' is accessed through $location and is intended for ordinary users. In turn, 'Ctrl panel' is the primary controller assigned to admin users.
Could anyone tell me what's going on?
I haven't all information, but it's working in my demo.
Config
var app = angular.module('app',['ngRoute']);
app.config(['$routeProvider',
function ($routeProvider) {
$routeProvider.
when('/panel', {
templateUrl: 'views/panel.html'
}).
when('/make', {
templateUrl: 'views/makePanel.html',
controller: 'painelCtrl'
}).
otherwise('/', {
templateUrl: 'Index.html',
});
}]);
Definition of your controller:
app.controller('painelCtrl',painelCtrl);
painelCtrl.$inject = ['$scope'] //and more if you need $http, services, ...
function painelCtrl($scope){
$scope.hello= "hello world"
}
HTML
<h1>{{hello}}</h1>
I'm sorry for the igenuidade. I believed that the pages being in the same controller, I would never miss the reference:
When ('/panel', {
TemplateUrl: 'views/panel.html',
Controller: 'panelCtrl'
}).
When ('/make', {
TemplateUrl: 'views/makePanel.html',
Controller: 'panelCtrl'
}). cotinue...
In fact, views panel.html and makePanel.html will use the same controller structure, however we will have one instance for each view (variables will be reseted).
In my case I used factory functions to solve the problem. Every time I mute controller, I store the information of interest through a set () and get it through a get ();
app.factory("MonitorService", function () {
var info;
function set(data) {
info = data;
}
function get() {
return info;
}
return {
set: set,
get: get
}
});
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 have two URLs in my config file like:
module.config(['$routeProvider',
function($routeProvider) {
$routeProvider.
when('/:param1', {
templateUrl: 'shop.html',
controller: 'RouteController'
}).
when('/contact', {
templateUrl: 'contact.html',
controller: 'RouteController'
}).
otherwise({
redirectTo: '/'
});
}
]);
I am using 'param1' variable to fetch data from server. But when I route to '/contact' it considers 'contact' as a variable too and route it to the upper route i.e. variable route. How can I avoid this without using any extra identifier in route1.
I'm using angular 1.5.0-beta2
i want to be able to read the parameter /cocktail/:cocktail_name
here i define the app and controller:
var app = angular.module('myalcoholist',['ngMaterial','ngRoute']);
app.controller('CocktailController',['$scope','$http', function ($scope,$http) {
$scope.cocktailStepsRows=null;
$http({
method: 'GET',
url: 'http://api.myalcoholist.com:8888/cocktail/steps/' + $scope.cocktail_name
}).then(function successCallback(response) {
$scope.cocktailStepsRows=response.data;
}, function errorCallback(response) {
alert('error');
});
}]);
as you can see i'm trying to append to the api url $scope.cocktail_name
this is how i configure ng-view:
app.config(['$routeProvider','$locationProvider',
function($routeProvider,$locationProvider) {
$locationProvider.html5Mode(true);
$routeProvider.
when('/',{
templateUrl: 'views/index.html',
controller: 'IndexController'
}).
when('/login', {
templateUrl: 'views/login.html',
controller: 'LoginController'
}).
when('/cocktail/:cocktail_name', {
templateUrl: 'views/cocktail.html',
controller: 'CocktailController'
}).
otherwise({
redirectTo: '/'
});
}]);
as you can see i configured the route properly to receive the cocktail_name parameter.
now the problem i'm having is that in the controller, $scope.cocktail_name is undefined.
in the view when i print cocktail name
{{cocktail_name}}
I receive the parameter properly. why not in the controller?
what am I missing?
You did not copy the parameter value to the scope. Fix it using:
$scope.cocktail_name = $routeParams.cocktail_name
I have several views that use the same template, only the number of route params is different, how can I set it up so that the view doesn't get rerendered every time the route changes, tried with reloadOnSearch: false, but it didn't work for some reason.
app.config(['$routeProvider', function ($routeProvider) {
$routeProvider
.when('/feeds', {
templateUrl: 'partials/feeds.html',
controller: 'FeedsController'
})
.when('/feeds/:country', {
templateUrl: 'partials/feeds.html',
controller: 'FeedsController'
})
.when('/feeds/:country/:competition', {
templateUrl: 'partials/feeds.html',
controller: 'FeedsController'
})
.otherwise({
redirectTo: '/feeds'
});
}]);
According to the documentation, You cannot define multiple path's for one route. So in your case you should define two unique routes like:
app.config(['$routeProvider', function ($routeProvider) {
$routeProvider
.when('/feeds/:country/:competition/:event', {
templateUrl: 'partials/event.html',
controller: 'EventController'
})
.when('/feeds/:country/:competition', {
templateUrl: 'partials/feeds.html',
controller: 'FeedsController'
})
.otherwise({
redirectTo: '/feeds'
});
}]);
Difference, always call this URL with full params like:
http://yourapplication/feeds/false/false/false
http://yourapplication/feeds/1/false/false
http://yourapplication/feeds/1/2/false
http://yourapplication/feeds/1/2/3
And the one who is calling FeedsController is still unique with only two params:
http://yourapplication/feeds/1/2/