I have two javascript files:
vendor.js - where I have angular.js and another libs;
app.js - own code.
But when I loaded it prerender not opened my page.
When I concatenate it to one file - all OK.
How can I fix it?
Looks like you might be loading those <script> tags in the <body> of your page. Scripts that are in the body are loaded asynchronously so they can load out of order (and cause javascript errors if loaded out of order). Chrome and most browsers handle this nicely but PhantomJS can load them out of order.
I'd suggest trying to move those <script> tags into the <head> and see if that fixes your issue.
Related
I created an angular single-page web app for my customer.
Now they need to integrate the app into a page of their (wordpress) website.
EDIT: in other words they want the app inside an existing wordpress page
what's the best approach?
I tried iframe but it does not work: no resize on app content change and problems with modals.
Thanks
If you need to insert it in an existing page with an already done template you can create a shortcode and a plugin:
create a folder like "your_spa" in the plugin folder of wordpress (/wp-content/plugins/)
create a php file named your_spa.php inside the new generated folder
put this inside the file "your_spa.php"
<?php
/*
Plugin Name: your spa plugin
Description: description
*/
function your_spa_code(){ ?>
<!-- put here your code (this will be inside the body of the page) -->
<?php }
add_shortcode( 'yourspa', 'your_spa_code' );
?>
take care of the links/resources urls (js, json, css): place them anywhere you want them, but remember the path (like in html path => url)
remember to let the apache user read the files (file permissions)
activate the plugin "your spa plugin" inside the wordpress dashboard
use [yourspa] inside a blogpost/page as a shortcut
And now you have created a plugin and a shortcode!
PS: remember that your code will be surrounded by the code of the existing page
It's a little dirty but it's the easies solution.
I had some success with simply rendering Angular's bootstrap code, the <app-root> and <script> tags, just as they are served from a standalone an Angular deployment.
I just added the following HTML in a post, using the HTML editor.
Of course, I had to fiddle the JS script source URLs. Rendering all this HTML could be done with a Wordpress shortcode and plugin that asks for a URL path to the JS files.
<app-root></app-root>
<script type="text/javascript" src="http://localhost:4200/inline.bundle.js"></script>
<script type="text/javascript" src="http://localhost:4200/polyfills.bundle.js"></script>
<script type="text/javascript" src="http://localhost:4200/styles.bundle.js"></script>
<script type="text/javascript" src="http://localhost:4200/scripts.bundle.js"></script>
<script type="text/javascript" src="http://localhost:4200/vendor.bundle.js"></script>
<script type="text/javascript" src="http://localhost:4200/main.bundle.js"></script>
This worked poorly with the Divi theme and a 'code' module, totally screwed up the page. Attempts to use the offical Wordpress mechanism for including JS scripts (wp_enqueue_script) failed since the <app-root> tag can't be found when the scripts load.
I learned about ng-include and used it for templates but I am not able to include the page.
The index.html and menu.html are in the same directory and menu.html is to be loaded in index.html
<ng-include src="'menu.html'"></ng-include>
I have included the app's name in index.html.
I want to include menu.html between header and footer. So I have deleted everything in the menu.html except the container div which I want to include. The links and references have also been properly set in index.html
I am really stuck here. Please help me out! Thanks.
edit:
Here is my project structure -
Project-
app-
fonts-...
images-...
scripts-
app.js
controllers.js
services.js
styles-...
index.html
menu.html
...
edit -2
I just found out that when I change my browser, i.e. from chrome to firefox, it loads successfully! Now why is this happening?
Are you using a webserver ?
from https://docs.angularjs.org/api/ng/directive/ngInclude
In addition, the browser's Same Origin Policy and Cross-Origin
Resource Sharing (CORS) policy may further restrict whether the
template is successfully loaded. For example, ngInclude won't work for
cross-domain requests on all browsers and for file:// access on some
browsers.
Angular loads some fonts when starting.
https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,700
When I start nodewebkit and I'm offline, it seems that try to load the fonts slows down the app...can I hold this font offline without loading?
Or angular alwasy watch online for this fonts?
Thanks!
This is not angular's concern. In HTML5 You can use an appcache for that.
as noted in http://www.w3schools.com/
HTML5 introduces application cache, which means that a web application
is cached, and accessible without an internet connection.
create a file beside your index.html named resource.appcache
add the link to the following files you want to cache inside resource.appcache
CACHE MANIFEST
# v1.0.0
https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,700
then in your html, link it like
<!DOCTYPE HTML>
<html manifest="resource.appcache">
...
</html>
I have built a Node.JS app (meaning I wrote my own HTTP server within the the main JS file, which works as it should with the rest of the application). The HTML and CSS renders as it should within localhost. Even JQuery works (with the source file imported via CDN). However, I have tried adding very basic AngularJS within the Index.html page and the AngularJS refuses to show (anywhere) in my localhost. It should be showing the number "3", but does not.
This is my Index.html page with the angular code:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>{{title}}</title>
<link rel="stylesheet" href="/css/home.css">
<script src="/node_modules/angular/angular.js"></script>
<script src="/node_modules/angular-route/angular-route.js"></script>
</head>
<body>
<body ng-app>
<p>AngularJS code: {{ 1 + 2 }}</p>
</body>
<div class="hm-container">
<h1 class="hm-title">Some text</h1>
</div>
</body>
</html>
The console log message in chrome says:
"Failed to load resource: the server responded with a status of 404 (Not
Found) http://localhost:3000/node_modules/angular/angular.js"
The Index.html page renders the Angular code correctly only as a standalone isolated HTML page (without the CSS) when tested within my Brackets text editor browser preview and when tested as a stand alone HTML file using the HTTP-Server module. It correctly shows the number "3". So I know my angular code itself is not the issue here. In my localhost the HTML page does not show the number "3", nor does it even show "{{ 1 + 2 }}". It simply reads: "AngularJS code:" with the rest of the HTML and CSS etc.
Even importing the AngularJS source file via CDN, or downloading the AngularJS source file from Angular's site, instead of from NPM does not make any difference. I have played with the directory structure as well per some of your recommendations, with no luck. So I know it is not the file path of the Angular source file which is the issue.
I have been stuck on this for too many days, have lost sleep, and foregone all other activities all because of this, so If any of you can give me your input as to what is going on and how to resolve this issue, I would be extremely grateful!!! :)
Alright, this is how I solved the issue. It was a server-side issue as I had originally suspected. Within the main Node.JS file (typically either named server.js or app.js) the following is needed:
you will most likely already have this part...
var express = require('express'),
app = express();
Then immediately after the above code block skip a few lines and add...
app.use(express.static(__dirname + '/views'));
Apparently this is how Express knows where to serve your JS files. The 'views' folder is where my HTML pages are. You may have them in a folder named 'public'.
The solution to the following link is what helped me solve the issue: AngularJS Code not working with NodeJS
I will add that this is definitely strange to me in that JQuery works by importing it's source file via CDN WITHOUT THE ABOVE CODE CHANGE, yet Angular would not work via both a locally downloaded Angular source file OR via the Angular CDN! If I ever figure out why this is so, I will be sure to update this answer. If any of you Angular, Node, Express experts know why this is so, please enlighten us all!
Hopefully this helps someone running into a similar issue. A big thanks to the two of you that tried to help me solve this weird issue. Your time and input was greatly appreciated!
There is problem obviously in attaching Angular JS to your index. You have already said that you even tried attaching through CDN.
<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>
<div ng-app="">
<h1> {{1+2}} </h1>
</div>
</body>
</html>
This works, I have checked. Try to integrate your stuff in this code. And follow Jason's suggestion to attach angular js from your system only. Keep the angular js file within the same folder.
To make that work, you need a directory structure like this:
|--app
| |--index.html
| |--node_modules
| | |--angular
| | | |--angular.js
| | |--angular-route
| | | |--angular-route.js
| |--css
| |--home.css
Background:
I'm loading my entire AngularJS Cordova/Ionic web-app from the server. This is amazing. I can change the app without going through Apple.
Questions:
Q1) How can I use js-files.zip, loaded from server, in my index.html file?
Q2) How can I effectively load index.html startup logic from my server?
Problems:
On some older devices, loading time is too high if I load all my .js files from my server, so I want to be able to configure that logic (in index.html) also from the server.
The only thing I'm not loading from the server is the content of index.html
So, how can I essentially load index.html from a server?
If i try to do that
1) Pulling, say, indexfromserver.html using ajax and doing html rewrite of index.html with document.write(res), then there are AngularJS problems:
E.g., module missing errors (*1 below), because the following isn't in index.html until after the ajax response rewrites index.html:
<body ng-app="myapp" ng-controller="MainCtrl">
1.1) I can include the necessary modules in the initial local index.html, but then if I rewrite index.html, I'll get these errors/warnings about classList null in ionic (ask me for details), deviceready not fired, and angularjs loading more than once
2) I can redirect index.html to, say, indexfromserver.html, but then all my $http responses are rejected promises.
Regarding 2) I've been told I should be able to add a controller for indexfromserver.html or specify $urlRouterProvider.otherwise('/app/indexfromserver');
This hasn't fixed the $http requests from being rejected.
I don't understand exactly how index.html is involved in making $http work correctly, as it doesn't have a controller and isn't the 'otherwise' route provided. I only see mention of index.html in config.xml so far.
Request:
Can someone please post a snippet of a typical example how an AngularJS Cordova/Ionic app could effectively use index.html logic that's loaded from a server?
Otherwise, can someone show/explain if/how I can use js-files.zip from server, and uncompress and use in index.html?
Details/Notes:
(*1)
Uncaught Error: [$injector:modulerr] Failed to instantiate module myapp due to:
Error: [$injector:nomod] Module 'myapp' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.
http://errors.angularjs.org/1.2.17/$injector/nomod?p0=myapp
It was pointed out that you can use JavaScript in certain situations to unzip an archive, but that is not very common. The web does not work like that, Ionic runs inside of a browser so you should use the same processes as you would to optimize a website.
You would build the app instead like any website. Take the following steps to create a more optimized app for loading quickly. If you aren't familiar with build tools, take a look at http://yeoman.io/, and this specific generator for Ionic https://github.com/diegonetto/generator-ionic.
Here is a very basic list of some steps you can take, though the generator provides a few more options and other things could be added as well.
Concat and minimize your app's JavaScript into single file.
Concat and minimize your app's CSS into a single file.
Compress your angular templates with a tool like this https://www.npmjs.org/package/grunt-angular-templates into a single JS file.
Deploy static assets to server.
Link to above assets in index.html.
Ultimately the goal is to optimize the assets so you don't have to load a lot of files, and each file is as compressed as possible.
If you want to go the zip file route, and you assume your users aren't always connected to the internet, probably the best way is to:
Check if the version is new via a server call, and if so, download the zip file, extract it (maybe via stuk.github.io/jszip/), and use a Cordova interface to write the new JS code to the phone's memory, and run the code by adding some script tags in your loader.