i'm starting with angular,express and node js and i'm trying to load 2 directives in an html page using the oc-lazy-load directive.
I'm doing like this: https://oclazyload.readme.io/docs/oclazyload-directive
<!DOCTYPE html>
<html lang="fr" ng-app="app">
<head>
<meta charset="UTF-8">
<title>Angular,MongoDB,Express,NodeJS</title>
</head>
<body>
<!-- Header placed here and included by oclazyload and header directive -->
<div oc-lazy-load="['./modules/headfoot/directives/header.js']">
<appheader></appheader>
</div>
<main>
<!-- All modules views will be placed here and included by ui-view directive -->
<div ui-view></div>
</main>
<!-- Footer placed here and included by oclazyload and footer directive -->
<div oc-lazy-load="['./modules/headfoot/directives/footer.js']">
<appfooter></appfooter>
</div>
<!-- LOAD FILES -->
<!-- angular -->
<script src="./angular/angular.min.js"></script>
<!-- ocLazyLoad -->
<script src="./oclazyload/dist/ocLazyLoad.min.js"></script>
<!-- ui-router -->
<script src="./angular-ui-router/release/angular-ui-router.min.js"></script>
<!-- app routes -->
<script src="./modules/routes.js"></script>
</body>
</html>
But it always load the last directive.
So if i delete footer it will load the header directive.
If i delete header, it will load footer...
A hint? thank you!
Related
I'm getting the error shown below from jquery when I try to used from a web page in a nested directory. How do I prevent this error.
This is what the directory structure looks like. (Using <script src="/fhir-to-omop/site_libs/jquery-1.11.3/jquery.min.js"></script> from the circled index page works)
I've tried referencing jquery using each of these from the circled StartHere.html page:
<script src="../../../../site_libs/jquery-1.11.3/jquery.min.js"></script>
OR
<script src="/fhir-to-omop/site_libs/jquery-1.11.3/jquery.min.js"></script>
This is the error I'm getting
jquery.min.js:5 GET https://nachc-cad.github.io/fhir-to-omop/pages/navbar/getting-started/start-here/site_libs/jquery-1.11.3/jquery.min.js?_=1646571234525 404
EDIT: Per the question in the comments: I am loading JQuery twice as shown below.
In the main file:
<html>
<head>
<!-- favicon link -->
<link rel="shortcut icon" type="image/x-icon" href="../../../../favicon.ico">
<!-- include lib code -->
<script src="../../../../site_libs/jquery-1.11.3/jquery.min.js"></script>
<div id="headerInclude"></div>
<script>$("#headerInclude").load("/fhir-to-omop/header.html");</script>
</head>
<body>
<div class="container-fluid main-container">
<!-- navbar -->
<div id="navbarInclude"></div>
<script>$("#navbarInclude").load("/fhir-to-omop/navbar.html");</script>
...
</div>
</body>
</html>
And then this exists at the top of the loaded navbar.html:
<!-- navbar -->
<head>
<!-- include lib code -->
<script src="site_libs/jquery-1.11.3/jquery.min.js"></script>
</head>
I did read a lot of the same questions and I did try all of them, but here is the problem. Be easy on please, I use PHP include on the index file to do it, but Plesk told me I will break the hosting server and I must use HTML index file.
I call the jQuery like this inside the head:
<!doctype html>
<html lang="en">
<!-- Head start -->
<head>
<title>Advertron ISP - Placeholder</title>
<!-- Custom stylesheets -->
<link href="https://fonts.googleapis.com/css?family=Ubuntu:400,700&display=swap" rel="stylesheet"/>
<!-- Advertron ISP CSS -->
<link rel="stylesheet" href="css/advertronisp.css"/>
<!-- Custom font kit -->
<script src="https://kit.fontawesome.com/f6b2049012.js" crossorigin="anonymous"></script>
<!-- jQuery for replacing content on main html page -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(function() {
$("#header").load("templates/header-top.html");
$("#main").load("main.html");
$("#footer").load("footer.html");
});
</script>
</head>
<!--/ Head ends -->
<body>
<!-- Body start here -->
<div class="grid-container">
<!-- Header start here -->
<div id="header"></div>
<!--/ Header ends -->
<!-- Main content -->
<div id="main"></div>
<!--/ Main content ends -->
<!-- Footer start here -->
<div id="footer"></div>
<!--/ Footer ends -->
</div>
<!--/ Body ends-->
</body>
</html>
This work and then only load the header-top.html file, but the moment I insert (templates/) where I call from the folder before (main.html) or (footer.html)
Then it doesn't load and stop by searching kit.fontawesomesome.
I'm using my localhost as testing server and I'm on Linux and Apache server is running.
Then, I also like to replaceWith() when someone clicks on a link or tab inside the main.html file an element div on the main.html must be replaced with other content.
I read that I can use XML or ajax or jQuery to do it, but all my trying to do it just doesn't work. After I can solve the first issue then maybe that will solve the second issue too.
Blessings
Christo
I found a solution in https://www.w3schools.com/howto/howto_html_include.asp to address the problem to load header, main, and footer HTML files from folder to index HTML file.
It's much faster and it works. So if anyone else looking to do it, use the solution in W3Schools.
Blessings
Christo
I am trying to implement LoadingBar.js on my website.
I tested a JSFiddle that works fine : https://jsfiddle.net/sg2uz3jx/
<link rel="stylesheet" type="text/css" href="https://loadingio.github.io/loading-bar/dist/loading-bar.css" />
<script src="https://loadingio.github.io/loading-bar/dist/loading-bar.js"></script>
<div class="ldBar" data-value="70" style="width:200px;height:100px" data-stroke="yellow" data-preset="line"></div>
But when I copy/paste it inside my website it just makes an empty space and does not show anything.
Here is an example of what it does in my website with source code highlight:
Do you have an idea why it would do that ?
Your snippet works on Vivaldi (which it looks like you're using) and Chrome fine. Without the rest of the code for your page it's hard to say why it isn't showing for you. Try temporarily removing any other scripts one by one that might be interfering with loading-bar.js and work back from there. Or post the full page code for further analysis.....
From what I can see in the image you included in the question, you are including the next plugin library code:
<link rel="stylesheet" type="text/css" href="https://loadingio.github.io/loading-bar/dist/loading-bar.css"/>
<script src="https://loadingio.github.io/loading-bar/dist/loading-bar.js"></script>
Inside the html markup structure where you want to create a progress bar, i.e, you are doing something like this (if we assume you create more than one progress bar):
<html>
<head>
<!-- Here are your head stylesheets and meta-tags -->
</head>
<body>
<!-- some code... -->
<!-- some code... -->
<!-- some code... -->
<div>
<h3>Apparence du compteur</h3>
<br>
<!-- Starts the wrong including of the plugin library -->
<link rel="stylesheet" type="text/css" href="https://loadingio.github.io/loading-bar/dist/loading-bar.css"/>
<script src="https://loadingio.github.io/loading-bar/dist/loading-bar.js"></script>
<!-- Ends the wrong including of the plugin library -->
<div class="ldBar" data-value="70" style="width:200px;height:100px;" data-stroke="yellow" data-preset="line"></div>
<div class="row">...</div>
</div>
<!-- some code... -->
<!-- some code... -->
<!-- some code... -->
<div>
<h3>Apparence du compteur 2</h3>
<br>
<!-- Starts the wrong including of the plugin library -->
<link rel="stylesheet" type="text/css" href="https://loadingio.github.io/loading-bar/dist/loading-bar.css"/>
<script src="https://loadingio.github.io/loading-bar/dist/loading-bar.js"></script>
<!-- Ends the wrong including of the plugin library -->
<div class="ldBar" data-value="50" style="width:200px;height:100px;" data-stroke="yellow" data-preset="line"></div>
<div class="row">...</div>
</div>
<!-- some code... -->
<!-- some code... -->
<!-- some code... -->
</body>
</html>
So, instead of the previous wrong (and maybe multiple including) of the plugin library, you have to put the plugin styleshet on the head tag (Discussion about this) and the plugin javascript file only one time on the body tag. Like on the next example:
<html>
<head>
<!-- Here are your head stylesheets and meta-tags -->
<!-- Include stylesheet of loading-bar plugin -->
<link rel="stylesheet" type="text/css" href="https://loadingio.github.io/loading-bar/dist/loading-bar.css"/>
</head>
<body>
<!-- Include Javascript needed for loading-bar plugin -->
<script src="https://loadingio.github.io/loading-bar/dist/loading-bar.js"></script>
<!-- some code... -->
<!-- some code... -->
<!-- some code... -->
<div>
<h3>Apparence du compteur</h3>
<br>
<div class="ldBar" data-value="70" style="width:200px;height:100px;" data-stroke="yellow" data-preset="line"></div>
<div class="row">...</div>
</div>
<!-- some code... -->
<!-- some code... -->
<!-- some code... -->
<div>
<h3>Apparence du compteur 2</h3>
<br>
<div class="ldBar" data-value="50" style="width:200px;height:100px;" data-stroke="yellow" data-preset="line"></div>
<div class="row">...</div>
</div>
<!-- some code... -->
<!-- some code... -->
<!-- some code... -->
</body>
</html>
If after this, the error persist, then check the developer console in search of some errors and update your question with a more precise explanation.
the following is my app.html - template where i will be injecting my other partial views as to come,
<html ng-app="billApp">
<head>
<!-- SCROLLS -->
<!-- load bootstrap and fontawesome via CDN -->
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" />
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.0.0/css/font-awesome.css" />
<!-- SPELLS -->
<!-- load angular via CDN -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular-route.js"></script>
<script src="script.js"></script>
</head>
<!-- define angular controller -->
<body ng-controller="mainController">
...
<!-- MAIN CONTENT AND INJECTED VIEWS -->
<div id="main">
{{ message }}
<!-- angular templating -->
<!-- this is where content will be injected -->
</div>
</body>
</html>
And this is the script.js file which is the controller for the application,
// script.js
// create the module and name it scotchApp
var billApp = angular.module('billApp', []);
// create the controller and inject Angular's $scope
billApp.controller('mainController', function($scope) {
// create a message to display in our view
$scope.message = 'Everyone come and see!';
});
while i try to run the script.js file using my commandline
change directory to nodejs directory
type in 'node path-of-the-project-file\script.js'
which throws the following error,
var billApp = angular.module('billApp', []);
Reference error angular not defined.
I m somehow missing out on some basic detail. It would be great if someone could give me some directions here
Replace
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular-resource.min.js"></script>
line with
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular-resource.min.js"></script>
Because its not getting library which is required by ngResource.
AND
Include this line in the beggining
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular.min.js"></script>
you need to incude jquery before the angular script
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
I am new to angular js . I have two modules first2a,first22. Each modules have one controller model1 and model2.
Below is my Html code
<!DOCTYPE html>
<html >
<head>
<link rel="icon" type="image/png" href="globe/images/correct.png"/>
<link rel="stylesheet" type="text/css" href="globe/css/style.css"/>
<script type="text/javascript" src="globe/script/jquery.js"></script>
<script type="text/javascript" src="globe/script/angular.js"></script>
<script type="text/javascript" src="globe/script/mainscope1.js"></script>
<script type="text/javascript" src="globe/script/angular-route.js"></script>
<title>
Html5 All in One
</title>
</head>
<body >
<!-- MAin page -->
<div ng-app="first22" id="maincontainer" >
<div ng-controller="model1">{{message}}</div>
</div>
<!-- MAin page End-->
<!-- Interactivity page -->
<div id="Interactive_content" ng-app="firsta" >
<div ng-controller="model2">{{message}}</div>
</div>
<!-- Interactivity page End-->
</body>
</html>
mainscope1.js
var first2 = angular.module('first22', []);
first2.controller('model1',function($scope)
{
$scope.message="aaaaaaa";
})
var first2a=angular.module('firsta',[]);
first2a.controller('model2',function($scope)
{
$scope.message="aaaaaaa1";
})
Can anyone explain why firsta module is not working here. Thanks in advance
Try using angular boostrap , to happen when the document is ready:
angular.element(document).ready(function() {
angular.bootstrap(document.getElementById('maincontainer'), ['first22']);
angular.bootstrap(document.getElementById('Interactive_content'), ['firsta']);
});
Check this fiddle
You can only use ng-app once per page. Are you trying to create two separate web applications side by side on this page, or are you only trying to have two controllers within a single application?
If you really want them to be a single application (which is what you normally would want), you set ng-app so that both ng-controller directives are inside it. For example, you can set ng-app on the html-tag, the body-tag or a div that wraps it.
<!DOCTYPE html>
<html >
<head>
<link rel="icon" type="image/png" href="globe/images/correct.png"/>
<link rel="stylesheet" type="text/css" href="globe/css/style.css"/>
<script type="text/javascript" src="globe/script/jquery.js"></script>
<script type="text/javascript" src="globe/script/angular.js"></script>
<script type="text/javascript" src="globe/script/mainscope1.js"></script>
<script type="text/javascript" src="globe/script/angular-route.js"></script>
<title>
Html5 All in One
</title>
</head>
<body ng-app="myAngularApplication">
<!-- MAin page -->
<div id="maincontainer" >
<div ng-controller="model1">{{message}}</div>
</div>
<!-- MAin page End-->
<!-- Interactivity page -->
<div id="Interactive_content" >
<div ng-controller="model2">{{message}}</div>
</div>
<!-- Interactivity page End-->
</body>
</html>
And the javascript would be:
var first2 = angular.module('myAngularApplication', []);
first2.controller('model1',function($scope)
{
$scope.message="aaaaaaa";
});
first2.controller('model2',function($scope)
{
$scope.message="aaaaaaa1";
});
OR, if you want to create two fully separated applications on the same page, you need to bootstrap them manually without using ng-app. Please see this SO question for details on how to do that.
Possible duplicate of this question:
https://stackoverflow.com/a/12864137/1177295
Only one AngularJS application can be auto-bootstrapped per HTML
document. The first ngApp found in the document will be used to define
the root element to auto-bootstrap as an application. To run multiple
applications in an HTML document you must manually bootstrap them
using angular.bootstrap instead. AngularJS applications cannot be
nested within each other. --
http://docs.angularjs.org/api/ng.directive:ngApp