I am working on a little interface built around AngularJS. I have an index.html file and I built a route to a base.html file (using ng-view) which contains several elements including a Morris chart.
However, when I launch my index.html everything from the base.html is displayed... except the chart. And I have the following error in the console :
Error: Graph container element not found
So I tried, to move my scripts morris.js (and 2 others) to the base.html juste after my element (that will contain the chart) is created but it doesn't work neither.
index.html
<!DOCTYPE html>
<div ng-app="pistApp" ng-controller="MainController" id="wrapper">
<div ng-view id="page-wrapper">
</div>
</div>
base.html
<!-- other elements who works but I simplify -->
<div id="morris-area-chart"></div>
Problem solved thanks to Angularjs does not load scripts within ng-view
I just had to include jQuery before angular script.
Include in your project-'raphael/raphael.js','morris.js/morris.js', 'angular-morris-chart/src/angular-morris-chart.js','morris.js/morris.css'
These files will be in your bower_components after the bower install angular-morris-chart.
Try examples in https://angular-morris-chart.stpa.co/
it will work.
Related
Given the following scenario, how can I use React/Preact components in my project:
The main/header content is generated using Django (or static html) templates
I want to use React to generate the sidebar and footer components, depending on the page it is sitting on.
I think the following would work, but I don't know how to split or load the bundles according along the following lines:
Load React/React-dom bundle on every page
Load page specific bundles on demand, where needed
How can I bundle single components up using webpack for use in static html pages and display them where needed? How do I configure webpack for that?
Essentially you transpile React from a bunch of JS/JSX files into one JS script (using Babel), which is then loaded in your html document. So it'd be something like this:
<html>
<head>
// Usual head section stuff
</head>
<body>
<div id="header">
This is the Django site header
</div>
<div id="sidebar_root" />
<div>
Blah blah all the site's body content from Django
</div>
<div id="footer_root" />
<script src="react_sidebar.js" />
<script src="react_footer.js" />
</body>
</html>
And you'd have you React components (which would have a bunch of sub-components), one of which is rendered into "react_sidebar.js" and the other into "react_footer.js". So those components would be in React and the others would be Django.
So in order to load React bundle scripts on demand, you just need to include the script and the div which acts as its root.
P.S.
If you were always loading the sidebar and footer together (i.e. never just one or the other bur always both) you could combine them React DOM rendering into one script, so you'd only have to include one script in your html
I could not get completion for my angular js eclipse based file. I know there could be lot of tutorials for setting up proper angular js for eclipse. But i read and followed the same and didn't worked still.
I also followed official link-> [Angular JS Eclipse Github setup link][1]
I installed, “Angular JS” from “Eclipse->Help Menu->Eclipse Marketplace”
It got installed and restarted.
Then, Eclipse->New->Static web project
Then, Convert the project to Angular. Right click Project, Configure-> Convert to Angular JS project
Then, Adding new html files. Right click Project, New->HTML file
Simple code:
<!DOCTYPE html>
<html lang="en-US" ng-app>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<body>
<div>
<p>Name : <input type="text" ng-model="name"></p>
<h1>Hello {{name}}</h1>
</div>
</body>
</html>
It works fine. Runs in the browser well.
My problem is, why does not it show the completion help when I type on "ng-" and use control + space in mac eclipse ? When I move cursor on "ng", it gives help of "div" tag rather than "ng" help. I want to just type "ng-" and get the list of available methods by just press control + space in mac eclipse
I can understand that there is some angular installation problem. But, none of the existing solution solved my issue.
I use $routeProvider and load views HTML via <div ng-view></div>.
In loaded file HTML there is HTML:
<script src="/public/js/tags/tokenize/jquery.tokenize.js"></script>
<link href="/public/js/tags/tokenize/jquery.tokenize.css" rel="stylesheet" type="text/css">
But these files are not connected in page. Also JS does not exicute on ng-view
This is because Angular thinks your <script> is the directive script. You have two possible solutions:
create a directive
include your code out of the app.
If you need to dinamically load your resources use a service, as suggested in this question.
Also, for reference, take a look to this question too
I am using a Bootstrap 3 based template called Unify and implemented Angular JS with ui-routing. Most of it works fine. Just my whole navigation is in the header and I use ng-include to inject the header from a html template file. Them the hover dropdown js plugin does not work anymore. My Code looks something like this.
<header ng-include="'templates/header.html'"></header>
<!--=== Content Part ===-->
<div class="container">
<div class="row" >
<div ui-view autoscroll="false"></div>
</div>
<footer ng-include="'templates/footer.html'"></footer>
and the plugin is called before the tag with the rest of scripts needed.
It works fine when I use the files as is without the Angular JS it also works fine with Angular JS if I don't inject the code but leave it in the index.html as is but not as now.
Hopefully somebody can help me out because I have the same problem with the parallax slider with for convenience sake I just keep in the index.html for now.
Thanks,
Gerd
Thanks to the detailed answer Chris T gave me in another question I found it is a scope related issue. Now I am loading the hover dropdown js within the template file and it works fine.
I ran into the same issue, and tried loading the hover dropdown js in a script tag in the template. That resulted in an error (Like the one here: Can AngularJS ng-include load a Jinja2 processed html on FLASK?)
So instead of doing that, I got it to work by creating a controller for my template and inside the controller I added the drop down hover via:
$('.dropdown-toggle').dropdownHover(options);
Is there a way to make the AngularJS partial views a complete HTML files, so they will be easier to edit
and have Angular strip them to their body content (much like what the RequireJS text plugin does with the strip option)
I will clarify my question since the answer and comments show that it was not clear enough:
currently the content of the partial file is:
<p>{{value}}</p>
i want it to be:
<!doctype html>
<html><head><!-- with all things in the head to make it work stand alone HTML of Angular app --></head>
<body>
<p>{{value}}</p>
</body>
</html>
So that i will be able to work on the partial as a stand alone app
Yes, you can use the ng-view in your template HTML file, something like:
<html ng-app="myApp">
<head>
...
<head>
<body ng-view>
</body>
</html>
Then in your $routeProvider you can use templateURL:, like:
$routeProvider.when('/register', {templateUrl: 'partials/register.html', controller: 'RegisterCtrl'});
The file partials/register.html is a complete HTML file.
So far the only answer i did found for this, is to actually use Angular with require.js - then I can leverage the text plugin and have my partials real apps.
The way to do it is to configure your app to load all templates using the text plugin of require with the strip option, then your views can have html with head and body that are ignored - so you can provide the necessary require.js files (it can share the same require.js configuration as the normal app if it is located at the same level as the normal app - i decided to place them in adjacent folders. but they do need different require.js main - so the main needs to reference the configuration)
Setting this up takes some effort, but it helps me develop large views with a lot of logic in them separately, and then just link them into my app as a view (while maintain the ability to access them separately, mostly for debugging)