I have made a simple program that displays a toolbar using the AngularJS Material Design framework that works on Google Chrome and Opera,however does not work in Firefox, as in, the toolbar is not displayed,only the text inside it is.The code for the html is as follows:
<!doctype html>
<html lang="en" ng-app="toolbarTest">
<head>
<meta charset="utf-8">
<title>SideNav Test</title>
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no" />
<link rel="stylesheet" href="C:\angular\angular-phonecat\app\bower_components\angular-material\angular-material.css">
<link rel="stylesheet" href="C:\angular\angular-phonecat\app\bower_components\angular-material\themes\indigo-theme.css">
</head>
<body>
<script src="C:\angular\angular-phonecat\app\bower_components\angular\angular.js"></script>
<script src="C:\angular\angular-phonecat\app\bower_components\angular-aria\angular-aria.js"></script>
<script src="C:\angular\angular-phonecat\app\bower_components\angular-animate\angular-animate.js"></script>
<script src="C:\angular\angular-phonecat\app\bower_components\hammerjs\hammer.js"></script>
<script src="C:\angular\angular-phonecat\app\bower_components\angular-material\angular-material.js"></script>
<script >
angular.module('toolbarTest', ['ngMaterial'])
.controller('AppCtrl', function ($scope) {
});
</script>
<div ng-controller="AppCtrl">
<md-content flex class="md-padding">
<md-toolbar md-theme="indigo">
<h2 class="md-toolbar-tools">
<span>Toolbar: blue-theme</span>
</h2>
</md-toolbar>
</md-content>
</div>
</body>
</html>
When I go to console in Firefox, I get the message "ReferenceError: angular is not defined".
Thank you,any help is appreciated.
update: it wasn't working because Firefox apparently needs the syntax "file:///" before absolute paths.
Related
I'm trying to set up a simple app with angular 1.5 and ng-admin,I imported all the dependencies and done everything right but angular can't find the ng-admin module even though I have imported it
this is my html :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Gestionale Clienti</title>
<link rel="icon" type="image/png" href="">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.min.js"></script>
<script src-="utilities/ng-admin.min.js"></script>
<link rel="stylesheet" href="utilities/ng-admin.min.css">
<link rel="stylesheet" href="styles/css_compiled/base.css" />
</head>
<body ng-app="gestionale">
<div ui-view></div>
<script src="bundle.min.js"></script>
</body>
</html>
this is my javascript:
'use strict';
angular.module('gestionale',['ng-admin']);
and the error I get is : Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.5.0/$injector/modulerr?p0=gestionale&p1=Errorogleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.5.0%2Fangular.min.js%3A20%3A449)
thanks in advance,any help would be appreciated.
You have a typo
<script src-="utilities/ng-admin.min.js"></script>
should be
<script src="utilities/ng-admin.min.js"></script>
Also, ng-admin currently doesn't support Angular 1.5. Use ng-admin 0.9 it with Angular 1.3, or the master branch (future 1.0) with Angular 1.4.
I have a very basic AngularJS app, from which I am trying to resolve the below error:
Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.4.9/$injector/modulerr?p0=HelloWorld&p1=Error…ogleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.4.9%2Fangular.min.js%3A19%3A463)
All the online references I have found lead to correcting improper use of ng-app in one way or another, however I find that my code is as close as vanilla and correct as it can possibly get.
So being that this is a basic issue and I cannot seem to find the solution for it, could anyone please enlighten me as to the obvious mistake?
JavaScript
var myApp = angular.module("HelloWorld", []);
myApp.controller("mainController", function($scope){
console.log($scope);
});
HTML
<!DOCTYPE html>
<html lang="en-us" ng-app="HelloWorld">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<title>Hello World with AngularJS!</title>
</head>
<body>
<div ng-controller="mainController">
Hello world!
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.min.js"></script>
</body>
</html>
If you are trying to make this example in plunkr for example, don't forget to reference your script file, script.js.
Check here.
I added <script src="script.js"></script>. Without it I get the exact error you describe. Basically Angular can't find a corresponding module declaration for the ng-app="HelloWorld" application.
So don't forget to include your actual application JS, containing the angular.module part.
You get this error since you are using ng features before importing Angular and you are not importing the file where you initialize your app module.
Do as shown below:
HTML:
<!DOCTYPE html>
<html lang="en-us" ng-app="HelloWorld">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.min.js">
</script>
<script type="text/javascript" src="app.js"></script>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<title>Hello World with AngularJS!</title>
</head>
<body>
<div ng-controller="mainController">
Hello world!
</div>
</body>
</html>
App.js:
var myApp = angular.module("HelloWorld", []);
myApp.controller("mainController", function($scope){
console.log($scope);
});
I hope I've been helpful.
I am using the zurb foundation and all is working well except for data-alert. I am unable to close data-alert with the X. In other posts, people say to add the $(document.foundation(); again after the data-alert div. I have tried it with and without the second initialization. Here is the code.
<!DOCTYPE HTML>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<link rel="stylesheet" href="/css/foundation.min.css">
<script src="/js/vendor/jquery.js"></script>
<script src="/js/foundation.min.js"></script>
<script>
$(document).foundation();
</script>
</head>
<body>
<div data-alert class="alert-box alert radius hide-for-print">You can't close this!!!×</div>
<script>
$(document).foundation();
</script>
</body>
</html>
I would appreciate any help I can get on this.. Thanks.
The data-alert was not closing because modernizr wasn't included in your project.
DEMO
Mostly this kind of errors you can solve by checking the console.
In console, It was showing the following error:
ReferenceError: Can't find variable: Modernizr
Because foundation.min.js required modernizr to work
When I use the standard technique ons-navigation, the javascript code on the ons-page does not execute. Does anyone know what I do wrong?
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user- scalable=no">
<script src="components/loader.js"></script>
<link rel="stylesheet" href="components/loader.css">
<link rel="stylesheet" href="css/style.css">
<script>
ons.bootstrap();
ons.disableAutoStatusBarFill(); // (Monaca enables StatusBar plugin by default)
</script>
</head>
<body>
<ons-navigator var="myNavigator" page="login.html">
</ons-navigator>
</body>
</html>
And here is the login.html:
<ons-page>
<script>
console.log("test11");
</script>
</ons-page>
The reason why it's not working is that the browser won't execute script tags that are added through replacing el.innerHTML, which is what Onsen does when you push a page.
Please see this question for why it's not working:
Can scripts be inserted with innerHTML?
You shouldn't use inline script tags mixed in your HTML. Please look up how to structure you're JavaScript.
I'm developing a mobile application with Phonegap and AngularJS, and the application is working fine so far in desktop browser. Although, when I build it into an APK, some of the code of the application doesn't work.
First of all, I've seen this topic Phonegap - app works on desktop, not on mobile and the issue continues.
index.html
<!DOCTYPE html>
<html ng-app="home">
<head>
<meta charset="utf-8" />
<title>My new Application</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="viewport" content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimal-ui" />
<link rel="shortcut icon" href="/favicon.png" type="image/x-icon" />
<link rel="stylesheet" href="public/css/angular/mobile-angular-ui-hover.min.css" />
<link rel="stylesheet" href="public/css/angular/mobile-angular-ui-base.min.css" />
<link rel="stylesheet" href="public/css/angular/mobile-angular-ui-desktop.min.css" />
<link rel="stylesheet" href="public/css/global.css" />
</head>
<body>
<div class="app">
<div ng-include="'application/views/header.html'" style="margin-bottom: 51px"></div>
<div ng-view="">
</div>
<div ng-include="'application/views/footer.html'"></div>
</div>
<script srC="cordova.js"></script>
<script type="text/javascript" src="public/js/angular/angular.min.js"></script>
<script type="text/javascript" src="public/js/angular/angular-route.min.js"></script>
<script type="text/javascript" src="application/controllers/home.js"></script>
</body>
</html>
home.js
var app = angular.module('home', [
'ngRoute'
]);
app.config(function($routeProvider) {
$routeProvider
.when('/', {
templateUrl : '/application/views/home/home.html',
controller : 'home_controller'
})
});
app.controller('home_controller', ['$scope', '$location', function($scope, $location){
console.log('im here..');
alert('im here..!!');
}]);
I tried to "debug" by setting console.log and alert messages, but none of them shows up.
For debug, I'm using http://debug.build.phonegap.com/ weinre.
Conclusion: my application shows up normally, it loads the header.html and the footer.html, but not the home.html (nor shows up messages).
I also tried to set up the controller in the body ng-controller="home_controller" but the route configuration should do the same.