I'm working on an Angular.js application. It has 7 "pages" that make up a report about backlinks. The main url looks like http://www.site.com/report/# so the first route below '/' points to that URL.
My problem is I want to have the report ID in the url. So something like this. http://www.site.com/report/#/:reportId or http://www.site.com/report/#/99DF82A023FCE3515BE9A18F00908939F5A29D14.
I need to access that ID and store it somehow for each page. So on http://www.site.com/report/#/live I still need access to reportID.
Im sure this is a simple thing but Im an Angular noob. Can someone point me towards a tutorial for this? Here's what I have so far.
'use strict';
// Declare app level module which depends on filters, and services
var ultModule = angular.module('ultimate-report', ['ngRoute', 'ngCookies', 'ngTable', 'ultimate.filters','ultimate.services','ultimate.directives','myApp.controllers', 'ultimate.config']);
ultModule.config(['$routeProvider', function($routeProvider, $routeParams) {
$routeProvider
.when('/', {templateUrl: '../partials/report/about.html', controller: 'CtrlReport'})
.when('/live', {templateUrl: '../partials/report/links-live.html', controller: 'CtrlLinksLive'})
.when('/dead', {templateUrl: '../partials/report/links-dead.html', controller: 'CtrlReport'})
.when('/selected', {templateUrl: '../partials/report/links-selected.html', controller: 'CtrlReport'})
.when('/patterns', {templateUrl: '../partials/report/patterns.html', controller: 'CtrlReport'})
.when('/exports', {templateUrl: '../partials/report/export.html', controller: 'CtrlReport'})
.when('/help', {templateUrl: '../partials/report/help.html', controller: 'CtrlReport'})
.otherwise({redirectTo: '/'});
}]);
So do you really want the other urls (e.g. http://www.site.com/report/#/live) to not have the report id in them? It would be a lot easier/shorter if you had the parameters in each adress (e.g. http://www.site.com/report/#/12334223287/live).
Nonetheless, I would create my own service ('ReportID') that just stores the report ID. And then include both $routeParams and ReportID (your service) as dependencies in your controller.
app.controller('CtrlReport', ['$routeParams', 'ReportID', '$scope'],
function($routeParams, ReportID, $scope){
ReportID.id = $routeParams.reportID;
})
and set up your route as such
.when('/report/:reportID', ...)
Angular ui-router is a great extension to Angular.js that makes it easy to handle route parameters, nested views etc.
As others have pointed out, keeping the ID in the url for all pages is a good idea - without that people cannot bookmark the page and go straight back to viewing the same item in the same view.
Related
I'm learning AngularJs at present and I've hit a brick wall due to my lack of knowledge on it.
What I'm trying to do is pass in a Id (guid) within the URL and inside my controller I'll retrieve it and pass it to a WebApi to return some data linked to that Id.
However I'm unable to get the route correct, my currently URL looks like this:
http://localhost:15216/
When I pass in the Id it will look something like this
http://localhost:15216/573637
Quite straight forward, my page is called index.html, after browsing the web and looking at this question and basically replicating what he/she has provided I'm still unable to retrieve the value from my URL.
This is my current configuration:
var myApp = angular.module('christmasvip', ['ngRoute'])
.config(['$routeProvider', function ($routeProvider) {
$routeProvider.when('/:userId', { templateUrl: '/index.html', controller: 'mainController' }).
otherwise({ redirectTo: '/index.html' });
}]);
And this is my Controller:
myApp.controller("mainController", function ($scope, $http, $routeParams) {
var userId = $routeParams.userId;
alert(userId);
});
I then manipulate the URL so it would look like :
http://localhost:15216/573637
But when I alert the userId it say's "underfined"
I've also included angular-route.js in my project
Any help/solution would be great.
In the documentation of ngRoute you can find an example... Try using the URL: http://localhost:15216/index.html#/573637
// Given:
// URL: http://server.com/index.html#/Chapter/1/Section/2?search=moby
// Route: /Chapter/:chapterId/Section/:sectionId
//
// Then
$routeParams ==> {chapterId:'1', sectionId:'2', search:'moby'}
Can you try the url
http://localhost:15216/#/573637
I assume your root is http://localhost:15216/
your confusing the $routeProvider in the config you say
.config(['$routeProvider', function ($routeProvider) {
$routeProvider.when('/:userId', { templateUrl: '/index.html', controller:'mainController' }).
so your telling it, "if we see any url like this '/anything' take 'anything' and supply it as a parameter to the $routeParam service
then you add
otherwise({ redirectTo: '/index.html' });
which tells it, if you get any other url redirect to "/index.html", but index.html is something so its going to want to route you to '/' with the route param as 'index.html'
also you need to make sure you have <ng-view></ng-view> inside of your index.html file for the $routeProvider to load the route correctly, that is probably your main issue, but the first thing i mentioned would probably be an error once you add it.
I am wondering how to work angularjs ngRoute and htaccess rewrite together.
I have ngRoute working so I get URLs like these:
http://domain.com/#/something/somestring
But I would very much like this result:
http://domain.com/something/somestring
In other words, I'd like to get rid of /# in my URLs.
I've done this before with .htaccess and mod_rewrite.c and PHP, but I have no clue how to achieve the same result with AngularJS.
Any pointers, tutorial-links, articles, etc. that explains how this can be done, or simply an example would be greatly appreciated.
A few requirements:
I should still be able to do my routing the same way I've done so far:
blogApp.config(['$routeProvider',
function($routeProvider) {
$routeProvider.
when('/page/:pagePermaLink', {
templateUrl: './assets/templates/page.html',
controller: 'pageCtrl'
}).
when('/article', {
templateUrl: './assets/templates/article.html',
controller: 'articleCtrl'
}).
otherwise({
redirectTo: '/home',
templateUrl: './assets/templates/page.html',
controller: 'mainCtrl'
});
}]);
The URL query string, like :pagePermaLink should still be accessible from the scope:
blogCtrl.controller('pageCtrl', ['$scope', '$routeParams', '$http',
function($scope, $routeParams, $http) {
var foo = $routeParams.pagePermaLink;
// ...
}]);
If you've already done your rewrites, you should just be able to set $locationProvider.html5Mode(true). See https://github.com/angular-ui/ui-router/wiki/Frequently-Asked-Questions#how-to-configure-your-server-to-work-with-html5mode
Also, similar stack overflow questions might be of assistance:
Angular Direct Url without hash
$location / switching between html5 and hashbang mode / link rewriting
In my Angular app, I'm trying to render partials that load into the index page when a user clicks a link. It worked fine before with the following code:
//app.js in Angular
angular.module('myApp', [
'ngSanitize',
'ngRoute',
...
]).
config(['$routeProvider', '$locationProvider', '$sceDelegateProvider', function($routeProvider, $locationProvider, $sceDelegateProvider) {
$routeProvider.when('/view1', {templateUrl: 'partials/partial1.html', controller: 'MainController'});
$routeProvider.when('/File/:fileID', {templateUrl: 'partials/currentFile.html', controller: 'FileController', controllerAs: 'file'});
$routeProvider.otherwise({redirectTo: '/view1'});
$sceDelegateProvider.resourceUrlWhitelist([
'self',
'https://www.url.com/**']);
$locationProvider.html5Mode(true);
}]);
But when I add Express, it doesn't work:
var express = require("express");
var logfmt = require("logfmt");
var app = express();
app.use(logfmt.requestLogger());
app.use(express.static(__dirname + '/app'));
app.use('/bower_components', express.static(__dirname + '/bower_components'));
app.get('*', function(req, res) {
res.sendfile('./app/index.html');
});
This works fine if I just want to display the index page. When I add the following code though, it displays the plain HTML (of the partial), but without the CSS or Javascript.
app.get('/partials/currentFile.html', function(req, res) {
res.render('./app/partials/currentFile.html');
});
How do I go about rendering a partial with Express in a way that works with Angular?
I've tried looking at the Express api for get(), render and sendfile, but they weren't that helpful in my situation. Other users have asked a similar question on here before, but they usually involve another file that Express routes to and I'm wondering if I can do it without adding any extra files since it's already an issue with adding just a file to include Express.
The currentFile.html doesn't load any CSS or Javascript itself. Before I added Express, it was a partial that was loaded in index.html, which loaded all the extras.
Any help is appreciated. Thank you
I didn't fix the problem directly, but I worked around it. The problem was that I wanted to render a partial onto the index page. The overarching goal of the app is a single-page application, so in the end, it's just one page that matters.
It would have been nice to have different partials to render for testing, but alas nobody seems to know either what I'm asking or I'm complicating the issue. Either way, I've found a way around it by just getting rid of all the other partials and just redirecting all URL requests to the single page app.
config(['$routeProvider', function($routeProvider) {
$routeProvider.when('/view1', {templateUrl: 'partials/partial1.html', controller: 'MainVideoController'});
$routeProvider.when('/view2', {templateUrl: 'partials/partial2.html', controller: 'MyCtrl2'});
$routeProvider.when('/file', {templateUrl: 'partials/currentFile.html', controller: 'FileController', controllerAs: 'file'});
$routeProvider.otherwise({redirectTo: '/file'});
...
Note that the partials view1 and view2 DO NOT work when trying to visit domain.com/view1 or /view2.
I am just getting started with an angular project. We have a number of simple views and controllers, and have been using the mechanism provided by $routeProvider to map controllers to views. Upon updating to angular v1.2.0 the $routeProvider mechanism appears to be gone and replaced with something better. However, I have not been able to find a coherent code example showing how to make the switch.
What I have looks like this:
theApp.config(function ($routeProvider) {
$routeProvider
.when('/', {
templateUrl: 'views/main.html',
controller: 'MainCtrl'
})
.when('/foo', {
templateUrl: 'views/foo.html',
controller: 'FooCtrl'
})...
What has that changed to?
Thanks
It is still $routeProvider, but they moved it out into a module. You need to add it to the list of dependencies for your app by injecting 'ngRoute'.
You can get the routing module with the others for http://code.angularjs.org/1.2.0-rc.2/
here.
I have the following set up:
var userSystemApp = angular.module("userSystem",['userServices','groupServices']).
config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider) {
$routeProvider.
when('/user', {templateUrl: 'user/partials/userlist.html', controller: 'userListController'}).
when('/user/:userName', {templateUrl: 'user/partials/userdetail.html', controller: 'userDetailController'}).
when('/group',{templateUrl: 'group/partials/grouplist.html', controller: 'groupListController'}).
when('/group/:groupName', {templateUrl: 'group/partials/groupDetail.html', controller: 'groupDetailController'}).
otherwise({redirectTo: '/user'});
}]);
When I go to localhost/#/user the groupListController is activated.
When I go to localhost/#/group the groupListController is activated but it uses the userlist.html partial template.
Why isn't it using the proper controller? Am I fundamentally using routing and templates improperly?
(side note, I have mod_rewrite taking rewriting the blank path to index.html)
Probably there is an error where the controllers are defined.
It seems you have something like:
userSystemApp.controller('userListController', theFunction);
But theFunction instead of being the correct one, which returns the userListController, is by mistake the one which defines the groupListController.