I'm building a sample Ionic app and I've structured the app as follows:
|-- www
|-- index.html
|-- src
|-- core.js
|-- global
|-- views
|-- landing
|-- landing.js
|-- landing.html
For some reason, when I type ionic serve, I see core.js but I don't see the folder global folder. What could be the issue?
If you haven't changed the content of ionic.project, then you have to provide index.html in the www folder.
Related
Basically, I have springboot application serving my index.html and other static JS files which includes(runtime, vendor, main) chunks created during the production build by Webpack. How do I set cache-control settings for index.html and chunks separately so that index.html won't be cached and chunks will be cached on the client-side? Currently, I have my resources under static folder like the following:
├── static
│ ├── index.html
| |-- bundles
│ │ ├── main.js
│ │ ├── vendors.js
│ │ ├── runtime.js
`
Basically, I am aiming for long-term caching of static assets on the client-side.
I interpret your question as asking how you can control this in Spring.
I think the better way to achieve what you want is to let Webpack output the different chunk-names so that they are cached for a long time (or until you deploy a new version of a chunk), not by specifically setting cache related headers for each filename.
The Webpack caching documentation recommends outputting the different chunk filenames to also include the contenthash.
output: {
path: path.join(__dirname, "build"),
filename: "bundle.[contenthash].js",
}
This will name your current bundle.js to something like bundle.7b4c86b268840bec8c4d.js. The first time a browser visits your site it will cache that chunk for a long time, typically a year but it depends on your configuration.
When you make changes to whatever code goes into bundle.[contenthash].js, the value of contenthash will change and the browser will cache that new version of your site/bundle since the filename doesn't match the cached bundle filename any more.
For more information, please refer to the aforementioned Webpack caching documentation
I'm working on a Django app and using angular as frontend. I want to create a s.p.a. using routes. But I'm unable to access the templates, because they are in templates folder. My directory structure is like :
root
|-- templates
| |-- index.html
| |-- view1.html
| |-- view2.html
|-- static
|-- app.js
|-- angular.js
|-- angular-route.js
I'm a newbie in angularjs, so pls be descriptive in your answer's.
I can't change the directory structure,
Or if I'm working with render to string then how can I load the view with a api call which return me the html on page load?
Django templates != Angular templates. Don't mix them. Angular templates are static files from Django's point of view; keep them in the static folder.
I would suggest separating your Angular application from your Django application if you can.
First, if you haven't done so, learn about REST API endpoints and use Django REST framework or a similar library to surface your application's data via REST API endpoints. This allows you to get your data by visiting URL's on your Django development server without it having to be served in through the Django templating engine, which is what I'm assuming you're doing at the moment. Something like:
http://localhost:8000/api/users/
Will return a list of users that looks something like:
[{
username: 'Bob'
email: 'bob#gmail.com'
}, {
username: 'George',
email: 'george#gmail.com'
}]
Then you can serve up your angular application as a static file through another development server using something like http-server through node.
Now your angular application can be served up through http://localhost:8080/ and your django application can be served up through http://localhost:8000/. Your data for your angular application is now accessed strictly through HTTP calls, which decouples the previously intertwined and mangled frameworks.
This allows you to use angular's templating engine instead of trying to keep track of where your template files are being served through your Django server. So your folder structure for angular can look something like:
app
|-- index.html (includes your main angular application)
|-- templates/ (templates here)
|-- app/ (app files here)
This is just an example though, a good source on how to write and organize your application, which I find useful, can be found at https://github.com/johnpapa/angular-styleguide.
Let me know if you have anymore questions!
Here's my issue:
My project is mainly contained in index.html, with ui-router placing the various pages in a <div ui-view></div> section.
In one my other pages, let's call it page1, I have an ng-include to a partial in the same subdirectory. However, when I try to include this partial using
<div ng-include="'page1Partial.html'"</div>
I get a console error that
GET http://localhost/myProj/v3/myproj/app/index/page1Partial.html 404
This is obviously because ui-router moved my page into index.html and it's looking for the ng-include based on that directory.
I really don't want to move the partial to the index folder, as that structurally makes no sense my project. I also, don't want to type out a whole hardcoded path to this same directory (which could potentially change in the future). I want to be able to refer to this partial in a relative, simple and safe way.
What is the best way to efficiently and quickly manage this issue?
I've included what my file structure looks like:
myproj
|-- app
| |-- index
| | |-- index.html
| | |-- index.js
| |-- page1
| | |-- page1.html
| | |-- page1.js
| | |-- page1Partial.html
| |-- page2
|-- common
| |-- resources
| | |-- page1resources.js
| | |-- page2resources.js
If your project is in fact a single-page app (user opens index.html and all other pages are dynamically included using ui-router), you'd save yourself much hassle by simply putting your single point of access (index.html) right in the root folder of your application. All relative paths would then have the root folder as context.
When creating such single-page applications, it is quite common to create index.html automatically during build (see index task in Gruntfile.js in ngBoilerplate).
If you cannot (or don't want to) put your index.html in your root folder, you could just rewrite URLs (in your server) to make it appear to be there. In Apache, you could use mod_rewrite for that:
RewriteEngine on
RewriteRule ^/$ /app/index/index.html [QSA]
(you'd then access your app at http://localhost/myproj/.)
I'm using Django to create a Rest application.
I'm currently working on unit testing my application and instead of doing a coverage source=="." manage.py test myapp --settings="mycustomsettings" I decided to create a script that can start my tests and run them with a custom conf file and a coverage result.
Here is my tree :
|-- apps
| |-- __init__.py
| |-- me_api
| |-- me_auth
| |-- me_core
| |-- me_import
| `-- me_payment
|-- manage.py
|-- settings.py
|-- settings.pyc
|-- tests
| |-- coveragerunner.py
| |-- geodjango.db
| |-- __init__.py
| |-- local_settings.py
| `-- settings.py
|-- urls.py
`-- urls.pyc
I want to test the apps that are in the apps/ folder.
Here is my code (in tests/coveragerunner.py)
import os
import sys
from coverage import coverage
sys.path.append(os.path.join(os.path.dirname(__file__), "../"))
os.environ['DJANGO_SETTINGS_MODULE'] = 'tests.settings'
def main():
"""
Run tests and generates a coverage report.
"""
cov = coverage()
cov.erase()
cov.start()
from django.conf import settings
from django.test.utils import get_runner
TestRunner = get_runner(settings)
test_runner = TestRunner()
failures = test_runner.run_tests(['me_api'])
cov.stop()
if __name__ == '__main__':
main()
I'm using the geodjango.db which is a spatialite db as my default db for tests.
My script takes the settings for django but when I run it, it seems that the database is empty. I doesn't sync the DB on its own.
DatabaseError: no such table: me_auth_emailuser
Is there a way I can tell django to sync the db before running the tests or maybe did I do something wrong ? Thanks.
PS : When I used the manager.py there was no problem with the DB. (even with the spatialite db and the different settings source)
A quick and dirty solution goes as follows:
Set the database engine to sqlite, also for non-tests.
Make a syncdb to create a template for the test database.
Now the tests should work.
Don't forget to set the database engine back to postgesql.
At the moment I try to build a site with public and private area. I use Node.js server-side. Node.js mainly provides data via REST Web Services for the front-end and handle the login. All data will be stored in a MongoDB. The front-end is built with AngularJS. At the moment I use nginx for static files and only REST calls (/api/…) and the login (/login) will be pass to node.js.
This is my current file structure:
www
|-- public
| |-- css
| |-- img
| |-- js
| | +-- templates
| | +-- login.html
| |
| +-- index.html
|
|-- private
| |-- css
| |-- img
| |-- js
| | +-- templates
| | +-- someprivatestuff.html
| |
| +-- index.html
In Node.js I use passport for authentication.
app.post('/login', passport.authenticate('local'), function(req, res) {
res.redirect('http://localhost/private');
});
If the user authed successfully, he will be redirected to /private. The problem is that the file structure above, will be served by the nginx. Because they are static files. How can I prevent people from accessing the private-area directly by typing the url /private (or other files in that directory). Should I use node.js also for the static files to handle the access to the files? But I read to use nginx in front of Node.js is a common approach.
If I understand you correctly this is what you're looking for?
http://wiki.nginx.org/XSendfile