I installed firebase and angularfire with bower bower.
I included the files and angularfire but I get these errors:
When I click error on the file angularfire
code app.js
var app = angular.module('myApp', ['ui.router','ionic','firebase'])
.run(function($ionicPlatform) {
$ionicPlatform.ready(function() {
if(window.cordova && window.cordova.plugins.Keyboard) {
// Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
// for form inputs)
cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
// Don't remove this line unless you know what you are doing. It stops the viewport
// from snapping when text inputs are focused. Ionic handles this internally for
// a much nicer keyboard experience.
cordova.plugins.Keyboard.disableScroll(true);
}
if(window.StatusBar) {
StatusBar.styleDefault();
}
});
})
app.config(['$stateProvider','$urlRouterProvider', function($stateProvider,$urlRouterProvider) {
$stateProvider.state("home",{ url : "/home", templateUrl : "templates/home.html" , controller: "HomeCtrl"});
$stateProvider.state("Inscription",{ url : "/inscription", templateUrl : "templates/inscription.html" , controller: "InscriCtrl"});
$stateProvider.state("listmsg",{ url : "/listmsg", templateUrl : "templates/list.html" , controller: "ListCtrl"});
$stateProvider.state("msg",{ url : "/msg", templateUrl : "templates/msg.html" , controller: "MsgCtrl"});
$urlRouterProvider.otherwise("home");
}]);
app.controller('HomeCtrl', [,'$firebaseSimpleLogin',function($scope,$firebaseSimpleLogin) {
var firebaseObj = new Firebase("https://appsfactor-68466.firebaseio.com");
var loginObj = $firebaseSimpleLogin(firebaseObj);
$scope.SignIn = function(event) {
event.preventDefault(); // To prevent form refresh
var username = $scope.user.email;
var password = $scope.user.password;
loginObj.$login('password', {
email: username,
password: password
})
.then(function(user) {
// Success callback
console.log('Authentication successful');
}, function(error) {
// Failure callback
console.log('Authentication failure');
});
}
}]);
app.controller('InscriCtrl', [function() {
}]);
app.controller('ListCtrl', [function() {
}]);
app.controller('MsgCtrl', [function() {
}]);
code index.html
<!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 rel="manifest" href="manifest.json">
<!-- un-comment this code to enable service worker
<script>
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('service-worker.js')
.then(() => console.log('service worker installed'))
.catch(err => console.log('Error', err));
}
</script>-->
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<link rel="icon" href="http://getbootstrap.com/favicon.ico">
<link href="http://getbootstrap.com/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="http://getbootstrap.com/examples/signin/signin.css" rel="stylesheet">
<!-- AngularFiionic servere -->
<script src="lib/firebase/firebase.js"></script>
<script>
// Initialize Firebase
var config = {
apiKey: "myapi",
authDomain: "appsfactor-68466.firebaseapp.com",
databaseURL: "https://appsfactor-68466.firebaseio.com/",
storageBucket: "gs://appsfactor-68466.appspot.com",
};
firebase.initializeApp(config);
</script>
<script src="lib/angularfire/dist/angularfire.js"></script>
<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>
<script src="lib/ionic/js/angular-ui/angular-ui-router.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>
</head>
<body ng-app="myApp">
<ion-side-menus>
<ion-side-menu-content>
<ion-nav-bar class="bar-calm">
<ion-nav-buttons>
<button menu-toggle="left" class="button button-icon ion-navicon">
</button>
</ion-nav-buttons>
</ion-nav-bar>
<ion-nav-view>
</ion-nav-view>
</ion-side-menu-content>
<ion-side-menu side="left">
<ion-item menu-close ui-sref="home">Acceuil</ion-item>
<ion-item menu-close ui-sref="Inscription">Inscription</ion-item>
<ion-item menu-close ui-sref="listmsg">Listes Messages</ion-item>
<ion-item menu-close ui-sref="msg">Message</ion-item>
</ion-side-menu>
</ion-side-menus>
</body>
</html>
Related
controller.js
var app = angular.module('startervideo', ['ionic','ngCordova'])
app.controller('VideoCtrl', function($scope,$cordovaCapture) {
$scope.data = {
videoPath: ""
};
$scope.captureVideo = $scope.captureVideo = function() {
var options = {duration: 15 };
$cordovaCapture.captureVideo(options).then(
function(videoData) {
// Success! Video data is here
$scope.data.videoPath = "file:/" + videoData[0].fullPath;
console.log(videoData);
}, function(err) {
// An error occurred. Show a message to the user
console.log(err);
});
}
});
app.js
var app = angular.module('starter', ['ionic','ngCordova','startervideo'])
app.directive("cordovaVideo", function () {
return {
restrict: 'AEC',
scope: {src: '='},
link: function(scope, element, attrs) {
scope.$watch('src', function(newVal, oldVal) {
if (scope.src != "") {
// Create a div object
var div = document.createElement('div');
div.innerHTML = "<video id=\"myCordovaVideo\"controls>"+
"<source src=\"" + scope.src + "\" type=\"video/quicktime\">"+ "</video>";
// Delete previous video if exists
var previousDiv = document.getElementById('myCordovaVideo');
if (previousDiv)
previousDiv.remove();
// Append new <video> tag into the DOM
element.append(div);
}
}); }
} });
#myCordovaVideo {
background: red;
width: 100%;
}
<!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 rel="manifest" href="manifest.json">
<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>
<script src="lib/ngCordova/dist/ng-cordova.js"></script>
<!-- your app's js -->
<script src="js/app.js"></script>
<script src="js/controller.js"></script>
</head>
<body ng-app="starter" ng-controller="VideoCtrl">
<ion-pane>
<ion-header-bar class="bar-stable">
<h1 class="title">VideoPro</h1>
</ion-header-bar>
<ion-content>
<button class="button button-calm button-full"
ng-click="captureVideo()">Capture Video</button>
<cordova-video src="data.videoPath"></cordova-video>
</ion-content>
</ion-pane>
</body>
</html>
Hi everyone I am new in ionic1 framework been trying to develop an application that can capture video display them on the UI and ultimately store in a remote serve, so far the code that I have can capture video but it does not display it on the UI.The example that I am following comes from ionic cookbook I am in desperate need of help here is the code that I have
I've created a similar Ionic app that captures video and uploads it to a remote server. You may find it useful
https://github.com/aliasav/ionic-video
I just getting started with Ionic and have done environment setup for the same, but when I tried to emulate the app, below is happening:
Able to start the simulator
App also starts but it shows "html code" instead of app
Below are my files, I appreciate any help finding any mistakes.
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Todo</title>
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<link href="lib/ionic/css/ionic.min.css" rel="stylesheet">
<script src="lib/ionic/js/ionic.bundle.js"></script>
<script src=“js/app.js”></script>
</head>
<body ng-app="todo">
<ion-pane>
<ion-header-bar class="bar-stable">
<h1 class="title">Awesome App</h1>
</ion-header-bar>
<ion-content class="padding">
<button class="button button-assertive">I'm a button</button>
</ion-content>
</ion-pane>
</body>
</html>
app.js
angular.module(‘todo’, ['ionic’]);
Change quotation marks from <script src=“js/app.js”></script> to <script src="js/app.js"></script>
app.js should look like this
angular.module('todo', ['ionic'])
.run(function($ionicPlatform) {
$ionicPlatform.ready(function() {
if(window.cordova && window.cordova.plugins.Keyboard) {
cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
cordova.plugins.Keyboard.disableScroll(true);
}
if(window.StatusBar) {
StatusBar.styleDefault();
}
});
})
And your app should look like this
I am trying to create a simple that will read the data from a qr code, the apps is working perfectly, it can open the camera and capture the image, the problem is, it cannot show the data/data is blank in the alert as below code.
this is how i do it
cordova plugin add https://github.com/wildabeast/BarcodeScanner.git
index.html
<!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">
<!-- ionic/angularjs js -->
<script src="lib/ionic/js/ionic.bundle.js"></script>
<!-- cordova script (this will be a 404 during development) -->
<script src="lib/ng-cordova.min.js"></script>
<script src="cordova.js"></script>
<!-- your app's js -->
<script src="js/app.js"></script>
<script src="js/controllers.js"></script>
</head>
<body ng-app="starter">
<ion-pane>
<ion-header-bar class="bar-stable">
<h1 class="title">Ionic Blank Starter</h1>
</ion-header-bar>
<ion-content>
<div class="card">
<div class="item" ng-controller="ScanCtrl">
<button class="button button-block button-positive" ng-click="scanBarcode()">
<i class="icon ion-qr-scanner"></i>
Scan With Scope
</button>
</div>
</div>
</ion-content>
</ion-pane>
</body>
</html>
app.js
angular.module('starter', ['ionic', 'starter.controllers', 'ngCordova'])
.run(function($ionicPlatform) {
$ionicPlatform.ready(function() {
if(window.cordova && window.cordova.plugins.Keyboard) {
// Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
// for form inputs)
cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
// Don't remove this line unless you know what you are doing. It stops the viewport
// from snapping when text inputs are focused. Ionic handles this internally for
// a much nicer keyboard experience.
cordova.plugins.Keyboard.disableScroll(true);
}
if(window.StatusBar) {
StatusBar.styleDefault();
}
});
})
controllers.js
angular.module('starter.controllers', [])
.controller('ScanCtrl', function($scope, $cordovaBarcodeScanner){
$scope.scanBarcode = function(){
$cordovaBarcodeScanner.scan().then(function(imgData){
alert(imgData.text);
},function(error){
alert("Error");
}
);
}
});
Any helps would really appreciated.
My app has two kinds of templates. The first is used in "logged out" pages and the second one is used in "logged in" pages.
Below is the index.html which is used with all "logged out" template pages:
<!DOCTYPE html>
<html ng-app="appLoggedOut">
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title>Services 4 Uber</title>
<link href="lib/ionic/css/ionicons.min.css" rel="stylesheet" >
<link href="lib/ionic/css/ionic.css" rel="stylesheet">
<script src="lib/ionic/js/ionic.bundle.js"></script>
<!-- cordova script (this will be a 404 during development) -->
<script src="cordova.js"></script>
<!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
<link href="css/ionic.app.css" rel="stylesheet">
-->
<script src="js/loggedout/app.js"></script>
<script src="js/loggedout/controllers.js"></script>
<script src="js/loggedout/routes.js"></script>
<script src="js/loggedout/services.js"></script>
<script src="js/loggedout/directives.js"></script>
<link href="css/app.css" rel="stylesheet">
</head>
<body>
<div>
<div class="spacer" style="width: 300px; height: 15px;"></div>
<ion-nav-view></ion-nav-view>
</div>
<div class="bar bar-footer bar-dark">
Footer for Logged out pages
</div>
</body>
</html>
I need to set all my "logged in" pages to show a header and a different footer. So, it is like I have another index.html, used just for "logged in" pages.
Below is the what I want to use to all my "logged in" pages:
<!DOCTYPE html>
<html ng-app="appLoggedIn">
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title>Services 4 Uber</title>
<link href="lib/ionic/css/ionicons.min.css" rel="stylesheet" >
<link href="lib/ionic/css/ionic.css" rel="stylesheet">
<script src="lib/ionic/js/ionic.bundle.js"></script>
<!-- cordova script (this will be a 404 during development) -->
<script src="cordova.js"></script>
<!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
<link href="css/ionic.app.css" rel="stylesheet">
-->
<script src="js/loggedin/app.js"></script>
<script src="js/loggedin/controllers.js"></script>
<script src="js/loggedin/routes.js"></script>
<script src="js/loggedin/services.js"></script>
<script src="js/loggedin/directives.js"></script>
<link href="css/app.css" rel="stylesheet">
</head>
<body ng-controller="homeCtrl">
<div class="bar bar-header bar-light">
Header used only in logged in pages
</div>
<div>
<ion-nav-view></ion-nav-view>
</div>
<div class="bar bar-footer bar-dark">
Footer for logged in pages
</div>
</body>
</html>
How can I define my routes, to jump from my login page (using "logged out" template) to a logged page (using "logged in" template) ?
I want to change all the page and not just load a view inside the tag "".
Thanks.
i am only discuss about the How to navigate from one template to another.
ionic that used angularjs or javaScript. is follow the simple call by state or url etc
for example Each controller have routing and there HTML page
angular.module('starter.storeDetailsController', [])
.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('storeDetails', {
url: '/user/:store',
abstract:true,
templateUrl: 'templates/store_detail.html',
controller: 'StoreDetailsCtrl'
})
})
.controller('StoreDetailsCtrl', ['$scope', '$ionicLoading', '$timeout', function($scope, $ionicLoading, $timeout) {
$scope.goToNextPage=function(){
$state.go('home'); //here navigate from one template to another
}
}])
And another page
angular.module('starter.homeDetailsController', [])
.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('home', {
url: '/home',
abstract:true,
templateUrl: 'templates/home.html',
controller: 'HomeCtrl'
})
})
.controller('HomeCtrl', ['$scope', '$ionicLoading', '$timeout', function($scope, $ionicLoading, $timeout) {
console.log('Welcome');
}])
above example show two controller StoreDetailsCtrl and HomeCtrl and i go from StoreDetailsCtrl to HomeCtrl in home page. this is navigate by javascript but there are many ways to navigate page.
in HTML side by href=#/url and also used ui-sref="stateName" in ionic for navigate page.
I'm trying to set up a HTTP-get request on my ionic application but i keep getting this error:
XMLHttpRequest cannot load http://www.wikicode.co.uk/announcement?
date=value2&message=value3&name=value1. No 'Access-Control-Allow-Origin'
header is present on the requested resource. Origin 'http://localhost:8100'
is therefore not allowed access.
I'm not really sure what's wrong. I've tried googling it but didn't have much luck.
Here's my code:
html:
<!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>Announcement</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 ng-app="Announcement">
<ion-view view-title="Announcements">
<ion-pane>
<ion-header-bar class="bar-stable">
<h1 class="title">Announcement</h1>
</ion-header-bar>
<br>
<br>
<br>
<ionic-content ng-controller="Controller">
<button class="button" ng-click="getData()">Do something</button>
<br>
name: {{name}} {{date}} {{message}}
</ionic-content>
</ion-pane>
</ion-view>
</body>
</html>
Javascript:
angular.module('starter.controllers', [])
.controller('announcementsCtrl', function($scope) {})
.controller('chatsCtrl', function($scope) {})
.controller('photosCtrl', function($scope) {})
.controller('profilesCtrl', function($scope) {})
.controller('Controller', function($scope, $http) {
$scope.getData = function() {
$http.get("http://www.wikicode.co.uk/announcement", { params: { "name": "value1", "date": "value2", "message": "value3"} })
.success(function(data) {
$scope.name = data.name;
$scope.date = data.date;
$scope.message = data.message;
})
.error(function(data) {
alert("ERROR");
});
}
});
This is a common issue with RESTful APIs that do not support CORS headers. You can work around this during development by using the proxy option in the Ionic CLI. I wrote a tutorial about this on my site http://ionicinaction.com/blog/how-to-fix-cors-issues-revisited/.
The big thing to remember is this only works for building the app. It does not solve the root of the problem. You have two options 1) get wikicode.co.uk to support CORS headers or 2) create another REST API that proxies to the real API but adds CORS headers. There are lots of ways to do #2, but here is how to build a simple Node server that does this. http://chafey.blogspot.com/2014/09/working-around-cors.html