In IE9 my angular routing does not work and it redirects me to whatever was before the '#' hashtag.
mysite.com/#/info -> mysite.com
even if i manually removes the /# from the URL and try again, i still get redirected.
It appends '#' to my URL because html5 mode uses History API when the browser supports it, and falls back to 'hashbang' (#) when it is not supported(like IE9).
$locationProvider.html5Mode(true);
$urlRouterProvider.otherwise("/");
$stateProvider
.state('statistics', {
url: "/path/:myId",
templateUrl: '../some/path/site.html',
controller: 'Ctrl'
}
);
been looking at various solutions such as:
AngularJS How to remove # symbol in IE9 by using route
https://gist.github.com/thomseddon/3834721
but neither of them are working for me.
I'm looking for a solution without having to deactivate html5mode. Anyone experienced similar issue and managed to fix?
In HTML5 mode, there are three situations in which the A tag is not rewritten: from the angular docs -
1 Links that contain a target attribute. Example: link
2 Absolute links that point to a different domain Example: link
3 Links starting with '/' that lead to a different base path when base is defined Example: link
You can try to use a global directive like this that add target='_self' to all all links without target.
myApp.directive('a', [function () {
return {
restrict: 'E',
link: function (scope, element, attrs) {
if (!attrs['target']) {
element.attr('target', '_self');
}
}
}
}]);
Related
So I am having an issue in setting up my angular routes.
Moving straight to the point, my angular routes defined don't hit my mvc controller and thus action methods.
The action method return partial views, which represent my templates.
Here is an image of my route configuration.
Here is an image of my controller actions.
I am sure I am missing something, but can't seem to figure out what.
This example helps you to understand better about $routeProvider and $locationProvider.
The only issue I see are relative links and templates not being properly loaded because of this.
from the docs regarding HTML5 mode
Be sure to check all relative links, images, scripts etc. You must either specify the url base in the head of your main html file () or you must use absolute urls (starting with /) everywhere because relative urls will be resolved to absolute urls using the initial absolute url of the document, which is often different from the root of the application.
In your case you can add a forward slash / in href attributes ($location.path does this automatically) and also to templateUrl when configuring routes. This avoids routes like example.com/tags/another and makes sure templates load properly.
Here's an example that works:
<div>
Home |
another |
tags/1
</div>
<div ng-view></div>
And
app.config(function($locationProvider, $routeProvider) {
$locationProvider.html5Mode(true);
$routeProvider
.when('/', {
templateUrl: '/partials/template1.html',
controller: 'ctrl1'
})
.when('/tags/:tagId', {
templateUrl: '/partials/template2.html',
controller: 'ctrl2'
})
.when('/another', {
templateUrl: '/partials/template1.html',
controller: 'ctrl1'
})
.otherwise({ redirectTo: '/' });
});
If using Chrome you will need to run this from a server.
Well what worked for me was to remove the setting for the $locationProvider.html5Mode. As someone mentioned in another stack overflow post, here MVC5 and Angular.js routing - URLs not matching using the locationProvider in MVC seems to screw up the routing. I am still to investigate why exactly this happens, as all I thought it did was remove the '#' in the url, but seems like there's more to it
I am following the angular-meteor tutorial at: http://www.angular-meteor.com/tutorials/socially/angular1/routing-and-multiple-views
I understand most of the routing, but I do not see where all the parts tie together. So here's my thought process.
I the routes, I notice the :partyId.
.state('parties', {
url: '/parties',
template: '<parties-list></parties-list>'
})
.state('partyDetails', {
url: '/parties/:partyId',
template: '<party-details></party-details>'
});
And in < parties-list >, I can see "this.partyId = $stateParams.partyId" being defined. #1. How is :partyId and $stateParams.partyId related? #2. The directive is called "partyDetails" whereas the template is < party-details >... is this an implied name given by Angular?
angular.module('socially').directive('partyDetails', function () {
return {
restrict: 'E',
templateUrl: 'party-details.html',
controllerAs: 'partyDetails',
controller: function ($scope, $stateParams) {
this.partyId = $stateParams.partyId;
}
}
});
Next... inside the party-list.html page (NOT party-details.html), there is a ui-sref link:
<li ui-sref="partyDetails({ partyId: party._id })" ng-repeat="party in partiesList.parties">
{{party.name}}
<p>{{party.description}}</p>
<button ng-click="partiesList.removeParty(party)">X</button>
</li>
But in the < party-list > directive there is no mention of any variable or function called "partyDetails". #3.What is the ui-sref referencing? How does it compare to "< a href="/parties/{{party._id}}" >" that is used further in the tutorial.
#4. Finally, is there anything that I should know about Meteor or Angular UI.Router in regards to things that are implied/abstracted away?
Thank you for your time! :)
It's same. If you declare parameters in query string like :partyId, you will received an object stateParams with keys are these parameters and values are proportional string in your segment of url.
It's coding conversation of Angular Js. You can check it out for more example.
https://docs.angularjs.org/guide/directive
Not problem if you use correct anywhere. But what is happened if you want change link or url structure? Example: href="/home" appear more than 20 html pages. And you want change all to "/homepage". Why???. With router, you need only change url state in the router.js file. Ok?
Angular-meteor is one of ways help you build your apps with angular. So everything related angular, you can find separate. Example you can read about angular ui router or all package of angularui in this link https://angular-ui.github.io
I posted a question recently about how to set parameters in the URL with Angularjs so that they could be preserved on page reload. But it caused a problem with Google Maps.
I am using ngRoute to navigate around my application. And the problem that I've experienced with setting parameters in the URL, was that every time I would set a parameter (be it $location.search() or just a plain old window.location.hash='something'), the Google Maps map would get unloaded. I tried changing parameter names, because I thought Google Maps listens to some of those options by default. But that wasn't the case.
Once I got rid of the ngRoute code completely, and instead of the ngView directive, I included my pages with ng-include, the map didn't get unloaded anymore when I manipulated the parameters.
I'm not that good as to know exactly what or why is going on, but I would guess that ngRoute thinks it has to compile my template file again because "something" changed in the URL. So what I would like, is to explain to ngRoute somehow, that if the part after ? changed, then it shouldn't try to compile my template file again (and subsequently destroy the loaded Google Maps), because those are just my additional options. But if the part before ? changed, then that's fine, because then the page changed.
Or, is there another, better, more Angular-way of getting around this issue?
This is my ngRoute configuration:
app.config(function($httpProvider, $routeProvider) {
// Routing
$routeProvider.when("/", {
redirectTo: "/Map"
}).when("/Map", {
controller: "MapController",
templateUrl: "tpl/view/map.html"
}).when("/Table", {
controller: "TableController",
templateUrl: "tpl/view/items-table.html"
}).otherwise({
templateUrl: "tpl/view/404.html"
});
});
This is my code for changing pages:
$scope.navigate = function(location) {
$location.path(location);
};
And this is how I would set up a custom GET parameter, as per the code from my other Stackoverflow question:
var params = $location.search();
params.source = source.filename;
$location.search(params);
You're looking for the reloadOnSearch property.
app.config(function($httpProvider, $routeProvider) {
...
}).when("/Map", {
controller: "MapController",
templateUrl: "tpl/view/map.html",
reloadOnSearch: false
})
...
});
https://docs.angularjs.org/api/ngRoute/provider/$routeProvider
I searched through many posts already, but still can't make run a very basic custom directive since the templateUrl is not resolved correctly.
I've got an AngularJSController with an Index - action (asp.net MVC), calling View/AngularJS/Index.cshtml, very basic. In there, I call a custom directive:
<product-title></product-title>
which is outlined liked that:
app.directive('productTitle', function () {
return {
restrict: 'E',
// ends up with wrong url '{root-path}/AngularJS/AngularJSTemplates/ProductTitle'
templateUrl: 'AngularJSTemplates/ProductTitle'
}
});
As you can see, it should call the controller AngularJSTemplatesController (asp.net MVC) with the action method ProductTitle. This will return my partial for angularJS. And here is the problem: AngularJS calls {root-path}/AngularJS/AngularJSTemplates/ProductTitle instead of {root-path}/AngularJSTemplates/ProductTitle...
What I am missing here? Do I really need to define the root-path somewhere as a javascript-global and use it for absolute paths?
You may need to define the base url, see the documentation on using Relative links here
just replace directive with follwing directive :
app.directive('productTitle', function () {
return {
restrict: 'E',
// ends up with wrong url '{root-path}/AngularJS/AngularJSTemplates/ProductTitle'
templateUrl: 'AngularJS/AngularJSTemplates/ProductTitle'
}
});
i think directive cant find your template. AngularJS/AngularJSTemplates/ProductTitle is the relative url for your template. i think it wil work.
I'm building a Chrome Packaged App with AngularJS and it seems highly desirable to use the $routeProvider however the methods don't seem to match the URL system inside apps.
So my question is can I implement $routeProvider functionality inside a Chrome packaged app and if so how?
Not sure if this is the best solution but I seemed to have solved this enigma myself.
Setup the $routeProvider however you want it to be and instead of using links in the application use ng-click directives that use a the $location to change the path to whatever matches up with your $routeProvider paths.
in the example below I made a "link" directive that sets the $location.path to whatever it equals when clicked.
#coffescript:
app.directive "link", ($location) ->
(scope, element, attrs) ->
element.bind "click", ->
scope.$apply $location.path(attrs.link)
app.config ($routeProvider) ->
$routeProvider
.when "",
templateUrl: "index.html"
.when "/otherPage",
templateUrl: "path/to/otherPage.html"
.otherwise
template: "Fail!"
The empty string route matches the initial state of the app.
whatever the link attr is attached to will become a clickable link.
<button link="otherPage">Take me to otherPage</button>
<div link="otherPage">Make divs clickable too why not?</div>