I am new to this Django-Angular JS integration. I created few web pages in AngularJS, views were working fine. As soon as I integrated with Django, first I had to correct paths to work but still views are not working. The view part stays blank and also grows in length (as if it goes into some loop!). Any idea guys?
EDIT:
Below is the way I am calling the view inside verbatim section of index.html
<div ng-view=""></div>
My js config file:
'use strict';
var mainAngular = angular.module('bazaar',['ui.bootstrap', 'ngRoute', 'ngCookies']).run(function($http, $cookies) {
$http.defaults.headers.post['X-CSRFToken'] = $cookies.csrftoken;
});
mainAngular.config(function($routeProvider, $locationProvider) {
$routeProvider
.when('/', {
templateUrl: "../static/views/welcomeView.html"
})
I have just pasted the code which I am using for view call. Let me know if its helpful or you guys need more details.
Well, I found out the issue so thought to drop the answer as well so that It may be helpful for other newbies like me.
I was including js file in my view ealier (which was working completely fine when run as a separate page using Tomcat) , but as soon as I integrated with Django I had to remove all js file path from <script> tag and Bingo !!
Related
I included a standalone AngularJS project in IBM BPM by keeping all the project assets (html, css & js files) in resources (teamworks.war) and keeping the index.html and AngularJS's main controller in customHTML in BPM's coach view.
Routing file for AngularJS (app.js):
angular.module('demoApp', ['ui.tree', 'ngRoute', 'ui.bootstrap'])
.config(['$routeProvider', function($routeProvider) {
$routeProvider
.when("/tree", {
controller: "treeCtrl",
templateUrl: "template.html"
})
.otherwise({
redirectTo: '/tree'
});
}]);
BPM loads the AngularJS app again and again (using '/tree ' instead of '/tree' as the template name) as seen from elements in developer tools in ng-view and ultimately the browser gets crashed.
Although the same AngularJS app works perfectly fine on browser independently (without being included in BPM).
How can this behaviour be avoided in BPM?
Sometimes third party libraries have limitations which you would not have locally.
When it is not possible to change the source code of that particular project, you might be better off by incurring a small stylistic penalty in your own code, so that you can integrate with the other software.
In this case, if you cannot change the configuration to omit the space, you could change your own template name to '/tree ', which will have an unnecessary space after your template name, but should be called on properly through BPM.
So, I'm pretty new to AngularJS and I'm trying to use AngularJs ngRoute in my application.
It all works smoothly when I start at the application homepage:
http://localhost:8080/appName/
And when I click on links from this point it works smoothly.
However, when I type a URL that I know exists/works, it gives me a 404 error. If I go to that link by using the application instead of the url it loads fine, even though it has the same url.
Eg. http://localhost:8080/appName/search
will give a 404, even though that is the same url that is the default redirect.
Indeed, the only url that will load by typing in the location is the base URL I mentioned above.
My app.js looks like this:
app.config( ['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider){
$routeProvider
.when("/search", {
templateUrl: "search.html",
controller: "SearchController"
})
.when("/results", {
templateUrl: "results.html",
controller: "ResultsController"
})
.when("/browse", {
templateUrl: "browse.html",
controller: "BrowseController"
})
.otherwise({redirectTo:"/search"});
//This gets rid of the # on the urls to the templates
$locationProvider.html5Mode(true);
}]);
I am hosting this on a glassfish4 server.
Is there something obvious I am missing/misunderstanding about how ngRoute works? Is there some setting that I am missing?
All help appreciated...
EDIT 1: As #Matthew Green below says, I need to configure the webserver to return the index.html for all pages below
http://localhost:8080/appName
I know I am being completely dense here, but where abouts is this configured? I am hosting the code in a MAVEN Jersey-Quickstart-Webapp.
When you use ngRoute, you are using javascript to handle routing to create a SPA. That means you need to hit a real page that loads your routing for your application to know what page to route to.
For example, your http://localhost:8080/appName/ should be routing to your index.html which would contain the javascript for your routing. With that page loaded it knows how to handle the links you have in your application. However, if you were to go directly to http://localhost:8080/appName/pageName you also need that to load index.html, as it is the one that loads your routing. Once your routing is loaded it should direct you to the correct page in your application. Without redirecting in place, http://localhost:8080/appName/pageName is not a real page and therefore correctly returns a 404.
Knowing this, the thing you have to figure out is what kind of server setup you have to configure the appropriate redirects for everything under http://localhost:8080/appName/ to go to your index.html page.
I am having an angular application, I want when first navigating to the homepage of my application, to get a specific view called: Search.html, I want anytime I open this home page to render this view, how do we do this in Angular? I have checked the online documentation and it's doing so by having Urls that redirect to another page, for my case, I don't have Urls, I have a landing page where I want to get a specific view when it's opened.
Here's a link to plunker that shows my issue.
I would imagine the issue is because you need to link the dependency script angular-route.js in your head, and also define your app with ng-app. Also, putting your controller and module code in separate anonymous functions prohibits the controller from seeing the module variable.
Check out this fork of your plunkr for how to get it to work.
you can use $routeProvider like this
angular
.module('myApp', ['ngRoute'])
.config(['$routeProvider', function($routeProvider) {
$routeProvider.otherwise({redirectTo: '/search'});
}]);
I'm trying to compartmentalize an Angular app and running into issues getting the ngView working properly. The route seems to be configured correctly, as when I log its properties I get: $route, $routeParams, and $location, I get:
Object {routes: Object, reload: function, updateParams: function}
Object {}
and
LocationHtml5Url {$$html5: true, $$protocol: "http", $$host: "localhost", $$port: 3000, $$parse: function…}
I read here that the $routeParams can appear empty due to its aynchrynous nature, so I don't think thats an issue, but I'm not sure what I'm missing.
Heres the err message:
GET http://localhost:3000/partials/projectBlocks 404 (Not Found)
I know I'm supposed to be routing relative to the root of my app, which I believe I am, so I'm not sure why its looking for the partial in what appears to be the ../public/.../ folder (app is typical express structure)
Heres my code:
jade view (in ./views)
div(ng-controller='projects')
div(ng-view)
partial view (./views/partials)
p hey you found me!
controller (in /public/ directory)
angular.module('mean-man')
.controller('projects', ['$scope', '$http', '$route', '$routeParams', '$location', function($scope, $http, $route, $routeParams, $location){
console.log($route);
console.log($routeParams);
console.log($location);
this.$route = $route;
this.$location = $location;
this.$routeParams = $routeParams;
angular app.js file (in /public/ directory)
(function(){
angular.module('mean-man', ['ngRoute','ngAnimate','mm.foundation'])
.config(['$routeProvider', '$locationProvider',
function($routeProvider, $locationProvider){
$routeProvider
.when('/:member', {
templateUrl: 'partials/projectBlocks',
controller: 'projects',
controllerAs: 'project'
});
$locationProvider.html5Mode({enabled:true,requireBase:false});
}]);
})();
I was going off the AngularJS official documentation and this site, so my code may be a mix of the two, thanks for any help / references!
AngularJS won't compile the Jade templates for you. You have it setup to look at 'partials/projectBlocks', and since I assume you are using '/public' for your static server directory, it's going to expect a file at '/public/partials/projectBlocks' relative to your project's root directory.
To solve this problem, you need to either setup some middleware that will check if the request is looking for a file in the partials directory, and if so, compile it using Jade so that it will exist when the request reaches the static server middleware, or, manually compile the Jade into HTML using something like HTML2Jade and create a new file in the '/public/partials' directory called 'projectBlocks'. AngularJS will not assume an HTML extension, so if you make the file called 'projectBlocks.html', you must change the template URL to 'partials/projectBlocks.html'
After a quick Google search, you can use Connect Jade to accomplish the first suggestion I made above. Simply follow the instructions in the README, and it will act as a Jade compiler and static server for that directory.
I ended up finding the solution in another answer here:
Express and AngularJS - web page freezes when attempting to open home page
The short of it is I got myself confused between my Express routers and Angular routers. I had moved my partials/projectBlocks around while debugging trying to find the correct file structure because the one I'd created didn't seem to work. But, when I got it connected it would stall out the browser. Turns out I left out the handler for the actual Angular request, causing it to never go through and timing out.
I work in an environment where we develop a solution using several (a lot of) servers. They microservice style is the role model.
To be able to upgrade systems they must be switchable/replaceable (including the user interface) in runtime.
The principal solution that have been decided upon is that
a Portal/Proxy is the only visible system for the end user
The proxy is "aware" af the supporting servers
The proxy has some basic user interface with for instance menues. Might be in collaboration with the subsystems (several entries in the menu etc.)
A user requests a page with some dynamic content
The portal relays/proxy the query of "content" part of the page to the subsystem.
Any REST-calls needed by the client is also proxied through the main server.
The REST calls are of course very simple but I am too n00b in Angular to really understand how to make the "mix.
Point number 5 is of course the tough part. IF the subserver would have been visible an iframe (eeek!) could have been used but not in this case.
I need some sort of "delegation" within a page, anything done before? How DOES the microservice flagships handle the User Interface?
I have now evolved from n00b to n00b++ regarding Angular.
The solution lies within the HTML-snippets used for templates within Angular.
I can define a html template with a JS file and an HTML file. The JS file refers to the HTML page by a URL. Usually (in the samples I have seen) the path is relative like:
angular.module('myApp.view1', ['ngRoute'])
.config(['$routeProvider', function($routeProvider) {
$routeProvider.when('/view1', {
templateUrl: 'view1/view1.html',
controller: 'View1Ctrl'
});
}])
.controller('View1Ctrl', [function() {}]);
But by using an absolute path I can refer to an external resource:
angular.module('myApp.view2', ['ngRoute'])
.config(['$routeProvider', function($routeProvider) {
$routeProvider.when('/view2', {
templateUrl: host + '/app/view2/view2.html',
controller: 'View2Ctrl'
});
}])
.controller('View2Ctrl', [function() {}]);
Notice I added a parameter 'host' calculated by looking at the script tag including this JS file.
var scripts = document.getElementsByTagName('script');
var src = scripts[scripts.length - 1].src;
var host = src.match(new RegExp('https?://[^/]*'))[0];
But the third problem to address is to handle the CORS problem. In my test environment (node.js+express) I just added the 'cors' library and I could access my "external" site.
var express = require('express'),
cors = require('cors'),
app = express();
app.use(cors());
app.use("/", express.static(__dirname));
app.listen(8001, function(){
console.log('CORS-enabled web server listening on port', 8001);
});