I just started learning angularJS using phonegap and I have a simple HTML code and a few lines of angularjs code. Everything works fine in the browser but only the HTML code works in the phonegap when I try to run it on my Android phone. Why?
<!DOCTYPE html>
<html>
<script src="C:\Users\Ghaith Haddad\Desktop\learning\learn\angular-1.5.8"></script>
<script src="C:\Users\Ghaith Haddad\Desktop\learning\learn\www\me.js"></script>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title>AngularJS Tutorial</title>
</head>
<body>
<script type="text/javascript" src="cordova.js"></script>
<div ng-app="app3" ng-controller="ctrl1">
<span>Values:</span>
<input type="text" ng-model="first" />
<input type="text" ng-model="second" />
<h1>hello there buddy</h1>
<button ng-click="update()">Sum</button>
<br><br>
{{calculation}}
</div>
<script>
var app = angular.module('app3', []);
app.controller('ctrl1', function($scope) {
$scope.first = 1;
$scope.second = 2;
$scope.update = function(){
$scope.calculation = (+$scope.first + +$scope.second);
};
});
<!-- Load the AngularJS library -->
</script>
<!-- Load the JS Module -->
</body>
</html>
Here is the JS code:
var app = angular.module('app3', []);
app.controller('ctrl1', function($scope) {
$scope.first = 1;
$scope.second = 2;
$scope.update = function(){
$scope.calculation = (+$scope.first + +$scope.second);
};
});
Use relative path for cordova (like "./") instead of absolute path (
), that's way the script can't be loaded. Anyway you can debug your solution in android using chrome and attaching device or iOS using safari inspector.
Example:
<!DOCTYPE html>
<html>
<head>
<base href=".">
</head>
<body>
<script type="text/javascript" src="bundle.js"></script>
</body>
</html>
Related
I have two simple files: leads.html and leadsController.js. I want to have leadsController.js as a linked javaScript file in leads.html. When I link it using the following code <script src = "leadsController.js"></script> in my leads.html ... leads.html does not render properly.
However, when I include the contents of leadsController.js as a part of the code of leads.html it works.
Am I not linking the .js file correctly?
Below is what works and what doesn't.
I want this to work when connected to leadsController.js
Yes ... it's in the same directory.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title></title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
</head>
<body>
<div ng-app = "myApp" ng-controller = "myCtrl">
<h1>Hello, world!</h1>
<ul>
<li ng-repeat = "x in myData">{{ x.id }}</li>
</ul>
</div>
<script src = "leadsController.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/js/bootstrap.min.js" integrity="sha384-vZ2WRJMwsjRMW/8U7i6PWi6AlO1L79snBrmgiDpgIWJ82z8eA5lenwvxbMV1PAh7" crossorigin="anonymous"></script>
</body>
</html>
leadsController.js looks like this:
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $http) {
$http.get("https://clearmaze.net/test/newAdmin/leadsData.php").then(function (response) {
$scope.myData = response.data.records;
});
});
This works:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title></title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
</head>
<body>
<div ng-app = "myApp" ng-controller = "myCtrl">
<h1>Hello, world!</h1>
<ul>
<li ng-repeat = "x in myData">{{ x.id }}</li>
</ul>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $http) {
$http.get("leadsData.php").then(function (response) {
$scope.myData = response.data.records;
});
});
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/js/bootstrap.min.js" integrity="sha384-vZ2WRJMwsjRMW/8U7i6PWi6AlO1L79snBrmgiDpgIWJ82z8eA5lenwvxbMV1PAh7" crossorigin="anonymous"></script>
</body>
</html>
try absolute uri of the script file. eg if ur script is in /scripts folder then
src="~/scripts/leadsController.js" that should work.
Try <script src = "./leadsController.js"></script>
UPDATE: typo. I didn't upload the file to the server ... facepalm. Thanks all for your suggestions as they lead me to figure that out in the first place.
I'm having trouble loading an HTML file that contains AngularJS code!
Here are my snippets:
page1.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"></meta>
<meta name="viewport" content="width=device-width, initial-scale=1"></meta>
<script src="jquery-2.2.4.min.js"></script>
</head>
<body>
<div id="content">
</div>
<script>
$(document).ready(function () {
$('#content').load('page2.html#body');
});
</script>
</body>
</html>
page2.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"></meta>
<meta name="viewport" content="width=device-width, initial-scale=1"></meta>
<script src="angular.min.js"></script>
</head>
<body>
<div ng-app="myApp" ng-controller="customersCtrl">
{{ value }}
</div>
<script>
//<![CDATA[
var app = angular.module('myApp', []);
app.controller('customersCtrl', function($scope) {
$scope.value = "hello world!";
});
//]]>
</script>
</body>
</html>
page2 alone works just fine! But when I try to load it inside page1, I get the following error message:
Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.4.8/$injector/modulerr?p0=myApp&p1=Error%3A%2…
at HTMLDocument.eval (eval at globalEval (jquery-2.2.4.min.js:2), :294:192)
at i (jquery-2.2.4.min.js:2)
Angular needs jQuery to work (to be exact, it needs jQLite). You should import it also on page2.html, before angular.min.js.
<head>
<meta charset="utf-8"></meta>
<meta name="viewport" content="width=device-width, initial-scale=1"></meta>
<script src="jquery-2.2.4.min.js"></script>
<script src="angular.min.js"></script>
</head>
I am new to angular js and am creating a simple app. However, when I try to run it, the binding doesn't work. I also get a console error saying Error: [ng:areq] Argument 'meetupsController' is not a function, got undefined. Here is my code:
var app = angular.module('meetupApp', ['ngResource']);
This is in my meetups-controller.js :
app.controller('meetupsController', ['$scope', '$resource', function($scope, $resource){
var Meetup = $resource('/api/meetups');
$scope.meetups = [
{ name: "MEAN SF Developers" },
{name: "Some other meetups" }
]
$scope.createMeetup = function(){
var meetup = new Meetup();
meetup.name = $scope.meetupName;
meetup.$save();
}
}]);
This is my index.html :
<!DOCTYPE html>
<html ng-app="meetupApp">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<!-Meetups View->
<div ng-controller="meetupsController">
<h1>There are {{meetups.length}} meetups</h1>
<ul>
<li ng-repeat="meetup in meetups">
{{meetup.name}}
</li>
</ul>
<form ng-submit="createMeetup()">
<input type="text" placeholder="Meetup name" ng-model="meetupName"></input>
<button type="submit">Add</button>
</form>
</div>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular-resource.js"></script>
<script type="text/javascript" src="/js/app.js"></script>
<script type="text/javascript" src"/js/controllers/meetups-controller"></script>
</body>
Thanks a lot in advance for your help!
Your controller didn't load properly because you are missing .js in script .
Convert this
<script type="text/javascript" src"/js/controllers/meetups-controller"></script>
to this
<script type="text/javascript" src"/js/controllers/meetups-controller.js"></script>
I am new in Angular.js, I am watching pluralsight Angular tutorial, I did what the teacher told on that videos:
<!Doctype>
<html lang="en" ng-app>
<head>
</head>
<body>
<h1 ng-controller="helloWorldCtrl">{{helloMessage}}</h1>
<script href="angular.min.js"></script>
<script type="text/javascript">
function helloWorldCtrl ($scope) {
$scope.helloMessage = "Hello World!";
}
</script>
</body>
</html>
The h1 should be Hello World! but it is {{helloMessage}}
I am using Latest version of Firefox on windows8 with latest version of Angular
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<!Doctype>
<html lang="en" ng-app>
<head>
</head>
<body>
<h1 ng-controller="helloWorldCtrl">{{helloMessage}}</h1>
<script href="angular.min.js"></script>
<script type="text/javascript">
function helloWorldCtrl ($scope) {
$scope.helloMessage = "Hello World!";
}
</script>
</body>
</html>
Above code works without any issue so it is clear whatever problem is with your version issue. Use nuget to resolve the issue in case you are using Visual studio.
The syntax has changed, you have to add ng-app to the body part, and change the script src, the following code works.
<body ng-app>
<h1 ng-controller="helloWorldCtrl">{{helloMessage}}</h1>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js"></script>
<script type="text/javascript">
function helloWorldCtrl ($scope) {
$scope.helloMessage = "Hello World!";
}
</script>
</body>
You should a module in your script.
Hope the following code helps you.
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>document.write('<base href="' + document.location + '" />');</script>
<link rel="stylesheet" href="style.css" />
<script data-require="angular.js#1.3.x" src="https://code.angularjs.org/1.3.12/angular.js" data-semver="1.3.12"> </script>
<script src="app.js"></script>
</head>
<body>
<h1 ng-controller="MainCtrl">Hello {{name}}!</h1>
<script>
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.name = 'World';
});
</script>
</body>
</html>
Here is the code Plunker:-
<!DOCTYPE html>
<html data-ng-app="one">
<head>
<script data-require="angular.js#*" data-semver="1.4.0-beta.3" src="https://code.angularjs.org/1.4.0-beta.3/angular.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body>
<h1 ng-controller="helloWorldCtrl">{{helloMessage}}</h1>
<script type="text/javascript">
var app=angular.module("one",[]);
app.controller("helloWorldCtrl",function ($scope) {
$scope.helloMessage = "Hello World!";
});
</script>
</body>
</html>
I assume there is version problem if you are using new version of angular above 1.2.0 it is not allowed to use global controller in that version Source
this is home.html
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta charset="UTF-8">
<title>SPM</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="../css/bootstrap/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="../css/common/common.css" />
<link rel="stylesheet" type="text/css" href="../js/treeview/css/angular.treeview.css">
<script src="../js/jquery/jquery-2.1.1.min.js"></script>
<script src="../js/bootstrap/bootstrap.js"></script>
<script type="text/javascript" src="../js/angular/angular.min.js"></script>
<script type="text/javascript" src="../js/treeview/angular.treeview.min.js"></script>
<script type="text/javascript" src="../js/AJcontrollers/spmControllers.js"></script>
<script type='text/javascript'>//<![CDATA[
//angular module
'use strict';
alert("1");
var myApp = angular.module('myApp', ['angularTreeview','ngLoadScript']);
myApp.controller('commonController', ['$scope', '$http', function($scope, $http) {
$scope.menus = [
{ link : '/summary', treeState : '' , url: 'body.html'},
{ link : '/indicator', treeState : '' , url: 'manageHierarchy.html'}
];
$scope.menu = $scope.menus[0];
}]);
</script>
</head>
<body ng-controller="commonController">
<div>
<div ng-include="'head.html'"></div>
</div>
<!-- footer -->
<footer class="footer">
<div ng-include="'footer.html'"></div>
</footer>
<!-- footer -->
</body>
</html>
and
head.html is
<script type='text/javascript'>
myApp.controller('headController', ['$scope', '$http', function($scope, $http) {
$scope.change = function (param){
alert(param);
};
}]);
</script>
<div ng-controller="headController">
details......
</div>
use angularjs version 1.3.7
problem is 'can't find headController'
in my code what shoud i do ?
can i change my angular version?
1.2.X version can allow function headController($scope){ .....};
but 1.3.7 not work
what can i do ?
This is a know issue that has been reported.
https://github.com/angular/angular.js/issues/3756
https://gist.github.com/endorama/7369006
Long story short, the script tag is a special little flower and angular does not treat it as such. If you include jquery before you include angular this issue will resolve itself. Otherwise you can do the script lazy loading technique that the github links recommend.
Or just move the script tag from head.html and put it on home.html since it will always be needed. (Disclaimer: I would not do this for an app of any size and complexity, but for something small it is the easiest solution. Of course creating js files and including them via seperate scripts would be best.)