I'm building an Adobe AIR application with AngularJS. And have quickly come across a problem in that Angular can't see partials below a certain level and any $http resources.
I've read here: How to Adjust Angular's URL matching pattern that this is because of the way Angular looks at URLs instead of using app:/ but in 2.0+ it no longer has a SERVER_MATCH so I can't use that regex... if that's even the issue anymore?
Basically if I have a index.html like:
<div ng-include="'partials/header.html'"></div>
<div ng-view></div>
<div ng-include="'partials/footer.html'"></div>
It will find those two includes fine! But if in header I have:
<div class="header">
<div ng-include="'partials/header-nav.html'"></div>
</div>
Angular won't see that header-nav in Adobe AIR, because it seems to lose where partials folder is in relation to the rest of the application... I'd assume that all resources also break for this same reason!
This also doesn't work:
phonecatServices.factory('Phone', ['$resource',
function($resource){
return $resource('phones/:phoneId.json', {}, {
query: {method:'GET', params:{phoneId:'phones'}, isArray:true}
});
}]);
Even if I was to call this on the index route, it won't find the JSON file as the factory doesn't know where to find the file...
Setting <base href="app:/"> doesn't fix it either but also breaks the links so that's not a solution...
Any ideas? I'm assuming it's something simple...
This sounds more like server issue then angular.
Are you using paths with hashes? If no, try to, maybe bowser is confused by changing the address bar path and relative urls.
Are you using grunt to build the project? It's worth a try, and then you can use grunt-angular-templates to build them into one js file. There really isn't any reason to make multiple requests for html form you production env.
Load your index.html from the web server.
Then all your resources will be loaded relative to that including the angularJS which will load things like templates.
You can use StageWebView as shown below:-
var webView:StageWebView = new StageWebView();
public function StageWebViewExample() {
webView.stage = this.stage;
webView.viewPort = new Rectangle( 0, 0, stage.stageWidth, stage.stageHeight );
webView.loadURL( "http://localhost:9000/app/index.html" );
}
Other options are included in my comments to OP's questions but this should serve the solution well in the constraints of the problem defined by OP.
Related
I have a group of images at my root level and I also have a page called Help. If I navigate to rootspace/Help angular knows to get the images from the root repository, but if I change it to rootspace/Help/ then angular thinks the files are in a folder 'Help' that doesn't exist. I need the extra slash because I want to put more information after it.
How can I maintain '/Help/' without angular thinking this is part of the path it needs to find resources?
How are you getting the images? I'd recommend creating a resouce, this way angular will always know where to find the images if you provide a base url. It will also be easy to configure later on if you change the location of the images.
Example code:
angular.module('resources', ['$resource'])
.factory('Images', function($resource) {
return $resource(baseUrlGoesHere + '/images', {}, {})
})
Then you can inject the resource into your controller and call Images.get()
BTW, you probably can't use the code as is, I think the injection of $resource will fail but I'm not sure.
Quick Summary:
I need to allow two script files to handle different operations for the same angular app. One needs to initialize the app, the other needs to assign a templateCache object to a piece of JSON in localStorage.
Context:
I have several python files which compile/generate html and I have constructed an angular app with this emitted html for my site (which uses CGIs).
The basic construct of the site comes pieces of HTML, which fit together like so:
|------------Header---------------|
|-Navigation-|------Content-------|
|-Navigation-|------Content-------|
|-Navigation-|------Content-------|
|------------Footer---------------|
My Header creates the <head> tag, instantiates my ng-app and uses $templateCache to set up a template that I call from my Navigation code. I had to go with templateCache instead of ngView and ngRoute due to some limitations with how the CGIs emit the html, and the order in which this happens.
My "Navigation" python/html sets up my app with JS like so:
<script>
var responsiveCatalog = angular.module('responsiveCatalog', ['ngStorage']);
....controllers...
....config, etc....
</script>
This Navigation also includes my default templateCache object:
<div ng-include=" 'responsiveItems.html' "></div>
This is all working to show my first templateCache object in the Content section. However, I need to grab many pieces of information from the python generator for the "Content" section (a totally separate file from the "Navigation"), store this data as JSON in localstorage (hence the inclusion of the ngStorage module), and call that as my second templateCache option.
I am not actually sure that I can use two separate instances of Javascript to reference and influence the same Angular app. I know this seems like bad practice, but I am trying to prevent the need to tear down a huge piece of legacy architecture to influence the angular app from two Javascript files in harmony.
Thanks in advance.
You can do
angular.module('myAppName').controllers.... in different files, just make sure the myAppName the same. Bug I don't feel like it work with config, no time to test. If you need any communication between them, check $emit and $broadcast.
So what am I doing wrong? I included the ng-include and tried every variation and it is not including the file(it keeps returning a 404 in the console), the directory location is as follows:
-App
--Layout
---Partials
----Navigation.tpl.html(File)
--Layout.tpl.html(File)
And the ng-include is located in the layout.tpl.html file:
<div data-ng-include="'layout/partials/Navigation.tpl.html'"></div>
Please note that I am using webpack for this project(that shouldn't matter). I am calling the layout.tpl.html file as the base layout, and the partials are included inside the layout.tpl.html file. Also, I am using vs having a ng-app on the DOM:
angular.element(document).ready(() => {
angular.bootstrap(document, ["app"]);
});
I have worked with angular in the past, and I am at a loss when such a simple task is taking so long time. Also note, when I use the
$templateCache.put('..','..')
and put in html minified string from the navigation.tpl.html with the same directory, it works just fine (but if I use $templateCache.get() or require() from the template location, it doesn't work), but the HTML string is pulling from the cache and I want to be able to update one file vs having to use minified code.
Sorry in advance if I missed something, I am in a rush to get this done, and it should be the simplest thing that is just not working.
Take a look at https://github.com/WearyMonkey/ngtemplate-loader
You should preload your template with the correct key in the $templateCache by requiring it in your bundle.
require('ngtemplate?module=[xx]&relativeTo=/layout/partials/!./layout/partials/Navigation.tpl.html');
That way you can ask for 'Navigation.tpl.html' in ng-include or with templateUrl
So I'm running into a problem with Angular 1.3.15 and the $locationProvider. Every time I turn html5mode on I get a TypeError: Cannot read property 'replace' of undefined error. If I leave html5mode off, everything works fine.
My directory structure is like so (4.DEV being a versioned directory name):
public /
- index.html
4.DEV /
css /
js /
images /
partials /
etc...
I have a base tag set like this:
<base href="/4.DEV/">
And I'm configuring the $locationProvider like so:
$locationProvider.html5Mode({ enabled: true });
If I change the base tag href to "/" Angular doesn't have any issues (but my assets don't load). I suspect that the issue Angular is having deals with the fact that my index.html file is one directory up from the rest of the site.
For reasons I won't list here, I can't change this dir structure and I REALLY don't want to change the base tag (because I don't want to manually stick a version number into all these files). I also want to leave html5mode on.
Does anyone have a solution for this problem? Is there any way for me to MANUALLY set the "base href" for Angular, but leave the tag alone for all my static assets?
So, it looks like Angular's inner workings are tightly coupled to the href of the tag which results in major issues if you have a directory structure that's a bit unconventional like mine.
Stumbled across this Github thread where people are asking for a feature to change this and #greglockwood posted a fix.
With his fix, the tag can work for your static assets while you provide your own set "baseHref" for Angular's stuff.
Worked like a charm for me! Hope this helps anyone who stumbles across this!
For dynamic page changes without having to reload the whole content, I have found this very simple working solution:
Tutorial: http://css-tricks.com/rethinking-dynamic-page-replacing-content/
Demo: sudojesse.github.io/dynamic-page/
However, this solution only works if you're linking to something like "sitename.html". Is it possible to do the same with folder paths?
Example:
Like it is above:
[sudojesse.github.io/dynamic-page/about.html][1]
Like I want it:
[sudojesse.github.io/dynamic-page/more/about/][2]
I have tried it but it doesn't really work!
http://sudojesse.github.io/dynamic-page/about.html
http://sudojesse.github.io/dynamic-page/more/about/
If you want it to work, you would have to rename the file to "index".
The reason for this is because the Web server looks after a specific resource when the client requests a directory. This resource is often by default set to "index"(dot)"something".