Skip to main content

ng2django

PyPI PyPI - License

This is a simple Python tool that will convert an HTML file built by Angular2+ to Django Template Language. This way static files can be made available to an Agnular app that is served up with a Django project.

The script basically does two things:

  • Adds a {% load static %} tag to the top of the file
  • Changes the value of href and src attributes of link and script tags to {% static "<path-to-the-file>" %}

Dependencies

The script uses Beutifulsoup4. You can install it by running pip install -r requirements.txt.

Install

Just run $ pip install ng2django

Usage

Build your Angular app and place the files in <Django-project-root>/<app>/static/<optional-subdirectory>/.

The script takes two positional arguments:

  • source: The path to the HTML file you want to convert.
  • dest: Where you want the Django Template file saved.

Then you can run

$ ng2django <Django-project-root>/<app>/static/index.html <Django-project-root>/<app>/templates/index.html

if you are storing your files directly in your Django app's static and templates directories (not recommended), or

$ ng2django <Django-project-root>/<app>/static/<optional-subdirectory>/index.html <Django-project-root>/<app>/templates/<optional-subdirectory>/index.html -s <optional-subdirectory>

if you are using some subdirectory of those paths.

Optional Arguments

Short Long Description
-s <subdir> --subdir <subdir> Include the subpath under <Django-app>/static/ where your static files are stored.
-css <cssdir> --cssdir <cssdir> Include the subpath under <Django-app>/static/<optional-subdir>/css/ where your static CSS files are stored.
-js <jsbdir> --jsdir <jsir> Include the subpath under <Django-app>/static/<optional-subdir>/js/ where your static JS files are stored.
-img <imgbdir> --imgdir <imgdir> Include the subpath under <Django-app>/static/<optional-subdir>/img/ where your static IMAGE files are stored.
-n --nodelete Do not delete the source file after converting.
-p --pretty Create a dest file that is more human readable.

Recommended Setup and Usage

In you Angular project open your package.json file. Under scripts, change build to

ng build --prod --output-path <Your-django-project-root>/<Django-App>/static/ng.

Add a postbuild key under script and set the value to

ng2django <Your-django-project-root>/<Django-App>/static/ng/index.html <Your-django-project-root>/<Django-App>/templates/ng/index.html -s ng.

Or if you have css / js / images in seperate directories within static use args: -css css -js js -img img ng2django <Your-django-project-root>/<Django-App>/static/ng/index.html <Your-django-project-root>/<Django-App>/templates/ng/index.html -s ng -css css -js js -img img.

Run npm run build and your Angular JS and CSS files will be saved to your Django app's static directory. Then, this script will run and convert your HTML file and save it in your Django app's templates directory.

Contributing

Contributions are welcome - submit an issue/pull request.

Push to PyPi

Use these commands to release on PyPi

rm -rf dist/ build/
python setup.py sdist
twine upload dist/*

Metadata

Release files for ng2django 22.9.27

For a detailed explanation of source distributions (sdists) and built distributions (wheels), please see the package formats documentation.

Source distribution (sdist)

Source distribution for ng2django 22.9.27
File Size Uploaded
ng2django-22.9.27.tar.gz 4.1 kB Details

Release files / ng2django-22.9.27.tar.gz

Download URL ng2django-22.9.27.tar.gz
Size 4.1 kB
Tags Source
SHA-256 checksum
How to use checksums
94dbff7b16cff44a659ae3cb193d7a99bb0333b0e546ce11c624906f86afeaba
BLAKE2b-256 checksum
How to use checksums
0868836706071475f04407a4913ffb810aafee6453dd54a841a804d2612c0966
Upload date
Uploaded using Trusted Publishing?
What is trusted publishing?
No
Uploaded via twine/3.2.0 pkginfo/1.5.0.1 requests/2.24.0 setuptools/41.2.0 requests-toolbelt/0.9.1 tqdm/4.47.0 CPython/3.8.2

Release history Release notifications | RSS feed

This release

22.9.27 This release

1 release file

20.7.13

1 release file

0.1.4

2 release files

0.1.3

2 release files

Anthropic, PBC Visionary sponsor Bloomberg Visionary sponsor Hudson River Trading Visionary sponsor Meta Visionary sponsor NVIDIA Visionary sponsor Microsoft Sustainability sponsor Depot Continuous Integration AWS Cloud computing and Security Sponsor Datadog Monitoring Fastly CDN Google Download Analytics Sentry Error logging StatusPage Status page