I am building angular single page application with ui-routing. I need to hide the url after the domain from end user.It shuld not affect any other feature like accessing url or anything, but just want to hide the state changes from end user. Which is the best way to do that?
you can do that with ui-router library by creating the URL-less states and navigate to them ,like this:
angular.module('app', ['ui.router'])
.config(function ($stateProvider) {
$stateProvider
.state("home", {
url: "",
template: "<a ui-sref='next'>Next page</a>"
})
.state("next", {
template: "<a ui-sref='home'>Back</a>"
});
});
Related
Following is my code:
var app = angular
.module('moviesApp', ['ui.router'])
.config(function ($stateProvider, $locationProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('/SignIn');
$stateProvider
.state("SignIn", {
url: "/SignIn",
templateUrl: "Pages/SignIn.html"
})
.state("SignUp", {
url: "/SignUp",
templateUrl: "Pages/SignUp.html"
});
$locationProvider.html5Mode(true);
});
When I load the state - '/SignIn' it loads the contents of 'Pages/SignIn.html' in ui-view as expected. Similarly, when I load the other state - '/SignUp' it loads the contents of 'Pages/SignUp.html' in ui-view.
What is my requirement?
I want 'Pages/SignIn.html' or 'Pages/SignUp.html' to be loaded only through states in ui-view. They should not be loaded through direct URL navigation in browser.
In other words, when I type '/Pages/SignIn.html' directly in the browser's address bar, it should be redirected to the state '/SignIn'.
The contents of html files under 'Pages' folder should not get displayed over direct url navigation.
How can I achieve this? Please advise.
To prevent it from showing in the address bar use name instead of url
$stateProvider.state('default', {
url:'',
templateUrl: ctx + '/jsp/home/dashboard.jsp'
}).state({
name:'/test',
templateUrl: ctx + '/jsp/home/testview.jsp'
});
In the html page give as below
<a ui-sref="test">test view</a></li>
I am building a web aplication with AngularJS. I am using ui-router and I have defined states like this:
//appContacts.js
(function () {
"use strict";
var app = angular
.module('appContacts', ['ui.router', 'angularUtils.directives.dirPagination'])
.config(['$stateProvider', '$locationProvider', '$urlRouterProvider',
function ($stateProvider, $locationProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise("/");
$stateProvider
.state("home", {
url: "/",
templateUrl: "views/contactsView.html",
controller: "contactsController",
controllerAs: "vm"
})
.state("organization", {
url: "/organizations/:Id",
templateUrl: "views/organizationDetail.html",
params: { Id: null },
controller: "organizationsController",
controllerAs: "vm"
})
.state("contact", {
url: "/contact/:Id",
templateUrl: "views/contactDetails.html",
params: { Id: null },
controller: "contactsDetailController",
controllerAs: "vm"
})
$locationProvider.html5Mode({
enabled: true,
requireBase: false,
rewriteLinks: true
});
$locationProvider.html5Mode(true);
}
]);
})();
I get requested information from the Database using HTTP methods. I have two issues:
When I refresh the page the page get blank. Any idea what I am doing wrong?
The home page controller calls automatically the HTTP methods that populate a table using ng-repeat. That means that it is impossible to visit another page directly like http://localhost:50895/contact/the-id because there is not data stored. I always have to visit the home page to load the data. How could I save and make available that data to all pages/states/controllers?
EDIT:
I have 4 error shown in the console.
Could you please debug it and check the browser console for any errors or exceptions??
There are three ways in which you can pass the data around:
a) Use $rootScope , but this is not considered as proper coding standard
b) Make use of the inbuilt .service() provided by AngularJs, this is a singleton object, means the value set into it in the first controller can be used anywhere down the line. But the value will be erased if you refresh the page.This is considered as better coding standard than using $rootScope
c) You can make use of localStorage or sessionStorage, using this the data can be retrieved even after the page refresh. Data will be stored as string, so parsing is needed.
There is one more way to store the data , Cookies. But this is used to store small string values.
My angular application has multiple pages which users can visit and I would like to hide all other urls and only show users the base url. So imagine my base url is: www.example.com and I have other pages like About, Contact Us etc. Currently, when the user clicks on About, the url changes to www.example.com/about. Is it possible for angular not to add the "/about"? Is this possible using angular js? Also, I have been searching for solutions and have experimented with ui-router.js, is it also possible with this module?
If you are using ui-router, then you can define states without specifying urls like
myApp.config(function($stateProvider, $urlRouterProvider) {
//
// For any unmatched url, redirect to /state1
$urlRouterProvider.otherwise("/state1");
//
// Now set up the states
$stateProvider
.state('state1', {
url: "/state1",
templateUrl: "state1.html",
controller: 'Controller3'
})
.state('state2', {
templateUrl: "state2.html",
controller: 'Controller2'
})
.state('state3', {
templateUrl: "state3.html",
controller: 'Controller3'
})
});
So by default the url will be /state1. And you can implement navigation by using ui-sref directive in your template like ui-sref="state2" or using $state service in your controller like $state.go('state2').
I have an MVC 5 app with areas and I am trying to use the ui-router for AngularJs within one of my areas but I noticed that the templateUrl is wrong. It is trying to use a relative path but since I am using MVC routes and an Area the path to the template is incorrect.
The url to my area controller action is localhost:3789/Admin/UserManager .
The actual path is /Areas/Admin/Scripts/app/usermanager/partials/userlist.html .
angular.module("bsAdmin.userManager", ["ngResource", "ui.router", "ui.bootstrap", "bsPromiseTracker", "bsBusy", "angular-growl", "ngAnimate"])
.config(function ($stateProvider, $urlRouterProvider) {
// default state
$urlRouterProvider.otherwise("/userlist");
$stateProvider
.state('userlist', {
url: "/userlist",
templateUrl: "partials/userlist.html"
});
});
Angular ui-router tries to load the partial template using localhost:3789/Admin/partials/userlist.html
What are some techniques I can use so that the script will use the correct url to load the partial?
If your Angular javascript is in your .cshtml file, you can use the ASP.NET MVC URL helper to build the URL.
$stateProvider
.state('userlist', {
url: "/userlist",
templateUrl: "#Url.Content("~partials/userlist.html")"
});
});
Essentially how can I detect whether a specific route has been linked to from within an Angular application or accessed directly from a user typing that URL into the address bar from within the configuration phase?
I know I can listen for the $locationChangeSuccess event like follows:
$Scope.$on('$locationChangeSuccess', function(evt, newUrl, oldUrl) {
// -- do something with oldUrl --
});
on either $Scope or $rootScope but these instances are not available during the configuration phase.
Maybe I am making this more complicated than it needs to be but any help would be much appreciated.
Update
To give some context. Some of the routes in my application load the associated template into a modal window instead of into a standard view. I am using ui-router with the basic configuration below:
app.config(['$stateProvider', '$urlRouterProvider', '$locationProvider', function($stateProvider, $urlRouterProvider, $locationProvider) {
$stateProvider.state('index', {
url: '/',
templateUrl: 'index.html'
});
$stateProvider.state('foo', {
url: '/foo',
views: {
'': {
template: '='
},
modal: {
templateUrl: 'modal.html'
}
}
});
}
]);
And the main template:
<div class="main" ui-view></div>
<div ui-view="modal"></div>
This works fine if the user accessed /foo via a link (ui-sref="foo") however the problem I have is that if the /foo route is entered directly into the address bar the underlying template does not exist obviously. I could manually set it if the page is accessed in this way instead. So if I can tell where the request has come from then I can set the template accordingly but it needs to be done in the configuration phase above (at least I think it does).
Note that if I were set the template explicitly it would be reloaded on each request to /foo which is not the desired result.
I can propose a solution, but i'm not sure it will make sense in the context of your application.
You could have the foo route be a sub route of the index route:
app.config(['$stateProvider', '$urlRouterProvider', '$locationProvider', function($stateProvider, $urlRouterProvider, $locationProvider) {
$stateProvider.state('index', {
url: '/',
templateUrl: 'index.html'
});
$stateProvider.state('index.foo', {
url: '/foo',
views: {
'modal#': {
templateUrl: 'modal.html'
}
}
});
});
<div ui-view></div>
<div ui-view="modal"></div>
The 'downside' of this method is that if you need to reuse the modal in any other part of the application, you need to redefine the state declaration for each of the top level state you need them in.
If you find a better solution, please ping this answer, as i'm trying to solve a very similar problem.