I'm rebuilding this tutorial using the ionic framework, but I'm getting stuck early on with the firebase auth. When I built this tutorial app in just straight angular before, it worked, but now fitting it into ionic, I'm getting the following error:
Uncaught Error: [$injector:unpr] Unknown provider: angularFireAuthProvider <- angularFireAuth
The basic code layout is below:
app.js
'use strict';
var app = angular.module('wefeed',
[ 'ionic'
, 'wefeed.config'
, 'firebase']);
config.js
'use strict';
// Declare app level module which depends on filters, and services
angular.module('wefeed.config', [])
app.config(
function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('/', {
url: '/',
templateUrl: 'views/default.html' });
$urlRouterProvider.otherwise("/");
})
// establish authentication
.run(['angularFireAuth', 'FBURL', '$rootScope',
function(angularFireAuth, FBURL, $rootScope) {
angularFireAuth.initialize(new Firebase(FBURL), {scope: $rootScope, name: 'auth', path: '/signin'});
$rootScope.FBURL = FBURL;
}])
// your Firebase URL goes here
// should look something like: https://blahblahblah.firebaseio.com
.constant('FBURL', 'xxxxxxxxxxxxx.firebaseIO.com');
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.css" rel="stylesheet">
<script src="http://static.firebase.com/v0/firebase.js"></script>
<script src="https://cdn.firebase.com/v0/firebase-simple-login.js"></script>
<script src="lib/ionic/js/ionic.bundle.js"></script>
<script src="lib/firebase/angularFire.js"></script>
<script src="js/app.js"></script>
<script src="js/config.js"></script>
<!-- Needed for Cordova/PhoneGap (will be a 404 during development) -->
<script src="cordova.js"></script>
</head>
<body ng-app="wefeed">
<section class="container">
<ion-nav-view></ion-nav-view>
</section>
</body>
</html>
Related
My Index.html
<!doctype html>
<html data-ng-app="hotelApp">
<head>
<title>SRK Hotel</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- <link rel="stylesheet" href="stylesheets/style.css"> -->
<!-- Angular dependencies -->
<link rel="stylesheet" type="text/css" href="lib/angular-material/angular-material.css">
<script src="lib/angular/angular.min.js"></script>
<script src="lib/angular-animate/angular-animate.min.js"></script>
<script src="lib/angular-aria/angular-aria.min.js"></script>
<script src="lib/angular-material/angular-material.min.js"></script>
<script src="lib/angular-ui-router/release/angular-ui-router.min.js"></script>
<script src="scripts/start.js" type="text/javascript"></script>
<script src="scripts/home-page-ctrl.js" type="text/javascript"></script>
<script src="scripts/states/misc-states.js" type="text/javascript"></script>
</head>
<body>
<!-- <div data-ng-include="'views/welcome-page.html'"></div> -->
<div ui-view="welcome"></div>
</body>
</html>
My app.js
(function() {
angular.module('hotelApp.controller', []);
angular.module('hotelApp.states', ['ui.router']);
angular.module('hotelApp', ['ui.router']);
})();
My states.js - that is there for declaration of states
angular.module('hotelApp.states')
.config(function ($stateProvider, $urlRouterProvider) {
'use strict';
$stateProvider
.state('hotelApp.homePage', {
url: '/home',
views: {
'welcome': {
templateUrl: 'views/welcome-page.html',
conntroller: 'homePageCtrl'
}
}
});
$urlRouterProvider.when('/', function($state){
console.log('$state ' , $state);
$state.go('hotelApp.homePage');
});
$urlRouterProvider.otherwise(function(){
console.log('hi');
});
});
my nodejs file
var express = require('express');
var cfenv = require('cfenv');
var app = express();
app.use(express.static(__dirname + '/public'));
app.use(express.static(__dirname + '/public/views'));
app.use('/lib', express.static(__dirname + '/node_modules'));
app.get('*', function(req, res) {
res.sendFile(__dirname+'/public/index.html');
});
var appEnv = cfenv.getAppEnv();
app.listen(appEnv.port, '0.0.0.0', function() {
console.log("server starting on " + appEnv.url);
});
I am trying to use routing in this implementation but it is failing.
I have added this code but when i run my code.. nothing happens .. I just get a blank page. What is wrong with this implementation.? I get no error, no logs.
Your main module is defined as
angular.module('hotelApp', ['ui.router']);
So it depends exclusively on ui-router.
Your states are defined in a separate module, 'hotelApp.states', which is thus not part of your application.
Another problem is that the two JS files you've posted are app.js and states.js, and there is no <script> element in your html page for those two files. So the're not even loaded by the browser.
I'm pretty new with Ionic and AngularJS. I tried to create an app but it seems that the content of app.js is wrong .
This is my code look like :
app.js
angular.module('starter', ['ionic', 'starter.controllers'])
.config(function($stateProvider, $urlRouterProvider) {
$stateProvider.state('app', {
url: "/ListeUsers",
views: {
templateUrl: "templates/ListeUsers.html",
controller: 'UsersCtrl'
}
});
// if none of the above states are matched, use this as the fallback
$urlRouterProvider.otherwise('/app/ListeUsers');
});
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">
<!-- 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/angular-resource.min.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/UserControllerIonic.js"></script>
<script src="js/UsersServiceIonic.js"></script>
</head>
<body ng-app="starter">
<ion-nav-view></ion-nav-view>
</body>
</html>
userControllerIonic.js
angular.module('starter.controllers', ['starter.services'])
.controller('UsersCtrl', function($scope,userService) {
$scope.Users=userService.getUsers();
});
UsersServiceIonic.js
angular.module('starter.services', ['ngResource'])
.factory('userService',function () {
var Users =[];
return{
getUsers:function(){
return $http.get("http://localhost:26309/api/User/getAll/").then(function (response) {
users=response;
return users;
});
},
getUser : function(UserName) {
return $http.get("http://localhost:26309/api/User/getUserByNom/" + UserName).then(function (serviceResp) {
return serviceResp.data;
});
}
}
})
ListeUsers.html
<ion-list>
<ion-item ng-repeat="user in Users"
>{{user.nom}}</ion-item>
</ion-list>
i can't find the problem
There are 2 issues you need to fix here for your app to work:
You need to correct he default fallback url from /app/ListeUsers to /ListeUsers because /app/ListeUsers path will be valid if the state was a child-state of app. See more details here: https://github.com/angular-ui/ui-router/wiki/Nested-States-and-Nested-Views
Your service methods are returning promises. You cannot assign a promise to a $scope variable and expect the app to be working. Change your controller code to use the parameter from the .then method callback of the returned promise as below:
angular
.module('starter.controllers', ['starter.services'])
.controller('UsersCtrl', function($scope,userService) {
userService.getUsers()
.then(function (response) {
$scope.Users= response;
});
});
I'm trying to use the Angular JS range slider with my ionic app but it displays as below:
range slider error
I've installed npm angularjs-slider but there is an error in the console - Uncaught ReferenceError: app is not defined. Can anyone help. app.js Code below followed by index.html code. Thanks
angular.module('ionicApp', ['ionic', 'ngAutocomplete', 'rzModule', 'ui.bootstrap'])
.controller("MainCtrl", function() {
console.log("Main Controller says: Hello World");
})
.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('main', {
url: "/main",
templateUrl: "templates/main.html",
controller: 'MainCtrl'
})
.state('page', {
url: "/page",
templateUrl: "templates/page.html",
})
// if none of the above states are matched, use this as the fallback
$urlRouterProvider.otherwise('/main');
});
app.controller('MainCtrl', function($scope, $rootScope, $timeout, $modal) {
//Range slider config
$scope.minRangeSlider = {
minValue: 10,
maxValue: 90,
options: {
floor: 0,
ceil: 100,
step: 1
}
};
});
<!DOCTYPE html>
<html ng-app="ionicApp">
<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">
<link rel="stylesheet" type="text/css" href="css/rzslider.css">
<!-- ionic/angularjs js -->
<script src="lib/ionic/js/ionic.bundle.js"></script>
<!-- cordova script -->
<script src="cordova.js"></script>
<script src="ngautocomplete.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?libraries=places"></script>
<script src="js/ui-bootstrap-tpls.js"></script>
<script src="js/rzslider.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.min.js"></script>
<!-- your app's js -->
<script src="js/app.js"></script>
</head>
<body ng-app="ionicApp" ng-controller="MainCtrl" disable-tap>
<ion-nav-view></ion-nav-view>
</body>
</html>
And I link it to my page template by:
<div class="wrapper">
<article>
<rzslider rz-slider-model="rangeSlider.minValue" rz-slider-high="rangeSlider.maxValue" rz-slider-options="rangeSlider.options"></rzslider>
</article>
</div>
If you use jQuery 3.0.0, there is an incompatibility, try with jQuery 2.2.4
I open an issue on github :
https://github.com/angular-slider/angularjs-slider/issues/365
Try the new version 5.1.1, it could fix your issue.
Because you had referenced wrong scope variable, it should be minRangeSlider instead of rangeSlider
Markup
<rzslider
rz-slider-model="minRangeSlider.minValue"
rz-slider-high="minRangeSlider.maxValue"
rz-slider-options="minRangeSlider.options">
</rzslider>
Edit
Remove angular.js cdn reference as you are already loading angular files from ionic-bundle.js
I know there are multiple threads about this topic, but even with the answers on those threads my test won't work.
I have tried to add the Angular Route JS file
And put it in the HTML after my Angular file.
Still I get the same error.
error:
Error: [$injector:modulerr] http://errors.angularjs.org/1.3.16/$injector/modulerr?p0=App&p1=%5B%24injector%3Aunpr%5D%20http%3A%2F%2Ferrors.angularjs.org%2F1.3.16%2F%24injector%2Funpr%3Fp0%3D%2524routProvider%0AF%2F%3C%40https%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.3.16%2Fangular.min.js%3A6%3A417%0Abb%2Fr.%24injector%3C%40https%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.3.16%2Fangular.min.js%3A38%3A7%0Ad%40https%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.3.16%2Fangular.min.js%3A36%3A13%0Ae%40https%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.3.16%2Fangular.min.js%3A36%3A283%0Ad%40https%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.3.16%2Fangular.min.js%3A34%3A490%0Ag%2F%3C%40https%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.3.16%2Fangular.min.js%3A35%3A117%0Aq%40https%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.3.16%2Fangular.min.js%3A7%3A320%0Ag%40https%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.3.16%2Fangular.min.js%3A34%3A399%0Abb%40https%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.3.16%2Fangular.min.js%3A38%3A135%0Axc%2Fd%40https%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.3.16%2Fangular.min.js%3A17%3A381%0Axc%40https%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.3.16%2Fangular.min.js%3A18%3A179%0AOd%40https%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.3.16%2Fangular.min.js%3A17%3A1%0A%40https%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.3.16%2Fangular.min.js%3A251%3A429%0Aa%40https%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.3.16%2Fangular.min.js%3A165%3A93%0Aqf%2Fc%40https%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.3.16%2Fangular.min.js%3A32%3A384%0A
var App = angular.module('App', ['ngRoute']);
App.config(function ($routProvider) {
$routeProvider.
when('/',
{
templateUrl: 'partials/list.html'
})
});
App.controller('ProjectListCtrl', function ($scope) {
$scope.projects = [
{
'title': 'Loook',
'category': 'Kleding app, Logo'
}
];
});
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="fonts/fonts.css">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<section ng-app="App" ng-controller="AppCtrl">
Overzicht
<ng-view></ng-view>
</section>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.16/angular.min.js"></script>
<script src="https://raw.githubusercontent.com/angular/bower-angular-route/master/angular-route.js"></script>
</body>
</html>
The file you linked: https://raw.githubusercontent.com/angular/bower-angular-route/master/angular-route.js. Is for angularjs 1.3.17 (you can see it in the top of the comments). The angular you're using is 1.3.16, there's a conflict there. Beyond that can you paste the actual error you are getting?
As a side note, you can just use this: https://ajax.googleapis.com/ajax/libs/angularjs/1.3.16/angular-route.min.js
I am using the Ionic framework to build an hybrid app with AngularJS and Cordova. Completely new to both AngularJS and JavaScript, this has not been a sweet ride.
Everything was working fine until I decided to re-organize the structure of my app with 1 file per controller/service. So I'm pretty sure that the problem is coming from there, I just can't find how to fix it.
Here's the code:
js/app.js
angular.module('app', ['ionic', 'app.controllers'])
.run(function($ionicPlatform) {
...
})
.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('login', {
url: '/login',
templateUrl: 'templates/login.html',
controller: 'LoginCtrl'
})
...
js/controllers/LoginCtrl.js
angular.module('app.controllers', [])
.controller('LoginCtrl', ['$scope', '$http', '$state'], function($scope, $http, $state) {});
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">
<script src="lib/ionic/js/ionic.bundle.js"></script>
<script src="cordova.js"></script>
<script src="js/app.js"></script>
<script src="js/controllers/LoginCtrl.js"></script>
</head>
<body ng-app="app">
<ion-nav-view></ion-nav-view>
</body>
</html>
Tried many variations of the code above, to no avail.
Any help greatly appreciated...
Edit
I might have made some progress in finding out what the problem is (or just yet another symptom).
In my index.html file, if I switch the order of declaration of the controllers, the one declared right after app.js always gets ignored. This is the error I get when I put them in the order below
Controller 'ionNavBar', required by directive 'ionNavButtons', can't be found!
<script src="lib/ionic/js/ionic.bundle.js"></script>
<script src="cordova.js"></script>
<script src="js/app.js"></script>
<script src="js/controllers/RegisterCtrl.js"></script>
<script src="js/controllers/LoginCtrl.js"></script>
the function of your controller has to be inside the dependencies array.
.controller('LoginCtrl', ['$scope', '$http', '$state', function($scope, $http, $state) {}]);
And i think you also have to inject $ionicPlatform in your run() and config function, like this
.run(["$ionicPlatform", function($ionicPlatform) {
...
}])
.config(["dep1", function(dep1) {}]);