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/.)
Related
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!
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.
So my directory structure looks something like this:
\Project-Dir\
|- lib\
| |- flask\
| |- ...
|- module1_dir\
| |- __init__.py
| |- app.yaml
| |- app.py
| |- ...
|- module2_dir\
| |- __init__.py
| |- app.yaml
| |- app.py
| |- ...
|- ...
Inside app.py
sys.path.insert(0, os.path.abspath(os.path.join(os.path.dirname(__file__), '../lib')))
I have two modules inside the same root directory. They are both deployed to App Engine together. They also share the same libraries. The libraries are all pretty beefy so I'm trying to place them in a shared directory (lib).
I'm running dev_appserver.py from \Project-Dir\ and passing the two .yamls. My sys.path is set up fine to include the lib\ directory. And yet the sandbox seems to stubbornly insist that the libraries in lib\ just don't exist.
I'm sure I'm just missing something small like a config change somewhere. Or does App Engine really just flat-out not support such a setup?
EDIT: The imports work fine when I run it outside of dev_appserver.py.
I spoke to a Google support engineer, after facing the same problem. Unfortunately, GAE does not support this kind of setup.
When you use the Modules API, module 1 and module 2 run inside separate Python virtual environments as separate self-contained instances. They cannot 'see' the contents of their parent directory. Modifying sys.path doesn't make a difference.
There are two solutions:
(a) Duplicate your 'lib' folder by placing it inside both 'module1_dir' and 'module2_dir'.
(b) Place the module files directly in the root directory.
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