I am using angular full stack generator and created a directive. When I am using the templateUrl, the whole page is recursively loading. But when I try include the html using the template, it works correctly. Any way how to debug this issue?
You probably did mis-configure your template URL and angular is not loading your template but the index.html, which causes the loop. Check your template URLs and the server routing.
Related
We have angularjs app with lot of js getting loaded during the initial page load. Which are not required as part of home page. How we can void these. Is requieedjs solve this. How and when other js files get loads.
requirejs can be troublesome to use with angular
use following:
https://oclazyload.readme.io/docs
I have an Angular app which I am serving from Play.
The main routes within Play all serve some HTML pages which contain ng-include statements to some angular templates which are in a "templates" folder in public...
<div ng-include="'#routes.Assets.versioned("templates/test.html")'"></div>
This works fine as I can use Play to reference the assets as normal. Now when the page loads in the browser, each of these templates load and in turn try to pull in further angular templates...
<div ng-include="'templates/test2.html'"></div>
But this results in a 404 as the "templates" folder cannot be resolved.
How can I have a truly public "templates" folder with Play where each of angular can pull in whatever templates it needs in the browser?
Thanks
You will need something like this in your PLAY routes file:
GET /templates/*file controllers.Assets.at(path="/public/templates", file)
In this link you can see the whole solution
I am a newbie on sails framework and I started working on it then found that everything is in ejs. When I converted it into the HTML then it didn't work.
How to write client-side in HTML using AngularJS without ejs or with least ejs possible if we cannot remove it totally.
Where to write client-side routes and how to use ui-router in that?
You should place your angular code in assets/js. The html files are also to be placed in assets folder.
I have set up a basic sails/ angular app in github. Angular Demo
I was getting myself started with Angular JS.
I tried to put angular code in my html page and then I tried to open up browser but Angular JS didn't worked.
But when I requested the same page from server It did worked
A bit of mystry ...
as soon as angular need to load template code using a template url you have to serve the page via HTTP because angular can only load templates using HTTP.
one example would be :
<div>
<div ng-include="'templateA.htm'"></div>
<div ng-include="'templateB.htm'"></div>
</div>
Some directives of AngularJS use AJAX to load themselves and by default navigators like Chrome block AJAX request when they are local.
You can open your AngularJS app in any server e.g: http-server
I'm having trouble getting path lookup to work with a AngularJS v1.2.0 and PhoneGap/Cordova Android application. I've come pretty far with html5mode(true) by setting <base href="."/> in index.html and then changing $routeProvider.when('/') to $routeProvider.when('/android_asset/www/index.html'). After that I am able to get redirectTo('login') to reach $routeProvider.when('/login') and there render templateUrl: 'static/partials/login.html' as expected.
The problem I have is that if I instead try to redirect to the login page from my Javascript code with $location.path('/login');, the route is found but templateUrl loading fails with an insecurl exception.
I've tried whitelisting access to file:// by using the new angular-sanitize module, but that does not help.
How can I make $location.path() do the same things as redirectTo so that the partial is loaded? Or is there some other way to solve this problem?
UPDATE: I got a bit forward by adding a call to replace() after the path function, e.g.:
$location.path('/login').replace();
but that seems like a hack, and it still causes the templateUrl in the otherwise route to fail with the same exception.
Any ideas on what might be wrong? Is it that html5mode(true) just does not work at this moment with Phonegap and the only way to fix this is to set it to false and add hashtags to every path (like is done in the angular phonegap seed project)?
For future reference, this is how I managed to solve the problem:
AngularJS currently does not seem to support html5mode(true) inside a Cordova application because of the insecurl problem I reported. What I had to do is add
var h5m = (typeof html5Mode !== 'undefined') ? html5Mode : true;
$locationProvider.html5Mode(h5m);
which gives me the possibility to explicitly set html5Mode in the PhoneGap index.html with a global variable:
<script>
var html5Mode = false;
</script>
So now $location.path('/login') as well as redirectTo: 'login' works, but links in html files, don't. To get those working in PhoneGap, with html5Mode disabled, I had to add #/ in front of every link, e.g. login.
That makes PhoneGap work, but breaks the web page which uses History API with html5Mode(true). The last piece of the puzzle was to add <base href="/"/> to the web page's index.html (and leave it out of the index.html of the PhoneGap project.) So now even though I have a link that says #/login in the web page, I get to the url http://example.com/login and don't see any hashes in the address bar.
**
So in the end I have History API working in my web page and History API disabled in the PhoneGap project (where there really is no need for History API as there is no address bar). The only downside is the extra #/ I have to put in each template html file, but that is a minor annoyance compared to the ability to use all of the same html and javascript files for both web and mobile.
I had this same problem as well. I managed to fix it by skipping the leading slash in the route config:
$routeProvider
// route for the foo page
.when('/foo', {
templateUrl: 'foo.html', //previously: '/foo.html'
controller: 'fooController'
}) //etc.