I'm following a Code School tutorial on Angular. I'm trying to include a template with ng-include. I have the following code:
<h3 ng-include="'product-title.html'"></h3>
and my product-title.html
{{product.name}}
<em class="pull-right">{{product.price | currency}}</em>
When I inspect the element it shows <!-- ngInclude: 'product-title.html' -->
Question. Do I need to be running a web server in order for this to work?
Yes, you need to run your application from a server. Templates are loaded via AJAX call, and those calls need to originate from a webserver.
You have several lightweight options to run an ad-hoc static files servers, e.g.:
node's simple-server (https://github.com/balupton/simple-server)
python's python -m SimpleHTTPServer
Related
I have a Spring Boot backend and ReactJS front end, all builds and runs fine until I deploy to a tomcat external server.
In the index.html page which gets generated via the npm run build it is creating paths as below (this is part of index.html):
<script src="/static/js/2.507eac03.chunk.js"></script>
So, when the index.html is loaded, it cannot locate /static/js/2.507eac03.chunk.js because it is missing my application context folder (where my webapp is) - is this something in Spring boot I need to do in order for it to work?
PS. Removing the / makes it work as it then picks up my application context folder:
<script src="static/js/2.507eac03.chunk.js"></script>
Thanks
There is a neat and simple HTML solution for your problem:
<base href="/your/context/location" target="_blank">
If the tag above is in your head, then you can refer to locations in the manner you desire.
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.
I am using Spring Tool suite
Where my directory Structure is :
MyAPP
->src
->main
->webapp
->WEB-INF
->js
angular.js
->spring
->views
login.jsp
Now in login.jsp I have to access Angular.js but it is not Accessable
I am using
login.jsp
----------
<script src="/MyApp/src/main/webapp/WEB-INF/js/angular.js"></script>
Once compiled, assembled in a war and deployed to your web container (which your IDE is doing it for you), the root of the application is the webapp folder. Since a Java webapp is deployed under a context path, you need to prepend this context path to the URLs you use:
<script src="${pageContext.request.contextPath}/WEB-INF/js/angular.js" />
or, with the JSTL
<script src="<c:url value='/WEB-INF/js/angular.js'/>"></script>
But even that won't work, because everything under WEB-INF is inaccessible from the outside, by design. So you must put your JS files outside of WEB-INF.
This shows a serious lack of understanding of how Java webapps are, what's their structure, etc. You should familiarize with these basic things before going further.
I'm using yeoman project using angularjs normally I know how to use angularjs with PHP on normal projects.
But I'm confused to use php with yeoman.
Where should I create .php file and how should I call $http scope in main.js controller?
If you're using generator-angular, you need two elements:
1/ Have your PHP running as you would normally in a subdirectory like public so public/index.php is loaded when you go to http://localhost/
2/ Use a Grunt task to compile the individual AngularJS source files in src into a single file somewhere like public/js/myapp.js and in public/index.php add something like <script src="/js/myapp.js></script>
3/ If you're wanting to send JSON to your angular app, use json_encode such as:
<?php
header('Content-type: application/json');
echo json_encode($someArray); ?>
?>
You could also have a look at grunt-php for serving up you PHP files on a dev box.
Shameless self plug - I've also written a generator that creates a simple AngularJS app with a FlightPHP backend: https://npmjs.org/package/generator-flightangular - Which might give you an idea of how you can split the JavaScript elements from the PHP backend.
You could use web service API calls to your PHP project. Usually PHP and AngularJS are two different scopes. We can establish communication between these two using API's. Normally it is better to use some REST API frameworks like Slim.
http://www.slimframework.com/
I am trying to setup a localhost version of our site and have a problem getting this setup correctly.
Both our live and localhost site have this directory structure:
/na_cms/expressionengine/templates/default_site/c.group
/na_cms/expressionengine/templates/default_site/j.group
/na_cms/expressionengine/templates/default_site/default.group
/na_cms/expressionengine/templates/default_site/inc.group
On our live site, CSS files in our templates are accessed like this:
href=“css/c/modal.css”
src=“j/jquery-ui-1.8.4.custom.min.js”
How do I get rid of the 404 not found errors for the CSS and javascript files on the localhost site?
My config file has
$config[‘rewrite_short_tags’] = TRUE;
I'm obviously using assumptions here until further information gleamed...
You're using templates to hold your JS and CSS, rather than external files (Nothing wrong with that), so they're not technically relative URLs - it's pulled from the database so you won't have any more of a path than template group and template. The browser will not be targeting these template files directly, it will be EE providing them.
In your j.group folder I'm assuming you have a file called "jquery-ui-1.8.4.custom.min.js.js", which relates to a template group called "j" and a template called "jquery-ui-1.8.4.custom.min.js"?
What I'm a bit confused at is "css/c/modal.css", as this is indicating a template group called css, but you've stated your template group is called "c" and the template is "modal.css". Possibly this was a mistake, or you've got a "css" template group and falling into the index template...?
Firstly, check your template folder settings in EE, Design -> Templates -> Template Manager, then "Global Template Preferences". Look for "Basepath to Template File Directory". I'm assuming that you copied the online database to your local, rather than a new fresh install?
If you're using htaccess rewriting, check that is working on your local.
Failing that, try changing the paths to the CSS and JS to use the path variable:
src=“{path='j/jquery-ui-1.8.4.custom.min.js'}”
http://expressionengine.com/user_guide/templates/globals/path.html