We Keep Coding

Angular Partials: templateUrl Routing Local .HTML File

I've had this problem for over 2 days and I've spent around 10 hours researching, but NOTHING has worked so far. I'm keeping my stress levels in check, but this is downright infuriating!
This jsfiddle has everything aside from the "page1.html" file that I'm trying to load
http://jsfiddle.net/tAmr3/
I want to load a sibling (same directory), page1.html file as such:
var playground = angular.module("playground",['ngRoute'])
.config(function($routeProvider){
$routeProvider.when('/Page1', {
templateUrl: 'page1.html', // **THIS LINE DOES NOT WORK**
controller:'page1Ctrl'
}).otherwise({redirectTo:'/'})
});
The problem is that "templateUrl" refuses to work!!!
The $routeProvider knows when I'm trying to access Page1 because page1Ctrl is console.logging successfully

The problem here was serving the angular app over file:// and having Angular trigger a cross-origin request when it tried to fetch the template over http://.
The easiest solution to that is to use a webserver rather than accessing the file-system directly.

AngularJS 1.2.x: Change in decoding URL in routing?

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;

Angular.js, iframes and Firefox

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.

Angular Routing & the ng-view

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

Express loads controller infinit times and browser windows crashes when I use subpath

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....