I have a feeling I'm missing something obvious with this, but I can't make iframes to work in Firefox with Angular.js routes.
Here is a sample plunker code
The index.html file contains ng-view which loads main.html:
<div>
Main content here
<iframe src="#/child"></iframe>
</div>
The iframe points to the /child route, for which $routeProvider is configured to load child.html template:
angular.module('testappApp', [])
.config(function ($routeProvider) {
$routeProvider
.when('/', {
templateUrl: 'views/main.html'
})
.when('/child', {
templateUrl: 'views/child.html'
})
.otherwise({
redirectTo: '/'
});
});
This works in Chrome and Safari, but not in Firefox and IE 10 (I assume earlier versions of IE won't work either). I appreciate any help, thanks!
#jpmorin so, I just found a workaround, which is kind of inspired by your previous suggestion. So, after I changed the iframe source from #/child to index.html/#/child, everything works! No need for multiple includes of angular etc. I don't fully understand why the original route fails in FF, but pointing directly to the file that bootstraps the app and then adding the route works.
Related
Basically, when I navigate to http://localhost:9000 in my browser, I receive the content on the index.html page, but ng-view remains completely empty, despite '/' being pointed to my controller/view.
Upon first navigation, Angular does not add the /#/ to my url, and $location.path() reads an empty string. After clicking any link, the about page for example, Angular adds /#/about to my url and the page loads normally. If for any reason, however, the page gets reloaded (I hit reload or live-reload updates), the /#/about remains in the url, but ng-view is an empty element.
The config:
.config(function ($routeProvider) {
$routeProvider
.when('/', {
templateUrl: 'views/main.html',
controller: 'MainCtrl'
})
.when('/about', {
templateUrl: 'views/about.html',
controller: 'AboutCtrl'
})
.otherwise({
redirectTo: '/'
});
})
I included ngRoute in the app and the script has been added to the index.
This app was working just fine before. I experimented with $locationProvider.html5Mode() a little and didn't like the results, so I did a hard reset to the git HEAD. After that, it has failed to work as intended on any machine, any browser.
I don't know what could be causing it or what else may be need to solve this. Open to try anything that works at this point.
EDIT: StackOverflow managed to remove a portion of my title. .-.
I think you should be able to call $location.path('/') in your app.run so that it navigates once angular loads up.
Figured it out after a ton of digging, other people, and trial/error.
If $scope.apply() is called to early, it can cancel the digestion that triggers on page load. Using $timeout over the method solved it.
I don't understand this. In my local I am trying to develop a website. In that website links are working in app but when I try to F5 or copy that link and paste it to browser I am getting 404 Page Not Found error. I google it and found that this related to parsing URLs but cant figure out how to do this. Here is my code:
Javascript
.config(function($stateProvider, $urlRouterProvider, $locationProvider) {
$stateProvider
.state('baba', {
url: "/",
templateUrl: "baba.html"
})
.state('icerik', {
url: "/icerik/:ad",
templateUrl: "icerik.html",
controller: "mmgCtrl",
})
.state('oku', {
url: "/oku/:serix/:klasor",
templateUrl: "oku.html",
controller: "nbgCtrl"
})
$locationProvider.html5Mode(true);
$urlRouterProvider.otherwise('/');
.controller('indexCtrl', function($scope, $location) {
$scope.yonlen = $location.path();
})
I have two routes. /icerik and /oku. So I think I should do if statement to which url going to which scopes.
index.html
<div ng-repeat="manga in mangas">
<a ng-href="{{yonlen}}></a>
</div>
Under the hood, this uses pushState.
When you change the state of the page with JavaScript, you should change the URL to one which would cause the server to generate the page in that state.
That would mean that if the JavaScript failed for any reason, the content would still load correctly and that if someone followed a deep link, they would directly (and thus quickly) load the content they were actually concerned with.
For example:
The visitor arrives on the homepage
The server delivers the homepage (plus all the angular code)
They click the "blog" link
You load blog content and put it on the page (with JS)
You change the URL to /blog/ (still with JS) without loading a fresh page from the server
But then:
The visitor arrives on the blog
The server delivers the blog page (plus all the angular code)
You're doing the change the URL but but haven't done the put the right content at that URL bit. That requires server side work.
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.
How does angular know to make a request for the template view that contains 'ng-view' element?
If I navigate in my application say directly to
http://localhost/Categories/List/accessories
. A request is still made to '/ or the index template' as this contains the 'ng-view' element needed to render all the views.
When I navigate from the index to /Categories/List/accessories no request is made for the index again.
Below is my basic routing which has been copied in part from the Angular MVC "CookBook" example on GitHub
angular.module('myApp', ['myApp.ctrl.list'])
.config(['$routeProvider', '$locationProvider', function ($routeProvider) {
$routeProvider.when('/', {
templateUrl: '/Home/Splash',
});
$routeProvider.when('/Categories/List/:slug', {
templateUrl: '/Categories/List',
controller: 'listCtrl',
});
$routeProvider.otherwise({
redirectTo: '/'
});
}]);
With your routing configuration, I believe your example url is missing a pound sign (#), so it should look like:
http://localhost/#/Categories/List/accessories
The part after the # sign is the path intended to be resolved by AngularJS (ie. the routing configuration you have defined)
When you enter the above URL into the address bar of the browser, the browser automatically looks for index.html on localhost. Most browsers, if not all, are set to look for index.html when only the domain name is present in the URL.
What about the part after the # sign? You might ask. The path after the # sign does not get sent to the server, by definition, and thus the browser could care less of what that part is consisted of.
In the second scenario you mentioned, AngularJS does not request for index.html because it's been cached the first time it was loaded and that cached copy is used.
Is your locationProvider configured for HTML5?
$locationProvider.html5Mode(true);
See Using HTML5 pushstate on angular.js
I'm currently working with angularJS and I try to build a homepage. My routeconfig looks like this:
var app = angular.module('mml-annie', ['mmlServices']);
app.config(['$locationProvider', function($location) {
$location.html5Mode(true); //now there won't be a hashbang within URLs for browers that support HTML5 history
}]);
app.config(['$routeProvider', function($routeProvider) {
$routeProvider.
when('/team', {
templateUrl: 'partials/team',
controller: TeamCtrl
}).
otherwise({
redirectTo: '/home'
});
}]);
For testing purposes my controler looks like this:
function TeamCtrl($scope, Team) {
console.log("TEST");
}
Everything I working fine except when my path get additions / fields. When I change "/team" to "/team/team/test" my app calls the controller until the app crashes. Not using html5 mode fixes the problem. But I would rather use the nice HTML5 mode without the hashbang.
The app runs on node.js with express which serves the angular app for all requests except API calls.
Do you have any idea what is happening? I have no clue...
Of course I can provide further information if needed.
the solution is as follows:
My partials didn't have the relative path prefix "/". So whenever i tried to advance in a path the server looked for a partials that wasn't there, for example: /team/partials/team
Node then sent the basic layout which had itself the ng-view div again and started all over.
Why do I always fiddle around for like 2 hours - then decide to write a question and 2 minutes later I find the answer....