I am just new to angularjs. I am trying to test simple controller in my index.html. But when i am running it on my localhost i am getting an error :
Failed to load resource: the server responded with a status of 404 (Not Found).
Here is my folder structure:
angulartesting
-bower_components
-index.html
-script.js
Here is my index.html file:
<!-- index.html -->
<!DOCTYPE html>
<html ng-app="store">
<head>
<!-- SCROLLS -->
<!-- load bootstrap and fontawesome via CDN -->
<link href="bower_components/bootstrap/dist/css/bootstrap.min.css" rel='stylesheet' type='text/css' />
<!-- SPELLS -->
<!-- load angular and angular route via CDN -->
<script src="/bower_components/angular/angular.min.js"></script>
<script src="/bower_components/angular-route/angular-route.js"></script>
<script src="script.js"></script>
</head>
<body >
<div ng-controller="StoreController as store">
<h1>{{store.product.name}}</h1>
<h2>${{store.product.price}}</h2>
</div>
<script src="bower_components/bootstrap/js/bootstrap.min.js"></script>
</body>
</html>
Here is my script.js:
// create the module and name it scotchApp
// also include ngRoute for all our routing needs
(function(){
var app = angular.module('store', []);
app.controller('StoreController',function(){
this.product=gem;
});
var gem = {
name:'Gaurav',
price:'220'
}
})();
Can anybody tell me what I am doing wrong?
I am running it on my local server.
Try this. I've just removed forward slashes before script sources and added ng-app attribute.
<!-- index.html -->
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<!-- SCROLLS -->
<!-- load bootstrap and fontawesome via CDN -->
<link href="bower_components/bootstrap/dist/css/bootstrap.min.css" rel='stylesheet' type='text/css' />
<!-- SPELLS -->
<!-- **Removed forward slashes before script sources** -->
<script src="bower_components/angular/angular.min.js"></script>
<script src="bower_components/angular-route/angular-route.js"></script>
<script src="script.js"></script>
</head>
<body>
<div ng-controller="StoreController as store">
<h1>{{store.product.name}}</h1>
<h2>${{store.product.price}}</h2>
</div>
<script src="bower_components/bootstrap/js/bootstrap.min.js"></script>
</body>
</html>
Hope it helps
Related
I am trying to use a js file in my html file but got stuck.
The html file links to my js file but the js still wont work.
my code (in the snippet it seems to be working but in my file it wont):
document.body.innerHTML = "<h1>Today's date is </h1>"
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, width=device-width">
<!-- jquery -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<!-- CSS only -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We" crossorigin="anonymous">
<!-- JavaScript Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-U1DAWAznBHeqEIlVSCgzq+c9gqGAJn5c/t99JyeKa9xxaYpSvHU5awsuZVVFIhvj" crossorigin="anonymous"></script>
<!-- logo -->
<link href="/static/logo2.ico" rel="icon">
<!-- css file -->
<link href="/static/styles.css" rel="stylesheet">
<!-- hammer.js -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/hammer.js/2.0.8/hammer.js"></script>
<!-- touchswipe.js -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.touchswipe/1.6.19/jquery.touchSwipe.min.js"></script>
<!-- js file -->
<script type = "text/javascript" src="../../static/js/reserve.js"></script>
<title>Reservify</title>
</head>
<body>
</body>
Your javascript is executed before the DOM document is loaded.
Run JavaScript after loading the DOM document.
Like this:
window.addEventListener('DOMContentLoaded', function(){
document.body.innerHTML = "<h1>Today's date is </h1>";
});
Or like this:
window.onload = function() {
document.body.innerHTML = "<h1>Today's date is </h1>";
}
Best Practice
The best practice is to implement your scripts at the end of the body tag.
The browser will load the visible page first and it is a better user experience.
Code Example
<head>
<title>Reservify</title>
</head>
<body>
<!-- js file -->
<script type = "text/javascript" src="../../static/js/reserve.js"></script>
</body>
Also read
Why script tags should be placed at the end of body tag
You have to put the js call on the body, this because the DOM load first this element when is loading the page this make the load of the page faster
<script type = "text/javascript" src="../../static/js/reserve.js"></script>
So you have to put the above line on the end of the body, and your code will be like this:
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, width=device-width">
<!-- jquery -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<!-- CSS only -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We" crossorigin="anonymous">
<!-- JavaScript Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-U1DAWAznBHeqEIlVSCgzq+c9gqGAJn5c/t99JyeKa9xxaYpSvHU5awsuZVVFIhvj" crossorigin="anonymous"></script>
<!-- logo -->
<link href="/static/logo2.ico" rel="icon">
<!-- css file -->
<link href="/static/styles.css" rel="stylesheet">
<!-- YOU HAVE TO DELETED THE JS CALLS HERE -->
<title>Reservify</title>
</head>
<body>
<!-- Here is your code -->
<!-- In the end of the body you put your js calls -->
<!-- hammer.js -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/hammer.js/2.0.8/hammer.js"></script>
<!-- touchswipe.js -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.touchswipe/1.6.19/jquery.touchSwipe.min.js"></script>
<!-- js file -->
<script type = "text/javascript" src="../../static/js/reserve.js"></script>
</body>
I hope I've helped you (;
I created a new Blazor WebAssebly project in VS19 and wanted to add a website template to my project, I downloaded it but was wondering where I should put the JavaScript files it came with.
I currently have them here in my index.html file in wwwroot folder:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title>ImmoPlatform.SPA</title>
<base href="/" />
<link href="css/bootstrap/bootstrap.min.css" rel="stylesheet" />
<link href="css/app.css" rel="stylesheet" />
<link href="ImmoPlatform.SPA.styles.css" rel="stylesheet" />
<link href="manifest.json" rel="manifest" />
<link rel="apple-touch-icon" sizes="512x512" href="icon-512.png" />
</head>
<body>
<div id="app">Loading...</div>
<div id="blazor-error-ui">
An unhandled error has occurred.
Reload
<a class="dismiss">🗙</a>
</div>
<!-- jQuery library -->
<!--<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> -->
<script src="js/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.js"></script>
<!-- slick slider -->
<script type="text/javascript" src="js/slick.js"></script>
<!-- Price picker slider -->
<script type="text/javascript" src="js/nouislider.js"></script>
<!-- mixit slider -->
<script type="text/javascript" src="js/jquery.mixitup.js"></script>
<!-- Add fancyBox -->
<script type="text/javascript" src="js/jquery.fancybox.pack.js"></script>
<!-- Custom js -->
<script src="js/custom.js"></script>
<script src="_framework/blazor.webassembly.js"></script>
<script>navigator.serviceWorker.register('service-worker.js');</script>
</body>
</html>
but when I start my blazor project the javascript doesent seem to load. the CSS I put in the mainlayout.razor file in the Shared folder works file and that CSS came with the template.
Is this the correct place to put them? or should I put them somewhere else?
I ran into the same problem as you. The J/S files must point to the index.html; however, Blazor does not load them automatically – it must use the J/S interoperability, which is complex, and much more so if you do not know the functions that the template has.
At home, I wanted to use Admin LTE, luckily I found a project on GitHub, where they are making a version of this template for Blazor.
https://github.com/sjefvanleeuwen/blazor-adminlte
Hopefully the Blazor team will change this type of operation, since, in my view, it is a setback in the way of doing frontEnd.
I was trying to host an existed project on Firebase which already have a css and js file. But it didn't seem to include my css and js files into the website.
I followed all of these steps:
https://www.youtube.com/watch?v=meofoNuK3vo&index=21&list=PLl-K7zZEsYLmnJ_FpMOZgyg6XcIGBu2OX
The project directory now looks like this:
\public (folder) (containing: index.html 404.html)
\css (folder) (containing: style.css)
\js (folder) (containing: index.js)
firebase.json
.firebaserc
Here is the website: https://together-cb.firebaseapp.com/
The index file looks like:
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="../css/style.css">
<!-- update the version number as needed -->
<script defer src="/__/firebase/4.8.0/firebase-app.js"></script>
<!-- include only the Firebase features as you need -->
<script defer src="/__/firebase/4.8.0/firebase-auth.js"></script>
<script defer src="/__/firebase/4.8.0/firebase-database.js"></script>
<script defer src="/__/firebase/4.8.0/firebase-messaging.js"></script>
<script defer src="/__/firebase/4.8.0/firebase-storage.js"></script>
<!-- initialize the SDK after all desired features are loaded -->
<script defer src="/__/firebase/init.js"></script>
<script src="/__/firebase/4.8.0/firebase.js"></script>
<script src="../js/index.js"></script>
</head>
<body>
<div class="main-view">
....
</div>
</body>
</html>
I had the same issue but I added this line below my body tag and it solved.
<script src="/__/firebase/6.1.1/firebase-firestore.js"></script>
also, you can see the instruction here
https://firebase.google.com/docs/web/setup
Make soure that all your assets(css,js,img) and html are in /public
I’m developing a web application using AngularJS. I have a little problem. The view (html) can’t find the controller (js). So, I think this is caused by the routing in my app.js. The link to all the code can be found below. The pages are not loading well on plunker. So, I attached the images to this post.
Also, the code posted below is the index.html. http://plnkr.co/edit/CIQSZ0pow1Z9Pfsre1xO?p=preview
<!DOCTYPE html>
<html ng-app="app">
<head>
<meta charset="utf-8" />
<title>Login</title>
<link href="app-content/app.css" rel="stylesheet" />
<!--<link href="css/generation-dialog.css" rel="stylesheet" />
<link href="css/image-collection-generation.css" rel="stylesheet" />
<link href="css/image-header.css" rel="stylesheet" />
<link href="css/mix-collections.css" rel="stylesheet" />-->
<link href="css/sidebar.css" rel="stylesheet" />
<link href="css/view-collections.css" rel="stylesheet" />
<link href="css/view-selected-collection.css" rel="stylesheet" />
</head>
<body>
<div class="jumbotron">
<div class="container">
<div class="col-sm-8 col-sm-offset-2">
<div ng-view>
</div>
</div>
</div>
</div>
<!-- <script src="//code.jquery.com/jquery-2.0.3.min.js">
</script>-->
<script src="//code.angularjs.org/1.2.20/angular.js">
</script>
<script src="//code.angularjs.org/1.2.20/angular-route.js">
</script>
<script src="//code.angularjs.org/1.2.13/angular-cookies.js">
</script>
<script src="app.js">
</script>
<script src="app-services/authentication.service.js">
</script>
<script src="app-services/flash.service.js">
</script>
<!-- Real user service that uses an api -->
<!-- <script src="app-services/user.service.js">
</script> -->
<!-- Fake user service for demo that uses local storage -->
<script src="app-services/user.service.local-storage.js">
</script>
<script src="home.controller.js">
</script>
<script src="login.controller.js">
</script>
<script src="register.controller.js">
</script>
<!-- <script src="select/select.controller.js">
</script>-->
</body>
</html>
This is the error:
Error: [ng:areq] Argument 'MainCtrl' is not a function, got HomeController
angular.js:9997
So to sum it up, when the app routes to the select page, the angular controller is not recognized by the select page and I cannot add any functionalities. It is important to mention that the select page does work (and so does the controller) as a stand-alone page, but once I link the login page through ngRoute, the problem occurs.
I am just learning angular.js here is my first 'hello world' script. I am trying to use ng-include to include a navbar from local file /templates/nav.html. I am following a tutorial and cant figure out why its not working.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Hello World</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
<link href="css/styles.css" rel="stylesheet" type="text/css" />
</head>
<body ng-app="app">
<header ng-include src="'templates/nav.html'">
</header>
<div ui-view></div>
<section>
</section>
<footer>
</footer>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.15/angular-ui-router.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="js/app.js"></script>
</body>
this is my js/app.js file:
angular
.module('app', [
'ui.router'
]);
templates/nav.html is simply the default bootstrap navbar. what am i doing wrong?
You need to include your js/app.js file as a script - right now there's no angular app being instantiated.
Add this as the last script to be included:
<script src="js/app.js"></script>
It should be:
<div ng-include="'templates/nav.html'"></div>
And put the header tag inside your nav.html.