AngularJS error while using ngAudio - javascript

I am trying to play audio using AngualarJs
My HTML CODE:
<!doctype HTML>
<html>
<head>
</head>
<body ng-app="test" ng-controller="audioTest">
<button ng-click="playSound()"></button>
<script src="javascripts/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"> </script>
<script src="javascripts/angular.audio.js"></script>
<script src="app.js"></script>
</body>
</html>
My app.js Code:
var app = angular.module("test",['ngAudio']);
var audio = app.controller("audioTest",function($scope,ngAudio){
$scope.playSound = function(){
$scope.audio = ngAudio.load("abc.wav");
$scope.audio.play();
}
});
While i load page i got error in console which lead me to
Error Details

The error you're reporting is due to an error resolving angular.audio.js script that can't be found by the name javascripts/angular.audio.js
I made a working fiddle: http://jsfiddle.net/en8x1nny/
This fiddle imports the script that the original demo from ngAudio is using.
The full path for that script is: http://danielstern.github.io/ngAudio/angular.audio.js.
You can download it and add it to your javascripts directory. Be sure not to use it by the URL mentioned above because github is not a CDN intended to serve scripts.
If you previously installed ngAudio by bower, the script should be in:
your_project_path/bower_components/angular-audio/app/angular.audio.js

Related

PWA Simple Demo - Error when add pwabuilder-sw-register.js

Hello,
I'm trying to create a simple PWA demo by following the steps of this article: "https://learn.microsoft.com/en-us/microsoft-edge/progressive-web-apps-chromium/get-started"
However when I reach the step to download and add the files: "pwabuilder-sw.js" and "pwabuilder-sw-register.js" to root and then add <script src="/pwabuilder-sw-register.js"></script> to the head of index.html I got error on Edge browser: "SCRIPT1086: SCRIPT1086: Module import or export statement unexpected here" I search around and I find that I have to add type="module" like this <script src="/pwabuilder-sw-register.js" type="module"></script> but now I'm getting another error: "0: Unable to get property 'define' of undefined or null reference" in
pwaupdate (175,5829)
My page code looks like:
Index.html
<html>
<head>
<title>Express</title>
<link rel="stylesheet" href="/stylesheets/style.css">
<link rel="manifest" href="/manifest.json">
<script src="/pwabuilder-sw-register.js" type="module"></script>
</head>
<body>
<h1>Express 2</h1>
<p>Welcome to Express</p>
</body>
</html>
pwabuilder-sw.js
// This is the service worker with the Cache-first network
const CACHE = "pwabuilder-precache";
importScripts('https://storage.googleapis.com/workbox-cdn/releases/5.0.0/workbox-sw.js');
self.addEventListener("message", (event) => {
if (event.data && event.data.type === "SKIP_WAITING") {
self.skipWaiting();
}
});
workbox.routing.registerRoute(
new RegExp('/*'),
new workbox.strategies.CacheFirst({
cacheName: CACHE
})
);
pwabuilder-sw-register.js
// This is the service worker with the Cache-first network
// Add this below content to your HTML page inside a <script type="module"></script> tag, or add the js file to your page at the very top to register service worker
import 'https://cdn.jsdelivr.net/npm/#pwabuilder/pwaupdate';
const el = document.createElement('pwa-update');
document.body.appendChild(el);
I searched a lot but I did not find any clue.
Please advise.
There are only 2 things you need to make this work:
Add pwabuilder-sw.js and pwabuilder-sw-register.js to your site root.
Add the following script tag to your <head>
<script type="module" src="pwabuilder-sw-register.js"></script>
Here's a quick sample that shows this working.
It looks like the MSDN article missed the "module" script type. My fault! I've updated the MSDN article to include this fix.
You normally don't need any more this script reference <script src="/pwabuilder-sw-register.js" type="module"></script>
The script will be loaded by the pwaupdate component. So simply add this code inside a block at the end of your HTML page:
import 'https://cdn.jsdelivr.net/npm/#pwabuilder/pwaupdate';
const el = document.createElement('pwa-update');
document.body.appendChild(el);
If it still doesn't work, please open an issue on our Github repo or ask to Justin who's in charge of this part on Twitter: https://twitter.com/Justinwillis96
Thanks!
David

Loading SystemJS in html ends up with error in PhantomJS

I'm using PhantomJS to setup CI for jasmine tests. I'm facing the problem with including SystemJS in my html page. I removed everything from it, just left javascript and still facing the same error:
ReferenceError: Can't find variable: System
Here is the example of html:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<script src="lib/systemjs/dist/system.src.js"> </script>
<script>
System.config({
baseURL: './lib'
});
</script>
</body>
</html>
I ran it in console like that: phantomjs test.js http://localhost:8080.
test.js contains following code:
var page = require('webpage').create();
page.open(system.args[1], function(status)
{
phantom.exit(0);
});
It looks like it doesn't see system.src.js. I tried to put there absolute path - but still the same error. Also tried with page.injectJs - no good either.
After some time I found an answer and I want to share it, maybe someone will find it useful. I logged page.outerHTML and saw that instead of script with system.src.js I've got additional script with system-polyfills.js. It looked like that:
<script src="lib/systemjs/dist/system.src.js"></script>
<script type="text/javascript" src="http://127.0.0.1:8080/lib/systemjs/dist/system-polyfills.js">
So I've just added missing system-polyfills.js to the following folder and it fixed the error. Although I still have no idea where it came from.

