Hi guys can you help me I'm just starting to learn angularjs. How to deal with these errors
app.js:6 > Uncaught ReferenceError: angular is not defined
angular.min.js:6 > Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.2.20/$injector/modulerr?p0=ajs&p1=Error%3A%20…%2F%2FC%3A%2FUsers%2FABK3%2FDesktop%2Fajs%2Fjs%2Fangular.min.js%3A18%3A139)
Thanks in advance guys
var app = angular.module('ajs', ['ui.router'])
<!DOCTYPE html>
<html ng-app="ajs">
<head>
<meta charset="utf-8">
<title>AJS</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<body>
<h1 ui-view>Hi</h1>
</body>
<script src="app.js"></script>
<script src="js/angular.min.js"></script>
<script src="js/angular-ui-router.min.js"></script>
<script src="jquery/jquery.min.js"></script>
</html>
Make sure your scripts are loaded after angular so they can actually do something. The load order is important, for instance make sure to load jQuery before anything, almost all the libraries requires them to be previously loaded.
<!-- Load vendors -->
<script src="jquery/jquery.min.js"></script>
<script src="js/angular.min.js"></script>
<script src="js/angular-ui-router.min.js"></script>
<!-- Load source code -->
<script src="app.js"></script>
You must put all of your script tags that calls angular BEFORE your app.js because your app.js needs angular.
Because here your file loads app.js then angular
Related
I've been trying to add Bootstrap <link> and <script> tags to my HTML in an Angular project. I get all the CDN from here but I get the following error
Uncaught TypeError: Cannot read property 'fn' of undefined
at bootstrap.min.js:6
What am I doing wrong? Here is my index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>App</title>
<base href="./">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
<link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
<app-root></app-root>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js" integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous"></script>
</body>
</html>
Update: I included the electron tag to this question since this is an Angular project running with Electron framework, thinking now it could be part of the problem.
I notice
integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"
which to me isn't supposed to be there. this is maybe what's causing the issue.
ALSO
Why don't you add bootstrap locally instead? it has a lot of advantages and is how the majority of us do it.
in your Powershell or CMD or your IDE (coding program)'s console type either :
(for Bootstrap 4 (in beta)):
npm install bootstrap#next --save
OR
(for Bootstrap 3)
npm install bootstrap --save
Configure .angular-cli.json:
"styles": [
"../node_modules/bootstrap/dist/css/bootstrap.min.css",
"styles.scss"
]
configure src/style.css or src/style.scss:
#import '~bootstrap/dist/css/bootstrap.min.css';
or you could use ngx-bootsrap wich is an angular wrapper for bootstrap.
there's ups and downs to that. ngx-bootstrap is missing many components overall and doesn't have the latest and greatest in bootstrap but at least it's tailored for use in angular.
sources :
https://loiane.com/2017/08/how-to-add-bootstrap-to-an-angular-cli-project/
How to add bootstrap to an angular-cli project
It might have to do with this:
link
Try to include only the minified version (not the slim.min):
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Bootstrap relies on jQuery. In your index HTML, before you include any of the Javascript imports, you'll want to do something like this:
<script>
var $ = jQuery = require("jquery")
</script>
I'm trying to run a Angular2 app from WAMP on my local pc.
I develop the app from the wamp/www folder and test it at different stages both from localhost:3000 and localhost/myapp (liteserver and wamp)
All works fine until i try to add <base href="/"> to Index.html right below the <head>.
At that point, only in Wamp i get the error: ReferenceError: System is not defined
Is there any workaround or fix to get past this error? (and move to the next one :) )
This is my Index.html.
<html>
<head>
<base href="/">
<title>Firebase</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="assets/css/bootstrap.min.css">
<script src="node_modules/core-js/client/shim.min.js"></script>
<script src="node_modules/zone.js/dist/zone.js"></script>
<script src="node_modules/reflect-metadata/Reflect.js"></script>
<script src="node_modules/systemjs/dist/system.src.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<!-- 2. Configure SystemJS -->
<script src="systemjs.config.js"></script>
<script>
System.import('app').catch(function(err){ console.error(err); });
</script>
</head>
<!-- 3. Display the application -->
<body>
<my-app>Loading...</my-app>
</body>
</html>
Update:
LiteServer working, Folder Structure, and main.ts:
WAMP, Index.html
I was just reading about the new angular2 router and i thought to try this:
<base href=".">
and it just works with no further errors!!
I can't tell why, but both wamp and liteserver work fine now, even though in all tutorials about router they all show this method: <base href="/">. I hope this will help someone else to waste less time on this silly thing then i did.
I have already an exsisting html file which use another librairies and stuff, I want to use in my new ionic application.
So I would like to use it as an ion-view. so I would like to know if it would be possible to include an html file in the ion-view ? which look like :
<ion-view>
<io-content>
</ion-view>
</ion-content>
this is the existing HMTL file where I use different libraries and css file :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="./assets/js/jquery.mobile-1.4.5.min.css" rel="stylesheet" type="text/css" />
<link href="./assets/css/ofc.css" rel="stylesheet" type="text/css" />
<script src="./assets/js/jquery-1.7.1.min.js"></script>
<script src="./assets/js/jquery.mobile-1.4.5.min.js"></script>
<script type="text/javascript" src="pouchdb-3.4.0.min.js"> </script>
<script type="text/javascript" src="blob-util.min.js"> </script>
<script type="text/javascript" src="moment.js"> </script>
<script src="properties.js"> </script>
</head>
<body>
<div data-role="page" id="p1">
</div>
<script src="core.js"></script>
</body>
</html>
Why would you do this? I believe this question comes from a problem you haven't described yet.
Normally all libraries used in an Ionic app are included in the index.html and not within each <ion-view> or <ion-content>. In these Ionic directives you only load the HTML needed for that view.
I suggest you start reading from the beginning:
Getting Started with Ionic
Ionic documentation
CodePen examples Ionic
Good day to all,
I'm using foundation 5 for my mini project. I want to use the reveal/modal feature of the framework. But it seems it does not work.
index.html
<!DOCTYPE html>
<html>
<head>
<title>Job Posting</title>
<link rel="stylesheet" type="text/css" href="../css/normalize.css">
<link rel="stylesheet" type="text/css" href="../css/foundation.min.css">
<script type="text/javascript" src="../js/vendor/custom.modernizr.js"></script>
</head>
<body>
click
<div class="reveal-modal" id="myNormal">
Modal
<a class="close-reveal-modal">x</a>
</div>
<script src="../js/vendor/jquery.js"></script>
<script src="../js/foundation/foundation.js"></script>
<script src="../js/foundation/foundation.reveal.js"></script>
<script>
$(document).foundation();
</script>
</body>
I'm pretty sure that the browser loaded the js as it does not show any error in the debugger. And I know it's somewhere in the code that I left out but it's been a couple of hours since I ran into this. Any help would be much appreciated.
You might have forgot data-reveal :
<div class="reveal-modal" id="myNormal" data-reveal>
<head>
<title>Mary</title>
<link href="http://localhost/stylesheet.css" type="text/css" rel="stylesheet">
<link href="http://localhost/mary/jquery-ui-1.10.3.custom.min.css" type="text/css" rel="stylesheet">
<script type="text/javascript" src='http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js'></script>
<script type="text/javascript" src="http://localhost/jscript.js"></script>
<script type="text/javascript" src="http://localhost/jquery-ui-1.10.3.custom.min.js"/>
</head>
I just got done learning about jquery ui and am trying to include it in my very first webpage, but it's not working. I checked all of the links on my server, and they link up to the documentation, but the only way the content shows up when I check the webpage on my server is if I comment out the last script tag. But if I do that, I can't access the jquery ui, right? I'm so confused. I'm so excited to try all of this stuff out, but I can't figure out how to make it work :( Any help is greatly appreciated.
karthikr's answer is most likely the problem, but if that doesn't work try referencing the URL hosted by jquery itself.
<script type="text/javascript" src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
Assuming all the static files are properly referenced,
<script type="text/javascript" src="http://localhost/jquery-ui-1.10.3.custom.min.js"/>
should be
<script type="text/javascript" src="http://localhost/jquery-ui-1.10.3.custom.min.js"></script>
Note the end of the script tag /> should be ></script>