I'm trying to migrate my application from AngularJS 1.0.8 to 1.2.14 and it seems like there is some "new" URL decoding in 1.2.
I have following routing:
$routeProvider.when('/title/:simpleName/:simpleVersion', {templateUrl: 'partials/public/view/spec.html', controller: SpecificationCtrl});
$routeProvider.when('/title/:simpleName', {redirectTo: '/title/:simpleName/latest'});
And in one of my directives, I'm creating anchors like this:
link: function(scope, elem, attr) {
elem.html('...')
}
where simpleName can be some string like x/y++_test.
In Angular 1.0.8, if user clicks on such link, browser contains following URL:
.../title/x%252Fy%252B%252B_test
and everything works fine. But with Angular 1.2, browser for a second contains again the escaped form and then URL in browser changes to
.../title/x/y++_test
which is problem as it may not match my routing rules and routing parameters. When this change happens, according to Chrome Dev Tools, the page as such is not reloaded and controllers are created just once when the totally decoded URL is displayed.
Is there some new change that causes? How could I make it working the same way as in 1.0.8 ? I've searched Angular's changelog but haven't found any mention of url decoding.
Update:
I've created to Plunks with Angular 1.0.8 and 1.2.13 to demonstrate the issue (the only difference is that the link is hardcoded in HTML code instead of being generated by directive). Simply click on "here" link in the plunk and watch the displayed URL:
Plunk with Angular 1.0.8
Plunk with Angular 1.2.13
Try this:
<a ng-href="#/title/{{encodeURIComponent(simpleName)}}">...</a>
And inside the controller in case you haven't done it:
$scope.encodeURIComponent = encodeURIComponent;
Related
my singlepage angularjs application can be accessed through the root address of my webserver like.
localhost:8080/
When I chose to go for example to the home-state the application is supposed change the url in the browsers addessfield to localhost:8080/#/home where the first part (localhost:8080/) points to my angular application and the second part (#/home) points to the home-states url.
But instead of doing what it's supposed to do my angular-application changes the url in the browsers addressfield to localhost:8080/home which on reload obviously creates a 404.
Can any of you tell me what I am doing wrong or at least give me a hint on where to look?
disable the html5 mode from the config. add/change the following line in the config
$locationProvider.html5Mode(false);
This will add the # to your url.
You just have to say you don't use the HTML 5 mode with the $locationProvider. In your config file:
myApp.config(['$locationProvider', function($locationProvider) {
$locationProvider.html5Mode(false);
}]);
JSFiddle demo
I am using UI-Router for routes/states in my app and URLs were having "#" so to remove this , I used $locationProvider like -
function configState($stateProvider, $urlRouterProvider, $locationProvider) {
$locationProvider.html5Mode(true);
Added ngRoute in module dependency and added <base href="/" > in my index.html.
Problem -
If I am using it as a normal app like in same tab and navigates to other state, it works BUT whenever I pasted the URL in another tab and hit enter its throwing Cannot GET /app_views/contacts URL is like - http://localhost:9000/app_views/contacts
Though with hash in URL it works in both way manner.
You are likely getting this error because your server is not configured correctly. In other words when you manually enter /app_views/contacts it will make a request to the server for that page. For this to work properly you need configure your server to route all traffic to your index.html page in order for Angular to properly take over and display the correct view.
Here is a related post Reloading the page gives wrong GET request with AngularJS HTML5 mode
I am building an AngularJS application, it works well with hash URL.
If I click on an anchor <a href="#/3125/"> then the URL is updated to http://localhost:8000/app/index.html#/3125/ which is desired.
Now I plan to change the URL to HTML5 mode, so I configured the application with below code
var demoApp = angular.module('demoApp', ['demoResources']);
demoApp.config(['$locationProvider', function($locationProvider) {
$locationProvider.html5Mode(true);
}]);
Unfortunately, this time if I click on the same anchor, I got URL escaped as http://localhost:8000/app/index.html#%2F3125%2F thus the link is broken. However, the expected URL is http://localhost:8000/app/index.html/3125.
Does anyone know why this is not working? I am using Angular 1.2.1
You should add a <base> tag in the <head> section of your application :
<base href="/app"/>
See the "Relative Links" section in the $location documentation.
See also AngularJS subdirectory routing not working, with <base> tag applied
I'm trying to create a HTML5/JS/CSS3 App with angularJS on Windows 8.1 with visual studio 2012. I'm currently stuck on sending over parameters to other views.
When googleing I see several examples using link When I do this in my Windows 8 application and clicking on the link I am getting the following error.
No Apps are installed to open this type of link (unsafe)
When I put the {{:pageId}} code between the A tags it shows its ID.
app.js
var myApp = angular.module('myApp', ['ngRoute', 'ngResource']);
myApp.config(['$routeProvider', function($routeProvider) {
$routeProvider.when("/", { templateUrl: "views/home.html" })
.when("/page/:pageId", { templateUrl: "views/page.html" })
.otherwise({ redirectTo: "/" });
}]);
What is a solution to solve this problem?
--update--
I have done some more debugging.
In the browser it's all working fine.
In visual studio I have found the following:
<a class="ng-binding" href="unsafe:ms-appx://3595d292-0235-47cd-8db7-cb3019f29114/www/index.html#/page/1" data-ng-href="#/page/1">Select</a>
Looks like VS is adding some code. In the source I haven't include the href item
I have changed the link and all seems fine, also the correct variable is loaded only VS keeps adding 'unsafe:' at the frond of the link.
Problem solved!
seems like the ms-appx that is being added by ms causes the problem. This is being resolved by addeing this following code.
AngularJS 1.2
app.config(['$compileProvider', function($compileProvider) {
$compileProvider.aHrefSanitizationWhitelist(/^\s*(https?|file|ms-appx):/);
}]);
For 1.1.x and 1.0.x, use urlSanitizationWhitelist.
If you use PhoneGap, remember to add file besides https?, otherwise, links will not work.
I have AngularJS setup to use HTML5 routes and it works great on urls like website.com/foo but when I create routes for sub pages, eg: website.com/foo/bar it only shows the correct page when clicking a link to it on my site. If I type the url into my browser and attempt to directly access it I get a blank page section where the ng-view content should be loading.
app.when('/promotion/events', {
templateUrl: '/assets/tpl/promotion/events/home.html',
controller: PromotionEventsCtrl
});
It appears to be a bug in Angular 1.1.5 that is effecting URL parsing in HTML5 routes. Rolling back to 1.1.4 fixes the problem.
More information here: https://github.com/angular/angular.js/issues/2833