Require js not loading jquery

I am a newbie to require js and faced this strange problem while creating our first :
Following is the home page :index.html
<html>
<head lang="en">
<meta charset="UTF-8">
<title>My first JS app using require</title>
</head>
<body>
<strong> This is my first require js app</strong>
<span id="output"></span>
</body>
<script data-main="js/main" src="js/lib/require.js"></script>
</html>
main.js is as follows :
require(['lib/jquery','app/message'],function($,message){
$('#output').html(message);
});
message.js is as follows :
define(function(){
return "Message from message.js";
});
When i run index.html on browser, $ in main.js comes as undefined. It does not produce any other error on console. Also all files are loaded successfully(confirmed from networks tab in browser).
If i change the main.js to be as follows :
require(['jquery','app/message'],function($,message){
$('#output').html(message);
});
And accordingly place jquery.js in appropriate directory, everything works fine.
I am not able to figure out the reason here. Can anybody please help here. Thanks in advance.

What is the cause for "angular is not defined"

I'm following the video tutorials on egghead.io but while trying to follow his example when he created a factory (see video here) I keep getting "angular is not defined" Reference Error but I have included the angular script
This is my html page:
<!DOCTYPE html>
<html>
<head>
<title>Prototype</title>
<link rel="stylesheet" type="text/css" href="foundation.min.css">
<script type="text/javascript" src="main.js"></script>
</head>
<body>
<div data-ng-app="">
<div data-ng-controller="FirstController">
<input type="text" data-ng-model="data.message">
<h1>{{ data.message }}</h1>
</div>
<div data-ng-controller="SecondController">
<input type="text" data-ng-model="data.message">
<h1>{{ data.message }}</h1>
</div>
</div>
<script type="text/javascript" src="angular.min.js"></script>
</body>
</html>
and this is my javascript file "main.js":
//Services
// step 1 create an app
var myApp = angular.module('Data', []).
// tep 2 create factory
// Service name, function
myApp.factory('Data', function(){
return { message: "I'm Data from a Service" }
});
//Controllers
function FirstController($scope, Data){
$scope.data = Data;
}
function SecondController($scope){
}
I have read a few posts where similar happen (here) and please correct me if I'm wrong but I think it is to do with Boot strapping andI have tried manually bootstrapping using angular.bootstrap(document, ['Data']); but with no success, still get same error.
But What I want to know is, Why this works for so many examples online, like the egghead video series, but I have issues as I believe I have followed his video very closely. is it a change in angular in recent versions?
You have to put your script tag after the one that references Angular. Move it out of the head:
<script type="text/javascript" src="angular.min.js"></script>
<script type="text/javascript" src="main.js"></script>
The way you've set it up now, your script runs before Angular is loaded on the page.
You have not placed the script tags for angular js
you can do so by using cdn or downloading the angularjs for your project and then referencing it
after this you have to add your own java script in your case main.js
that should do
I had the same problem as deke. I forgot to include the most important script: angular.js :)
<script type="text/javascript" src="bower_components/angular/angular.min.js"></script>

Can't get JavaScript to load in Eclipse web application

I am trying to load JavaScript from an external file in an Eclipse web application.
My folder structure is as follows:
nata
....src
........main
............webapp
................scripts
....................jquery.js
....................nata.js
I invoke the web app by: "localhost:8080/nata/login"
I have tried
<script src="${pageContext.request.contextPath}/nata/login/scripts/nata.js"></script>
and
<script src="${pageContext.request.contextPath}/nata/scripts/nata.js"></script>
and
<script src="${pageContext.request.contextPath}/scripts/nata.js"></script>
but all to no avail. The Javascript will not load.
Here is my html:
<html>
<head>
<title>First Page</title>
<script src="scripts/nata.js"></script>
</head>
<body>
<h1>JavaScript Load Test</h1>
<p id="demo">This is a paragraph</p>
<button onclick="displayDate()" type="button">Display Date</button>
</body>
</html>
Here is nata.js:
function displayDate() { document.getElementById("demo").innerHTML=Date(); }
When I put the HTML in a windows file (and use the following line)
<script src="nata.js"></script>
in folder X and put nata.js in the same folder X, the JavaScript works perfectly.
I have tried all of the lines below:
<script src="/scripts/nata.js"></script>
<script src="scripts/nata.js"></script>
<script src="nata/login/nata.js"></script>
<script src="/nata/login/nata.js"></script>
<script src="/nata/nata.js"></script>
<script src="nata/nata.js"></script>
and probably several more combinations.
I get the error message "displayDate() is undefined"
Sometimes I get the error message "Syntax error" on line 1 of nata.js. However, as I mentioned above, when I put the same HTML and the same nata.js side by side in a windows folder and open the HTML file with a browser and click the button, the JavaScript works perfectly. I just can't get it to load the JavaScript inside an Eclipse web app.

Categories

Resources