I am trying to integrate a live site to be mobile friendly. Is there a way in AngularJS to take in a url e.g. ../15K6#colors and route it to the mobile routes which should be ../colors/15K6
I am looking into $routeProvider, but am still new to Angular. Any help would be appreciated!
Below is a snippet of my config block with $routeProvider
.config(
[ '$routeProvider', function($routeProvider) {
$routeProvider.when('/models', {
templateUrl : 'views/models/models.html'
}).when('/models/:modelCode', {
templateUrl : 'views/models/model-detail.html'
}).when('/colors/:modelCode', {
templateUrl : 'views/colors/colors.html'
}).when('/packages/:modelCode', {
templateUrl : 'views/packages/packages.html'
}).when('/packages/:modelCode/package-detail/:optionCode', {
templateUrl : 'views/packages/package-detail.html'
}).when('/options/:modelCode', {
templateUrl : 'views/options/options.html'
}).when('/accessories/:modelCode', {
templateUrl : 'views/accessories/accessories.html'
}).when('/accessories/:modelCode/accessory-options/:groupName', {
templateUrl : 'views/accessories/accessory-options.html'
}).when('/summary/:modelCode', {
templateUrl : 'views/summary/summary.html'
}).when('/disclaimer/:modelCode', {
templateUrl : 'views/disclaimer/disclaimer.html'
}).otherwise({
redirectTo : '/models'
// parse url for deep linking
// e.g. ../15K6#colors into colors/15K6
});
} ]
Better if you provide more code details what you have so far.
On top of my head i can tell that you to have pass the $location param when you define the controller.
myApp.module('MyController', function($scope, $location){
$location.path("url");
})
Or in the route path just ask for the mobile template instead of the desktop template
Related
app.config(function($routeProvider) {
$routeProvider
.when('/', {
templateUrl : 'junk.html',
})
. .when('/:pageuniqueid', {
templateUrl : 'page.html',
})
// route for the about page
.when('/first', {
templateUrl : 'first.html',
})
// route for the contact page
.when('/second', {
templateUrl : 'second.html',
});
});
If i type 'example.com/first' in the URL then instead of getting first.html i am getting page.html.
I am implementing the page that user can access directly with their dynamic pageid after base URL.
I want to get page.html only if it is not matched with the other routes. Is there a way to achieve this?
The order of the route definitions matters.
If you define the '/first' route before the '/:pageuniqueid', it should work.
The angular router stops evaluating the routes after the first match.
So in order to get the page.html as a fallback, you should put it as last entry in the list.
I need to set Angularjs routing to do nothing on "otherwise" method.
var townApp = angular.module('townApp', ["ngRoute"]);
townApp.config(function($routeProvider){
$routeProvider
.when("/dashboard", {
templateUrl : "/profile/dashboard/"
})
.when("/payments", {
templateUrl : "/profile/payments/",
})
.otherwise(
/* DO NOTHING.*/
)
});
Right now, it cleans the ng-view directive upon changing url to an undefined one and that's not what I need.
How can I make it stay on the same page and do nothing?
I found this Here.
I have no idea what is happening but it works as i want.
townApp.config(function($routeProvider){
$routeProvider
.when("/dashboard", {
templateUrl : "/profile/dashboard/"
})
.when("/payments", {
templateUrl : "/profile/payments/",
})
.otherwise({redirectTo: $routeProvider});
});
I would like to that way, if it exists, how to do that, ng-view (or ui view) loads, when load the page. For example: I would like to seperate header files, menu files, etc. So the Webpage should stands some views. I found only tutorials when views load after a click. Please inform me about this.
Thank you.
When you build your router you specify which template to show for every route. You can also create a default one like so:
.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 : 'aboutController'
})
// route for the contact page
.when('/contact', {
templateUrl : 'pages/contact.html',
controller : 'contactController'
})
.otherwise({redirectTo: '/'});
});
I have 2 states in my app currently. Each app has multiple views. I want on state to be activated on app start up. Right now, when the app starts, I only get the links. Then I have to click on any link to activate any state. How do I make a state opened by default?
states conf
var app = angular.module('dategenie', ['ui.router', 'ui.bootstrap', 'geolocation', 'ngIdle', 'infinite-scroll']);
app.config(['$stateProvider', '$urlRouterProvider', function($stateProvider, $urlRouterProvider) {
// For any unmatched url, redirect to /profile
$urlRouterProvider.otherwise('/');
// Now set up the states
$stateProvider.state('profile', {
views: {
mainModule: {
url : '/profile'
, templateUrl : 'partials/profile.html'
, controller: 'ProfileCtrl'
}
, rightPaneModule: {
templateUrl: 'partials/location.html'
, controller: 'LocationCtrl'
}
}
})
.state('profiles', {
views: {
mainModule: {
url : '/'
, templateUrl : 'partials/home.html'
, controller : 'HomeCtrl'
}
, chatModule: {
templateUrl : 'partials/chat.html'
, controller: 'ChatCtrl'
}
}
});
}]);
HTML
a(ui-sref="profile") Profile
a(ui-sref="profiles") Home
a(href="/logout") Logout
div(ui-view="mainModule")
div(ui-view="chatModule")
div(ui-view="rightPaneModule")
Thanks!
First of all, your url declaration should be outside of the views object.
So this is how your profiles state would look like:
.state('profiles', {
url : '/',
views: {
mainModule: {
templateUrl : 'partials/home.html'
, controller : 'HomeCtrl'
},
chatModule: {
templateUrl : 'partials/chat.html'
, controller: 'ChatCtrl'
}
}
});
Note: I'm not sure if this is still a valid concern, but I would put all of my view names in quotes. If memory serves me right, this had some implications earlier on with UI-router - not sure if that still applies.
Secondly, you need to make sure you have HTML5 Pushstate enabled if you wish for routing to pick up an active state on "/". Otherwise your 'root' would be "/#/".
Here's some code you can slap in say a push-state.js file;
app.config(['$locationProvider', function($locationProvider) {
return $locationProvider.html5Mode(true);
}]);
Quite useful to have in it's own file when you stumble upon errors with client side routing, I find most of my issues arise from PushState indescrepencies (so toggling it on and off is a nice little advantage when debugging).
Hope that works out for you, good luck : )
I am building the front-end app for a REST service, and most of the resources are located at long urls where most of the segments are dynamic based on records created in the app by users. Obviously I won't be able to know or create hardcoded routes for most of these records.
My question I suppose is how to handle urls like this with ui-router:
<semester>/<program>/<class>/enrollment
or
<semester>/myclasses/<class>/assignments
There is always at least one static, predictable segment in every resource url, and the segments are always in a predictable order.
Do I make abstract states for each segment in the url like:
$stateProvider.state(semester)
.state(program)
.state(class)
.state(assignments);
??
I've tried building routes that look like this:
param = {
name: "param",
url: "/:hue/:temp/param",
templateUrl: "http://localhost:81/route/tpl/param.tpl.html",
controller: "paramController"
};
but it ends up sending me back to the .otherwise() state when I link to the "param" state.
Thanks for any help, I'm a bit stumped.
I had a similar problem and I quickly coded this:
.config(function($stateProvider, $urlRouterProvider) {
$stateProvider.state('app', {
url : "/app",
abstract : true,
templateUrl : "layout/navigation-drawer.tpl.html"
}).state('app.help', {
url : "/help",
views : {
'menuContent' : {
templateUrl : "layout/help.html"
}
}
}).state('app.settings', {
url : "/settings",
views : {
'menuContent' : {
templateUrl : "layout/settings.html"
}
}
}).state('app.rate-us', {
url : "/rate-us",
views : {
'menuContent' : {
templateUrl : "layout/rate-us.html"
}
}
}).state('app.projects', {
url : "/projects",
views : {
'menuContent' : {
templateUrl : "layout/projects.html",
controller : 'ProjectsCtrl'
}
}
}).state('app.forms', {
url : "/:project_name/forms",
views : {
'menuContent' : {
templateUrl : "layout/forms.html",
controller : 'FormsCtrl'
}
}
}).state('app.entries', {
url : "/:project_name/:form_name/entries/:form_id",
views : {
'menuContent' : {
templateUrl : "layout/entries.html",
controller : 'EntriesCtrl'
}
}
});
which is working, "/:project_name/:form_name/entries/:form_id" will resolve to something like app/Mirko_test/University/entries/1
Ok so I tested this out and it works in my case. It fails when the state is only a parameter, but it seems as long as each state has a non-parameterized bit, ui-router is able to parse down to children states. I haven't seen this case demonstrated or explained anywhere before. Most tutorials only cover simple hardcoded nested states and not parameterized ones.
It's not ideal, but it works.
I hope this helps someone else facing this issue. :)
var app = angular.module('app', ['ui.router'])
.config(['$stateProvider', '$urlRouterProvider', '$locationProvider', function ( $stateProvider, $urlRouterProvider, $locationProvider) {
$urlRouterProvider.otherwise("/");
$locationProvider.html5Mode(true);
var semester = {
name: "semester",
abstract: true,
url: "semester/:sem",
templateUrl: "http://localhost:81/route/to/semtemplate.tpl.html",
controller: "semesterController"
},
program = {
name: "program",
parent: sem,
url: "program/:prg",
templateUrl: "http://localhost:81/route/to/prgtemplate.tpl.html",
controller: "programController"
},
classes = {
name: "classes",
parent: prg,
url: "/classes",
templateUrl: "http://localhost:81/route/to/clstemplate.tpl.html",
controller: "classesController"
};
$stateProvider.state(sem)
.state(prg)
.state(classes);
}]);
app.controller('paraController', ['$scope', '$stateParams', '$state',function($scope, $state, $stateParams){
console.log('paraController instantiated');
$scope.sem = $stateParams.params.sem;
$scope.prg = $stateParams.params.prg;
}]);
As this is a hierarchical REST api this pattern works perfectly, and when also taking advantage of scope inheritance from each controller it should be a good fit for my project. I haven't tested extremes of nested states, but it would be interesting to see how it behaves under even more parameterized states. The only limitation I have found is that each state needs to have a non-parameterized part as well. So /:sem fails but semester/:sem works fine.
It's not ideal as it makes URLs longer, but I haven't found a workable alternative.
I know this question is old, but I had essentially the same question recently and found the official answer. Apparently, angular ui-router now supports the notion of URL Parameters in URL Routing, which allow you to specify parameters, along the lines of the following:
$stateProvider
.state('contacts.detail', {
url: "/contacts/:contactId",
templateUrl: 'contacts.detail.html',
controller: function ($stateParams) {
// If we got here from a url of /contacts/42
expect($stateParams).toBe({contactId: 42});
}
})
For more info, go here: https://github.com/angular-ui/ui-router/wiki/URL-Routing#url-parameters