I've generated a Spring Boot application by using Spring Initializr. This is the screenshot of my resources directory.
I added Angular dependencies by using <script> tag in index.html
<!DOCTYPE html>
<html lang="en" ng-app="companyApp">
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular-route.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular-resource.min.js"></script>
<script src="app.js"></script>
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
Hello, Spring!
</body>
</html>
My main application class is configured with #SpringBootApplication annotation.
Once I open the page, I get this error in the console
Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.5.0/$injector/modulerr?p0=companyApp&p1=Error…ogleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.5.0%2Fangular.min.js%3A20%3A449)
From documentation I see that some module failed to load.
Should I include any other libraries in the index.html page to fix this error?
Solved the issue. Just use Bower to download needed dependencies and add them to /static directory.
Include in index.html
<!DOCTYPE html>
<html lang="en">
<script src="bower_components/angular/angular.min.js"></script>
<script src="bower_components/angular-resource/angular-resource.min.js"></script>
<script src="bower_components/angular-route/angular-route.min.js"></script>
<script src="app/app.js"></script>
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body ng-app="companyApp">
Hello, Spring!
</body>
</html>
if you want to split your static contents in many ways:
put them separately on apache/nginx server then it will access your spring boot application throw REST, but with different IP "if different machine" or Port "on same machine".
spring boot application can get static content outside its fat jar if you put the in /static folder in same path of your fat jar file, and you can change this path in application.properties using spring.resources.staticLocations property check here
finally you can make jar project to contains your static contents and add this project using maven as dependency to your spring boot project, do not forget your static contents have to be in /resources/static
which option to use based on you case and you project size but it is recommended to split it if you have different developers working on front/back end.
Just add AngularJS using Spring Initializr and it will do it all for you, or do it separately and copy how it generates the front-end layout. I personally have resources -> static -> app then have all of my partials within 'app', index.html under 'static' and application.properties under 'resources'.
Related
I made an app using Django REST Framework as the backend and React as the frontend. It works on localhost.
Now I am trying to deploy the app to AWS.
When I follow the tutorial for deploying the Django app on AWS Beanstalk it worked for the API. I am able to use Postman and access the endpoints.
When I go to the URL, I get 404, debug is on:
Using the URLconf defined in dca.dca.urls, Django tried these URL patterns, in this order:
^api/dcasetting/$ [name='dcasetting-list']
^api/dcasetting\.(?P<format>[a-z0-9]+)/?$ [name='dcasetting-list']
^api/dcasetting/(?P<pk>[^/.]+)/$ [name='dcasetting-detail']
^api/dcasetting/(?P<pk>[^/.]+)\.(?P<format>[a-z0-9]+)/?$ [name='dcasetting-detail']
^$ [name='api-root']
^\.(?P<format>[a-z0-9]+)/?$ [name='api-root']
api/auth
api/auth/register
api/auth/login
api/auth/user
api/auth/logout [name='knox_logout']
The current path, index.html, didn’t match any of these.
EDIT:
When I go to the base url:
It seems the http://django-env.eba-3.us-west-2.elasticbeanstalk.com/ is trying to and succeding in loading the correct file: http://django-env.eba-3.us-west-2.elasticbeanstalk.com/static/frontend/main.js. I can see the template code on inspecting the page:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Fort</title>
<link rel="stylesheet" href="https://bootswatch.com/5/cosmo/bootstrap.min.css">
</head>
<body>
<div id="app"></div>
{% load static %}
<script src="{% static "frontend/main.js" %}"></script>
<script src="https://cdn.jsdelivr.net/npm/#popperjs/core#2.11.5/dist/umd/popper.min.js" integrity="sha384-Xe+8cL9oJa6tN/veChSP7q+mnSPaj5Bcu9mPX5F5xIGE0DVittaqT5lorf0EI7Vk" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0/dist/js/bootstrap.min.js" integrity="sha384-ODmDIVzN+pFdexxHEHFBQH3/9/vQ9uori45z4JjnFsRydbmQbmL5t1tQ0culUzyK" crossorigin="anonymous"></script>
</body>
</html>
Then it runs into a 404 when loading the main.js script. Would this be a path related error? Anyway to check this?
Then I tried one of the paths being tried above:
api/auth/login
This gives me error:
Request Method: GET
Request URL: http://django-env.eba-3.us-west-2.elasticbeanstalk.com/api/auth/login
Django Version: 4.0.6
Exception Type: TemplateDoesNotExist
Exception Value:
rest_framework/api.html
Exception Location: /var/app/venv/staging-LQM1lest/lib/python3.8/site-packages/django/template/loader.py, line 19, in get_template
Python Executable: /var/app/venv/staging-LQM1lest/bin/python
Python Version: 3.8.5
Python Path:
['/var/app/current',
'/var/app/venv/staging-LQM1lest/bin',
'/var/app/venv/staging-LQM1lest/bin',
'/usr/lib64/python38.zip',
'/usr/lib64/python3.8',
'/usr/lib64/python3.8/lib-dynload',
'/var/app/venv/staging-LQM1lest/lib64/python3.8/site-packages',
'/var/app/venv/staging-LQM1lest/lib/python3.8/site-packages',
'/var/app/current/dca']
The folder structure:
my_app
|-.ebextensions
|-.elasticbeanstalk
|-MyApp
|-accounts
|-MyApp
|-MyAppsett
|-frontend
| manage.py
| db.sqlite3
|-node_modules
| .babelrc
| package-lock.json
| package.json
| pipfile
| pipfile.lock
| requirements.txt
| webpack.config.js
I am not sure what to try next.
Say that an app needs to be created using AngularJS with Cordova in Visual Studio, do I require anything else besides the Google CDN to use AngularJS?
<!doctype html>
<html ng-app>
<head>
<title>My Angular App</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
</head>
<body>
</body>
</html>
I notice that npm is usually used to install AngularJS, though if just a simple app needs to be created, could this be sufficient.
Code from: https://docs.angularjs.org/misc/downloading
That's all you need. I find installing angular locally is great for development, since I use developer tools to disable caching and I don't want to ping the CDN everytime I update a view, but for quick projects the CDN is fine.
I have a Angular UI which i deployed as a Spring Boot Web WAR file on a Jboss container (By moving all html, js, css files to /resources/static folder). I used mvn package to create the WAR file and deployed it on Jboss. Now i realized that all static resources like my app.js are loaded in http://localhost/appcontext/js/app.js.
In my angular code i just have
<body>
<script src="https://code.angularjs.org/1.5.5/angular.js"></script>
<script src="https://code.angularjs.org/1.5.5/angular-messages.min.js"> </script>
<script src="https://code.angularjs.org/1.5.5/angular-resource.min.js"></script>
<script src="https://code.angularjs.org/1.5.5/angular-route.min.js"></script>
<script src="js/app.js"></script>
<script type="text/javascript" src="https://cdn.rawgit.com/cdaguerre/gmaps- utility-library/4f71018696f179acabbe445f188fc2de13f60c3e/markerwithlabel/src/markerwithlabel.js"></script>
</body>
When the code is executed, it is trying to look for app.js in http://localhost/js/app.js and doesnt find it. How do i make all static resources to load from http://localhost/appcontext?
Why don't you just call the resources specifiying their location relative to where they are?
Something like <script src="appcontext/js/app.js"></script>.
It seems that's what you need, but maybe I'm missunderstanding your problem
I'm starting out with ReactJS and I'm following the simple example in the "Gettind Started".
This is my HTML file:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Hello React!</title>
<script src="js/reactjs/react.min.js"></script>
<script src="js/reactjs/react-dom.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
<script type="text/babel" src="js/main.js"></script>
</head>
<body>
<div id="example"></div>
</body>
</html>
It works. But if I watch the network traffic with Fiddler, I see that main.js is pulled twice from the server. Is that on purpose? bug?
As soon as browser encounters following lines
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
<script type="text/babel" src="js/main.js"></script>
browser issues http requests for both files. But since js/main.js is of 'text/babel' type for browser it won't be given to JavaScript engine to parse/execute. Rightly so, because the 'main.js' might have ES6 code which browser won't understand as it now. Once babel's browser.min.js loads and executes, it searches for script tag in DOM with type 'text/babel' and then issue XHR request to load that file. After that browser.min.js compiles the code in 'main.js' transform it into ES5 and then executes it. This is the way it works.
Since browser already has 'js/main.js' in its cache from earlier request, the XHR request issued by babel's browser.min.js for 'js/main.js' is served from the cache itself, so there won't be any additional external http request.
I can't figure out why I'm getting the ERR_EMPTY_RESPONSES error below. I am working on Chapter 2 of Learning AngularJS by Ken Williamson. I typed in all the code exactly as it is in the book and set up the directory structure exactly as it is listed in the book. However, when I try to run the project (locally on my computer), I get the following error:
Failed to load resource: net::ERR_EMPTY_RESPONSE (22:27:47:397 | error, network)
at http://localhost:8383/AngularJsHelloWorld_chapter2/partials/main.html
Error: [$compile:tpload] http://errors.angularjs.org/1.5.0-rc.0/$compile/tpload?p0=partials%2Fmain.html&p1=-1&p2=
at Error (native)
The code for the relevant pages look like this:
Index.html:
<!DOCTYPE html>
<html lang="en" ng-app="helloWorldApp">
<head>
<title>AngularJS Hello World</title>
<meta name="viewport" content="width=device-width, initial- scale=1.0">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="js/libs/jquery-1.11.3.min.js"></script>
<script src="js/libs/angular.min.js"></script>
<script src="js/libs/angular-route.min.js"></script>
<script src="js/libs/angular-resource.min.js"></script>
<script src="js/libs/angular-cookies.min.js"></script>
<script src="js/app.js"></script>
<script src="js/controllers.js"></script>
<script src="js/services.js"></script>
</head>
<body>
<div ng-view></div>
</body>
</html>
main.html:
<div>{{message}}</div>
I realize I might need to provide additional information. Any help is appreciated.
Here is a link to the directory structure:
https://library.oreilly.com/book/0636920035831/learning-angularjs/14.xhtml?ref=toc#idp2844416
Here is the code on Github: https://library.oreilly.com/book/0636920035831/learning-angularjs/14.xhtml?ref=toc#idp2844416
By the way, my directory is slightly different from the book in that I have the latest versions of the js framework in it.
This error is caused by a known issue in ngRoute (https://docs.angularjs.org/api/ngRoute):
If ngView is contained in an asynchronously loaded template (e.g. in another directive's templateUrl or in a template loaded using ngInclude), then you need to make sure that $route is instantiated in time to capture the initial $locationChangeStart event and load the appropriate view. One way to achieve this is to have it as a dependency in a .run block: myModule.run(['$route', function() {}]);
Adding the following code should fix the error. It did for me when opening the web page locally.
helloWorldApp.run(['$route', function() {}]);