I am trying to make a PhoneGap webapp using angular. I have these three files.
index.html
<!DOCTYPE html>
<html ng-app="app">
<head>
<title>Device Properties Example</title>
<meta http-equiv="Content-Type"
content="text/html; charset=UTF-8"/>
<meta name="viewport"
content="width=device-width,height=device-height,user-scalable=no"/>
<!-- Cordova Build Application -->
<script charset="utf-8" src="cordova.js"></script>
<!-- Main Dependencies -->
<script src="vendor/jquery/jquery-1.11.1.min.js"></script>
<!-- Angular Declaration -->
<script src="vendor/angular/angular.min.js"></script>
<script src="vendor/angular/angular-route.min.js"></script>
<!-- Angular App Declaration -->
<script src="assets/js/index.js"></script>
<script src="app/app.js"></script>
<script src="app/controller.js"></script>
<script src="app/factory.js"></script>
<script>
app.initialize();
</script>
<!-- UI KIT -->
<script src="vendor/ui-kit/js/uikit.min.js"></script>
<link rel="stylesheet" href="vendor/ui-kit/css/uikit.min.css"/>
<!-- User Defined Styles -->
<link rel="stylesheet" href="assets/css/kore.css"/>
</head>
<body class="uk-width-1-1">
<div>
<header class="uk-width-1-1" id="eca-main-nav-container">
<nav class="uk-navbar">
<div class="uk-navbar-flip">
<ul class="uk-navbar-nav">
<li><a href="#eca-main-nav" data-uk-offcanvas>
<i class="uk-icon uk-icon-bars"></i>
</a>
</li>
</ul>
</div>
</nav>
</header>
<div ng-view="" id="eca-main-view"></div>
<footer>
<!-- Main Navigation Canvas -->
<aside id="eca-main-nav" class="uk-offcanvas">
<section class="uk-offcanvas-bar">
<ul class="uk-nav uk-nav-offcanvas">
<li>Home</li>
</ul>
</section>
</aside>
</footer>
</div>
</body>
</html>
index.js
var app = {
initialize: function() {
this.bindEvents();
},
bindEvents: function() {
document.addEventListener('deviceready', this.onDeviceReady, true);
},
onDeviceReady: function() {
angular.element(document).ready(function() {
angular.bootstrap(document);
});
},
};
app.js
//constants
var appOrigin2 = 'http://event.deremoe.com/api/vendor/events2';
var appOrigin = 'http://event.chart.local/api/vendor/events.json';
var app = angular.module('app',['ngRoute']);
app.config(function($routeProvider){
//chart site
$routeProvider.when('/chart',{
templateUrl:'view/chart',
controller:'chartController'
});
$routeProvider.when('/event',{
templateUrl:'view/event',
controller:'eventViewController'
});
//start route
$routeProvider.otherwise({redirectTo:'/chart'});
});
controller.js
/* chartController
* view/chart.html
*/
app.controller('chartController',['$scope','chartListLoadService',function($scope,chartListLoadService){
alert('this is running');
//chartListLoadService.fetchListJSONP('all',$scope);
//$scope.eventDetail = function(eventId){
// alert(eventId);
//};
}]);
/* eventViewController
* view/event.html
*/
app.controller('eventViewController',['$scope',function($scope){
}]);
It works fine on the browser. The Alert is triggered just fine in the controller. But when I compiled it on Phonegap, the AngularJS is not initialized.
I've read that you need to execute the code after the 'deviceready' in order to work. I looked into this quetions here:
Angular ng-view/routing not working in PhoneGap
and try to use it. But it appears that it doesn't do anything. I can't understand why, or I might be missing something to do this, as well as my ng-app has a specific name and is attached to the app variable as seen.
Kindly help.
You should not use ng-app when manually bootstrapping Angular. See https://docs.angularjs.org/guide/bootstrap.
Related
I can not create complex data models in my controllers.
every time I create them the code seems to fail silently
simple data models like
$scope.conversationList = [123456];
work just fine both using ng-bind & using it in a directive template.
but the moment I change them to {{conversationList.conversation}} they fail silently and my ngbind is emptied and the template displays
"{{conversationList.conversataion}}" in plain text.
I don't know what is wrong. Every example I can find looks like I formatted the models correctly it keeps failing.
Thank you for your help
Controller
/* global angular */
'use strict';
app.controller('conversationListCtrl', ['$scope', function ($scope) {
$scope.conversationList = [
{
conversation2: 123456789,
conversation:
{
id: "bestbuy",
messageId: 123456,
subscriber: "Billy Madison",
subscriptionType: "summerPass",
conversationImage: "insert Image"
}
}
]
}
])
.directive('listCtrl', function () {
return {
scope: false,
template: '<div> {{conversationList.conversation}} </div>'
}
});
Index.html
<!doctype html>
<html ng-app="ChatApp" class="angularjs ng-scope">
<head>
<meta charset="utf-8">
<title>ClearKey Test Message</title>
<meta name="description" content="Layer Angular example">
<link rel="shortcut icon" href="http://static.layer.com/web/favicon.png">
<link href="http://fonts.googleapis.com/css?family=Open+Sans:300,400,600" rel="stylesheet" type="text/css">
<link href="http://fonts.googleapis.com/css?family=Raleway:300,400" rel="stylesheet" type="text/css">
<link href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<!-- Common CSS and Identity dialog -->
<link href="common/style.css" rel="stylesheet">
<!-- Layer Web SDK -->
<script src='vendors/layer-websdk.min.js'></script>
<script src='vendors/angular.js'>
//checked
</script>
<script src='vendors/angular-route.js'>
</script>
<script src='vendors/ng-infinite-scroll.min.js'></script>
<script src='vendors/stop-angular-overrides.js'></script>
<!-- Angular app -->
<script src='js/app.js'></script>
<script src="jquery-3.1.1.min.js"></script>
<script src="js/models/conversation.js"></script>
</head>
<body class="ng-scope" cz-shortcut-listen="true">
<!-- ^^^used to have appCtrl^^^ -->
<div class="main-app" ng-include="'views/app.html'"></div>
</body>
</html>
App.html
<div src="jquery-3.1.1.min.js">
<!-- ^^^needs appctrl controller^^^ -->
<div class="messenger">
<div class="left-panel">
<div class="Message-item">
<div class="imgContainer"> <img class="cornerImage" src="images/favicon.png" /> </div>
</div>
<div >
<!-- ^^^had the conversationListCtrl^^^ -->
<div class="panel-header conversations-header"
>
<!-- ^^^had the partials for the left column header^^^ -->
</div>
<div ng-controller="conversationListCtrl" class="conversation-list">
<div list-Ctrl ></div>
<div ng-model="conversationList" class="conversation-list" style="border:dashed" ng-bind="{{conversationList.conversation}}"></div>
</div>
<!-- had the partials for conversationlist.html -->
</div>
</div>
<div class="right-panel" >
<div
>
<!-- had the partials for the messages that were in each conversation -->
</div>
</div>
</div>
</div>
You need to define element which you want to access -
Replace - {{conversationList.conversation}}
With - {{conversationList.conversation.id}} or {{conversationList.conversation.messageId}}
I am trying to use vis.js library to visualize a simple network. My controller is as follows
var App = angular.module('App', ['ngRoute','ngVis']);
App.controller('visController', ['$scope','$http','$window','VisDataSet',function($scope,$http,$window,VisDataSet)
{
$scope.Nodes = [];
$scope.Edges = [];
$http.post('/getNetworkData').success(function(response)
{
$scope.Nodes = response.Nodes;
$scope.Edges = response.Edges;
console.log($scope.Edges);
console.log($scope.Nodes);
});
var network = null;
var destroy = function(){
if(network!=null)
{
network.destroy();
network = null;
}
}
var draw = function()
{
destroy();
var nodes = new vis.Dataset($scope.Nodes);
var edges = new vis.Dataset($scope.Edges);
var container = angular.element( document.querySelector('#mynetwork'));
console.log(container);
var data = {
nodes : nodes,
edges : edges
};
var options = {
interaction: {
navigationButtons: true,
keyboard: true
}
};
network = new vis.Network(container,data,options);
network.on('select', function(params) {
console.log("clicked");
});
}
draw();
}]);
and my html div is as follows
<!DOCTYPE html>
<html ng-app="App">
<head>
<meta charset="UTF-8">
<title>Visualization Page</title>
<link href='http://fonts.googleapis.com/css?family=Titillium+Web:400,300,600' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="css/bootstrap/normalize.css">
<link rel="stylesheet" href="css/bootstrap/style.css">
<link href="css/bootstrap/bootstrap.min.css" rel="stylesheet">
<link href="css/visualizationPage/style_vispage.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.2/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.2/angular-route.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="css/bootstrap/jquery.min.js"></script>
<script src="css/bootstrap/bootstrap.min.js"></script>
<script src="js/ng-file-upload-shim.min.js"></script>
<script src="js/ng-file-upload.min.js"></script>
<script src="controllers/controller.js"></script>
<script src="js/ngDialog.js"></script>
<link rel="stylesheet" type="text/css" href="css/createNetwork/ngDialog.css">
<link rel="stylesheet" type="text/css" href="css/createNetwork/ngDialog-theme-default.css">
<script src="js/vis.js"></script>
<script src="js/exampleUtil.js"></script>
<link rel="stylesheet" type="text/css" href="css/bootstrap/vis.css">
<script src="js/googleAnalytics.js"></script>
</head>
<body ng-controller="visController">
<div class="container-fluid">
<div class="row">
<div class="col-sm-3 col-md-2 sidebar">
<ul class="nav nav-sidebar">
<li class="active">Visualization<span class="sr-only">(current)</span></li>
<li>Data</li>
</ul>
</div>
<div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
<h2 class="page-header">Visualization</h2>
<div id="mynetwork">
</div>
</div>
</div>
</div>
</body>
</html>
I am getting an error Uncaught Error: [$injector:modulerr] when i try to load the page. Can someone tell me what I am missing in my code.
My error is as follows
Error: [$injector:modulerr] http://errors.angularjs.org/1.5.2/$injector/modulerr?p0=n...)
at Error (native)
at https://ajax.googleapis.com/ajax/libs/angularjs/1.5.2/angular.min.js:6:416
at https://ajax.googleapis.com/ajax/libs/angularjs/1.5.2/angular.min.js:40:60
at p (https://ajax.googleapis.com/ajax/libs/angularjs/1.5.2/angular.min.js:7:355)
at g (https://ajax.googleapis.com/ajax/libs/angularjs/1.5.2/angular.min.js:39:135)
at https://ajax.googleapis.com/ajax/libs/angularjs/1.5.2/angular.min.js:39:304
at p (https://ajax.googleapis.com/ajax/libs/angularjs/1.5.2/angular.min.js:7:355)
at g (https://ajax.googleapis.com/ajax/libs/angularjs/1.5.2/angular.min.js:39:135)
at db (https://ajax.googleapis.com/ajax/libs/angularjs/1.5.2/angular.min.js:43:164)
at c (https://ajax.googleapis.com/ajax/libs/angularjs/1.5.2/angular.min.js:20:463
First, this is unrelated to your issue, but there are several things that should be cleaned up here.
Eliminate the use of success in your call to $http.post and replace it with then. Success is depracated.
It looks like this should be a call to $http.get, not post.
Draw should be called from the then method of the call to $http.get rather than at the end of your controller initialization. The way this is currently written you cannot guarantee that this call is complete and the data is available before your draw function executes.
As for the missing module, it is most likely a pathing issue, spelling issue or an issue with the order that you are loading your javascript files. That code would of course be in your html.
You're loading jquery more than once. You only need it once. When you're using angular with Jquery always load jquery first. Angular will make use of it instead of JQLite in those circumstances. I don't see anything else, but it's possible that loading JQuery after Angular and then loading it again is stepping on something.
So I have this simple code in angular that works on jsfiddle as you can see by pressing Run code snippet:
function ContactController($scope) {
$scope.contact = 0;
$scope.add = function() {
$scope.contact += 1;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="" ng-controller="ContactController">
<button ng-click="add()">Add</button>
<div>{{ contact }}</div>
</div>
But when I try to use it in my Ionic app, it doesn't work. This is my complete index.html file:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title></title>
<link href="lib/ionic/css/ionic.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
<link href="css/ionic.app.css" rel="stylesheet">
-->
<!-- ionic/angularjs js -->
<script src="lib/ionic/js/ionic.bundle.js"></script>
<!-- cordova script (this will be a 404 during development) -->
<script src="cordova.js"></script>
<!-- your app's js -->
<script src="js/app.js"></script>
<script src="js/controllers.js"></script>
<script src="js/services.js"></script>
</head>
<body id="body">
<div ng-app="" ng-controller="ContactController">
<button ng-click="add()">Add</button>
<div> {{ contact }} </div>
</div>
<script>
function ContactController($scope) {
$scope.contact = 0;
$scope.add = function() {
$scope.contact+=1;
}
}
</script>
</body>
</html>
Can anyone please tell me what I need to include in index.html in order for angular to work?
yes you need to initialize your app. in your app.js file you should see
angular.module('starter', ['ionic'])
so in your index.html you have ng-app=""
that needs to say
ng-app="starter"
You're html should look like this:
<div ng-app="starter" ng-controller="ContactController">
<button ng-click="add()">Add</button>
<div> {{ contact }} </div>
</div>
right now nothing is being bootstrapped and angular is not being attached to the page.
I'm following this tutorial.
But seems like jquery or angular or boostrap.min.js does not load properly. The file location is correct but still it shows me
Uncaught SyntaxError: Unexpected token <
for all the js files I've included in main.html
Here's my main.html
<html ng-app='ContactsApp'>
<head>
<title> My first Angular Project </title>
<base href='/'>
<link rel="stylesheet" type="text/css" href="src/boostrap.min.css">
</head>
<body>
<div class = 'container'>
<div class='page-header'>
<h1> Contacts: {{message}}</h1>
</div>
</div>
<script src = 'app/bower_components/jquery/jquery.min.js'></script>
<script src = 'app/bower_components/bootstrap/js/boostrap.min.js'></script>
<script src = 'app/bower_components/angular/angular.min.js'></script>
<script src= 'public/app.js'></script>
</body>
</html>
Here's my app.js
angular.module('ContactsApp', [])
.run(function ($rootScope){
$rootscope.message = "Hello Angular..";
});
Here's my server.js
var express = require('express'),
app = express();
//app object is express application
app
.use(express.static('./public'))
.get('*',function(req,res){
res.sendfile('public/main.html');
})
.listen(3000);
Do you have jQuery, bootstrap, angular files in proper folder as linked in your project? Let us assume you don't and let's try that by linking those files online. Then your main.html would look like:
<html ng-app="ContactsApp">
<head>
<title> My first Angular Project </title>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/css/bootstrap.css.map">
</head>
<body>
<div class = 'container'>
<div class='page-header'>
<h1 ng-cloak> Contacts: {{message}}</h1>
</div>
</div>
<script src= 'https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src= 'https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/js/bootstrap.min.js'></script>
<script src= 'https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.15/angular.min.js'></script>
<script src= 'public/app.js'></script>
</body>
</html>
And your app.js would look like:
angular.module('ContactsApp', [])
.run(function ($rootScope){
$rootScope.message = "Hello Angular..";
});
The problem with you current app.js is that the 'S' of $rootScope.message is not capitalised.
I hope this helps.
I would double check your paths for the scripts. Based on your express routes, if the js file can't be found it will respond with public/main.html. Then the browser would try to load that as a script, which would give the syntax error about <
I'm trying to make a working example using Firebase to sync data between an Angular app and Polymer on the same file. I'm using the firebase-element from Polymer
Is it possible? I've have both apps in their own sections so Angular doesn't try to hijack Polymer's binding but I'm not getting data on the Polymer side or throwing any useful errors.
Appreciate any attention. Thank you. Here's the Plnkr.
<!DOCTYPE html>
<html>
<head>
<script data-require="polymer#*" data-semver="0.3.4" src="//cdnjs.cloudflare.com/ajax/libs/polymer/0.3.4/platform.js"></script>
<script data-require="polymer#*" data-semver="0.3.4" src="//cdnjs.cloudflare.com/ajax/libs/polymer/0.3.4/polymer.js"></script>
<script data-require="angular.js#*" data-semver="1.3.1" src="//code.angularjs.org/1.3.1/angular.js"></script>
<script data-require="firebase#1.0.x" data-semver="1.0.18" src="https://cdn.firebase.com/js/client/1.0.18/firebase-debug.js"></script>
<script data-require="angularfire#0.8.x" data-semver="0.8.0" src="https://cdn.firebase.com/libs/angularfire/0.8.0/angularfire.js"></script>
<script data-require="firebase-simple-login#1.6.x" data-semver="1.6.2" src="https://cdn.firebase.com/js/simple-login/1.6.2/firebase-simple-login.js"></script>
<link rel="stylesheet" href="style.css" />
<link rel="import" href="firebase-element.html" />
</head>
<body>
<section ng-app="component-angular">
<div ng-controller="MainCtrl">
<h2>Data in Angular</h2>
{{data}}
<h3>
<input ng-model="new.data" placeholder="" />
<button ng-click="addData(new.data)">Add New Data</button>
</h3>
</div>
</section>
<section>
<div>
<firebase-element id="base" location="https://tezt.firebaseio.com/web-components" data="{{data}}" keys="{{keys}}"></firebase-element>
<h3>My Firebase Data</h3>
<template repeat="{{key in keys}}">
<p>{{key}}: {{data[key]}}</p>
</template>
</div>
</section>
<script>
var app = angular.module('component-angular', ['firebase'])
.controller('MainCtrl', function($scope, $firebase, Firebase){
var fb = new Firebase("https://tezt.firebaseio.com/web-components");
var fbSync = $firebase(fb);
$scope.data = fbSync.$asObject();
$scope.addData = function(newData){
fbSync.$push(newData);
}
});
</script>
</body>
</html>