I encounter a problem with an angular app that I want to migrate in ionic
I used ui-router for angular and here is my app.js(taken here : https://github.com/tarlepp/angular-sailsjs-boilerplate-frontend/blob/master/src/app/app.js ). I haven't made any changes on this file for my project
Now I want to reuse this file for my project so I replace app.js given by ionic by this one and added
$ionicPlatform.ready(function() {
// Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
// for form inputs)
if(window.cordova && window.cordova.plugins.Keyboard) {
cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
}
if(window.StatusBar) {
StatusBar.styleDefault();
}});
inside app.run
here's my 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>
<!-- 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="frontend">
<ion-pane>
<ion-header-bar class="bar-stable">
<h1 class="title">Ionic Blank Starter</h1>
</ion-header-bar>
<ion-content>
</ion-content>
</ion-pane>
</body>
</html>
I just replace the name of ng-app by frontend and ionic theme isn't charged properly.
I don't know if the problem comes from ui-retour dependencies or something else? I think I'm missing something
Note: I know that I will have to change my html and css files for the project , but for index.html I just have what is provided by ionic and I don't have the ionic tab with 'ionic blank starter' as if I begin a blank ionic project
here's my router changed :
enter code here
(function() {
'use strict';
angular.module('frontend', [
'ionic',
'frontend-templates',
'frontend.core',
'frontend.myportfolio',
'frontend.mysocial',
'frontend.myleads',
'frontend.admin'
]);
angular.module('frontend')
.config([
'$stateProvider', '$locationProvider', '$urlRouterProvider', '$httpProvider', '$sailsSocketProvider',
'$tooltipProvider', 'cfpLoadingBarProvider',
'toastrConfig',
'AccessLevels',
function config(
$stateProvider, $locationProvider, $urlRouterProvider, $httpProvider, $sailsSocketProvider,
$tooltipProvider, cfpLoadingBarProvider,
toastrConfig,
AccessLevels
) {
$httpProvider.defaults.useXDomain = true;
delete $httpProvider.defaults.headers.common['X-Requested-With'];
// Add interceptors for $httpProvider and $sailsSocketProvider
$httpProvider.interceptors.push('AuthInterceptor');
$httpProvider.interceptors.push('ErrorInterceptor');
// Iterate $httpProvider interceptors and add those to $sailsSocketProvider
angular.forEach($httpProvider.interceptors, function iterator(interceptor) {
$sailsSocketProvider.interceptors.push(interceptor);
});
// Set tooltip options
$tooltipProvider.options({
appendToBody: true
});
// Disable spinner from cfpLoadingBar
cfpLoadingBarProvider.includeSpinner = false;
cfpLoadingBarProvider.latencyThreshold = 200;
// Extend default toastr configuration with application specified configuration
angular.extend(
toastrConfig,
{
allowHtml: true,
closeButton: true,
extendedTimeOut: 3000
}
);
// Yeah we wanna to use HTML5 urls!
$locationProvider
.html5Mode({
enabled: true,
requireBase: false
})
.hashPrefix('!')
;
// Routes that needs authenticated user
$stateProvider
.state('profile', {
abstract: true,
template: '<ui-view/>',
data: {
access: AccessLevels.user
}
})
$urlRouterProvider.otherwise('/myportfolio/mydatabase');
}
])
;
angular.module('frontend')
.run([
'$rootScope', '$state', '$injector','$ionicPlatform',
'editableOptions',
'AuthService',
function run(
$rootScope, $state, $injector,$ionicPlatform,
editableOptions,
AuthService
) {
$rootScope.$on('$stateChangeStart', function stateChangeStart(event, toState) {
if (toState.url=='/login' || toState.url=='/register' ) {
$rootScope.myStyle = {'background-color':'#333'}
$rootScope.headerIsloaded = false;
$rootScope.sidebarIsloaded = false;
}else{
$rootScope.myStyle = {};
$rootScope.headerIsloaded = true;
$rootScope.sidebarIsloaded = true
};
if (!AuthService.authorize(toState.data.access)) {
event.preventDefault();
console.log(toState.data.access)
$state.go('auth.login');
}
});
// Check for state change errors.
$rootScope.$on('$stateChangeError', function stateChangeError(event, toState, toParams, fromState, fromParams, error) {
event.preventDefault();
$injector.get('MessageService')
.error('Error loading the page');
$state.get('error').error = {
event: event,
toState: toState,
toParams: toParams,
fromState: fromState,
fromParams: fromParams,
error: error
};
return $state.go('error');
});
//bout de code ionic
$ionicPlatform.ready(function() {
// Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
// for form inputs)
if(window.cordova && window.cordova.plugins.Keyboard) {
cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
}
if(window.StatusBar) {
StatusBar.styleDefault();
}
});
}
])
;
}());
Aren't you missing the markup for ui.router to inject your state views into?
<ion-view view-title="your-view">
</ion-view>
if you create a new app with
ionic start myApp
it defaults to the tab template which includes the following body in it's index.html
<body ng-app="starter">
<!--
The nav bar that will be updated as we navigate between views.
-->
<ion-nav-bar class="bar-stable">
<ion-nav-back-button>
</ion-nav-back-button>
</ion-nav-bar>
<!--
The views will be rendered in the <ion-nav-view> directive below
Templates are in the /templates folder (but you could also
have templates inline in this html file if you'd like).
-->
<ion-nav-view></ion-nav-view>
</body>
here the ion-nav-view is what allows ui.router to insert its views
Related
I have a simple list of items and want to have a button in the header that shows and hides a delete button next to each list item. My header and content are made up of separate views.
After much reading, it seems a controller is attached to a view rather than a state, so I need to have a separate controller for each view (one controller for the header and one controller for the content). As I can't share variables between controllers, what is the best way to have a button in one view (header.html) show/hide buttons in a list in a different view (content.html)?
My HTML is below:
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">
-->
<!--For users deploying their apps to Windows 8.1 or Android Gingerbread, platformOverrided.js
will inject platform-specific code from the /merges folder -->
<script src="js/platformOverrides.js"></script>
<!-- ionic/angularjs js -->
<script src="lib/ionic/js/ionic.bundle.js"></script>
<script src="Scripts/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/controllers.js"></script>
<script src="js/services.js"></script>
</head>
<body ng-app="starter">
<ion-view view-title="Playlists">
<div ui-view="header"></div>
<div ui-view="content"></div>
</ion-view>
</body>
</html>
header.html
<ion-header-bar class="bar-positive">
<div class="buttons">
<button class="button button-icon icon ion-ios-minus-outline"
ng-click="data.showDelete = !data.showDelete"></button>
</div>
<h1 class="title">my test app</h1>
</ion-header-bar>
content.html
<ion-content class="has-header has-footer" overflow-scroll="true">
<ion-list show-delete="data.showDelete">
<ion-item ng-repeat="movie in movies" href="#/home/{{movie.id}}">
{{movie.title}}
<ion-delete-button class="ion-minus-circled"
ng-click="onItemDelete(movie)">
</ion-delete-button>
<ion-option-button class="button-assertive" ui-sref="editMovie({id:movie.id})">Edit</ion-option-button>
</ion-item>
</ion-list>
</ion-content>
and my js is below.....
app.js
angular.module('starter', ['ionic', 'ngResource', 'starter.controllers', 'starter.services'])
.run(function($ionicPlatform) {
$ionicPlatform.ready(function() {
// Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
// for form inputs)
if (cordova.platformId === "ios" && window.cordova && window.cordova.plugins.Keyboard) {
cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
cordova.plugins.Keyboard.disableScroll(true);
}
if (window.StatusBar) {
// org.apache.cordova.statusbar required
StatusBar.styleDefault();
}
});
})
.config(function ($stateProvider, $urlRouterProvider) {
// if none of the above states are matched, use this as the fallback
$urlRouterProvider.otherwise('/');
$stateProvider
.state('home', {
url: '/',
views: {
'header': {
templateUrl: 'templates/header.html',
controller: 'headerCtrl'
},
'content': {
templateUrl: 'templates/content.html',
controller: 'contentCtrl'
},
'footer': {
templateUrl: 'templates/footer.html'
}
}
});
});
controllers.js
angular.module('starter.controllers', [])
.controller('headerCtrl', function ($scope) {
$scope.showDelete = function () {
$scope.data.showDelete = !$scope.data.showDelete;
};
})
.controller('contentCtrl', function ($scope, $state, $stateParams, Movie) {
// populate list withg all items from database
$scope.movies = Movie.query();
// handle delete button click
$scope.onItemDelete = function (movie) {
$scope.movies.splice($scope.movies.indexOf(movie), 1);
movie.$delete();
$scope.data.showDelete = false;
};
});
You actually can share variables between controllers, by using what Angular calls a "service".
AngularJS: How can I pass variables between controllers?
I am trying to write up a button to display in ionic based on some condition that I want to evaluate in a service. I need to let the service know who called it. So I want to send a parameter to the service. But I see that whatever parameter I pass from my template html, the variable is not visible in the service. Sample code below.
angular.module('starter', ['ionic'])
.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();
}
});
})
.service('testService', function TestService() {
return {
testFunc: function(param) {
console.log("Hello"); //This prints correctly
console.log(param); //This prints as undefined
if (param == 1) return false;
else
return true;
}
}
})
.controller('testController', ['testService',
function(testService) {
console.log("Hello world");
testService.testFunc();
}
])
<!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>
</head>
<body ng-app="starter" ng-controller="testController">
<ion-pane>
<ion-header-bar class="bar-stable">
<h1 class="title">Ionic Blank Starter</h1>
</ion-header-bar>
<ion-content>
<button class="button button-full button-positive icon ion-thumbsup" ng-if="testService.testFunc(10)"> Test</button>
</ion-content>
</ion-pane>
</body>
</html>
Has anyone come across this situation and what is the way to get it working?
Thanks,
Srini
You made two mistakes or missunderstood how to use a service in your html code.
Inside your controller you already call a service function with testService.testFunc(). And because you don't pass a parameter here you wan't receive some paramter in your service.
.controller('testController', ['testService', function(testService) {
console.log("Hello world");
testService.testFunc();
}])
In your html code the following line calls the function testService.testFunc(10). The problem is, your $scope doesn't know such a function. The result will be ng-if="undefined". Your service will be never called.
<button ng-if="testService.testFunc(10)"> Test</button>
So, there are two easy solution get this works.
You can add the service to your $scope with
.controller('testController', function($scope, testService) {
console.log("Hello world");
$scope.testService = testService;
})
or you define a new $scope function inside your controller and call the service inside this function.
$scope.myFunc = function(param){
return testService.testFunc(param);
}
and
<button ng-if="myFunc(10)"> Test</button>
Try
.controller('testController', ['$scope', 'testService',
function($scope, testService) {
console.log("Hello world");
$scope.testService = testService;
}
])
I'm working with angular for the first time and having some trouble showing some dynamic information in my index.html file. Everything inside the ng-view tag is working great.
When a user authenticates, a global variable with user information is put into the $rootScope and into a cookie. I've tried to access to $rootScope in the index by doing something like {{$rootScope.globals.currentUser.username}} but it doesn't work. So considering the code below, how can I show the logged user information in my index.html?
I have tried creating a controller in my app.js and putting the ng-controller on the body. While this works, it doesn't refresh when the user logout (required a page refresh to update the app controller). The same happens after the user login (it requires a whole page refresh for the information to appear).
Code to set cookie and the object in $rootScope.
function SetCredentials(username, password, token) {
$rootScope.globals = {
currentUser: {
username: username,
token: token
}
};
$http.defaults.headers.common['Authorization'] = 'Bearer ' + token;
$cookies.put('globals', JSON.stringify($rootScope.globals));
}
I also have the following index.html file. As you can see, i have set the {{$rootScope.globals.currentUser.username}} but nothing shows after the user is logged in
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<base href="/" />
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>My App</title>
<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
<!-- css references -->
</head>
<body class="hold-transition skin-blue sidebar-mini">
<div class="wrapper">
<!-- Main Header -->
<header class="main-header">
<!-- Header Navbar -->
<nav class="navbar navbar-static-top" role="navigation">
<!-- Sidebar toggle button-->
<a href="#" class="sidebar-toggle" data-toggle="offcanvas" role="button">
<span class="sr-only">Toggle navigation</span>
</a>
<!-- Navbar Right Menu -->
<div class="navbar-custom-menu">
{{$rootScope.globals.currentUser.username}}
</div>
</nav>
</header>
<!-- Content Wrapper. Contains page content -->
<div class="content-wrapper">
<ng-view></ng-view>
</div>
<!-- /.content-wrapper -->
<!-- Main Footer -->
<footer class="main-footer">
<!-- To the right -->
<div class="pull-right hidden-xs">
something here
</div>
<!-- Default to the left -->
<strong>Copyright © 2016 NPF.</strong> All rights reserved.
</footer>
</div>
<!-- ./wrapper -->
<!-- REQUIRED JS SCRIPTS -->
<!-- jQuery 2.2.0 -->
<script src="Scripts/jquery-2.2.3.js"></script>
<script src="Scripts/bootstrap.js"></script>
<script src="Scripts/app.min.js"></script>
<script src="Scripts/linq.min.js"></script>
<script src="scripts/angular/angular.min.js"></script>
<script src="scripts/angular/angular-route.min.js"></script>
<script src="scripts/angular/angular-resource.min.js"></script>
<script src="scripts/angular/angular-cookies.min.js"></script>
<!-- application scripts -->
<!-- Main app -->
<script src="app/app.js"></script>
<!-- controllers -->
<script src="app/home/home.controller.js"></script>
<!-- services -->
<script src="app/services/authentication.service.js"></script>
<script src="app/services/user.service.js"></script>
</body>
</html>
My app file, is as follows
(function () {
'use strict';
angular
.module('myApp', ['ngRoute', 'ngCookies', 'treeControl'])
.constant("appSettings",
{
serverPath: "http://localhost:64789/",
webApiPath: "http://localhost:64789/api/"
})
.config(config)
.run(run);
config.$inject = ['$routeProvider', '$locationProvider'];
function config($routeProvider, $locationProvider) {
$locationProvider.html5Mode({
enabled: true,
});
$routeProvider
.when('/', {
controller: 'HomeController',
templateUrl: 'app/home/home.html',
controllerAs: 'viewModel'
})
.when('/login', {
controller: 'LoginController',
templateUrl: 'app/login/login.html',
controllerAs: 'viewModel'
})
.when('/register', {
controller: 'RegisterController',
templateUrl: 'app/register/register.html',
controllerAs: 'viewModel'
})
.otherwise({ redirectTo: '/login' });
};
run.$inject = ['$rootScope', '$location', '$cookies', '$http'];
function run($rootScope, $location, $cookies, $http) {
// keep user logged in after page refresh
try {
$rootScope.globals = JSON.parse($cookies.get('globals'));
}
catch (err) {
$rootScope.globals = {};
}
if ($rootScope.globals && $rootScope.globals.currentUser) {
$http.defaults.headers.common['Authorization'] = 'Bearer ' + $rootScope.globals.currentUser.token;
}
//config.headers.Authorization = 'Bearer ' + authData.token;
$rootScope.$on('$locationChangeStart', function (event, next, current) {
// redirect to login page if not logged in and trying to access a restricted page
var restrictedPage = $.inArray($location.path(), ['/login', '/register', '/gds']) === -1;
try {
var loggedIn = $rootScope.globals.currentUser;
}
catch (err) {
}
if (restrictedPage && !loggedIn) {
$location.path('/login');
}
});
}})();
As mentioned in my comment $rootScope is not required in HTML markup expressions.
But if you forgot to add a controller to your HTML outside of ng-view that can also cause that the variable is undefined. (No controller = no $scope)
I have registered for hardware back button event registerBackButtonAction inside my controller and using $destroy event to unregister the event. But the event is not getting called when I navigate to different page (state). What am I missing?
.controller('HomeCtrl', function($scope, $ionicPlatform, $location, $rootScope, $http) {
// Register hardware back button
var deregister = $ionicPlatform.registerBackButtonAction(function (event) {
navigator.app.exitApp();
return;
}, 100);
console.log('scope on');
$scope.$on('$destroy', function() {
console.log('destroy called');
deregister();
})
})
In console I dont see destroy called. Please help me fix this.
Update:
In the browser when I navigate from Home to Login the elements of Home still exist in the browser. I guess that is the reason why destroy is not getting called. So the question is should I fire the event manually or should be Home page be actually destroyed when I move to Login?
Here is my 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="http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet">
<link href="css/ionic.app.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="cordova.js"></script>
<!-- Push notification -->
<script src="js/PushNotification.js"></script>
<!-- Geo location -->
<script type="text/javascript" src="http://maps.google.com/maps/api/js?v=3&sensor=false&language=en"></script>
<!-- app js -->
<script src="js/app.js"></script>
<script src="js/controllers.js"></script>
</head>
<body ng-app="starter" ng-controller="AppCtrl">
<ion-nav-view></ion-nav-view>
</body>
</html>
The page are loaded as part of state via template in app.js:
.state('app.login', {
url: "/login",
views: {
'menuContent': {
templateUrl: "templates/login.html",
controller: 'LoginCtrl'
}
}
})
.state('app.home', {
url: "/home",
views: {
'menuContent': {
templateUrl: "templates/home.html",
controller: 'HomeCtrl'
}
}
})
Thanks for the help guys. In my framework the elements of first loaded page are not removed hence $destroy is not called. The workaround is to use the event $ionicView.leave to deregister, so instead of
$scope.$on('$destroy', deregister);
use:
$scope.$on('$ionicView.leave', deregister);
Complete code:
.controller('HomeCtrl', function($scope, $ionicPlatform, $location, $rootScope, $http) {
// Register hardware back button
var deregister = $ionicPlatform.registerBackButtonAction(function (event) {
navigator.app.exitApp();
return;
}, 100);
$scope.$on('$ionicView.leave', deregister);
})
I was supposed to wrap deregister() in an anonymous function. Then it worked for me.
var deregister = $ionicPlatform.registerBackButtonAction(function () {
$state.go('app.start');
}, 100);
$scope.$on('$ionicView.leave', function () {
deregister();
});
This Work for me
var deregister = null;
$scope.$on('$ionicView.enter', function(){
deregister = $ionicPlatform.registerBackButtonAction(
function () {
navigator.Backbutton.goHome(function() {
console.log('hidden');
}, function() {
navigator.app.exitaApp();
});
}, 100
);
})
$scope.$on('$ionicView.leave', function () {
deregister();
});
I am trying to incorporate $firebaseAuth into my Ionic project. I used a sample example, logging in with Twitter (auth.$authWithOAuthPopup('twitter')), from the Firebase website and incorporated it into my Ionic Framework. The code is shown below.
I am using the following versions (everything is up to date as of today):
firebase 2.0.4
angularfire 0.9.1
ionic 1.0.0-beta.14 "magnesium-mongoose"
Clicking on the button "Login" correctly opens the popup window and I can login. After that, however, in the Ionic project nothing has changed, while actually being logged in. When I refresh my browser, then it shows my displayname and it also notifies me that I am correctly logged in.
I had the same "stickyness" when trying to incorporate the ui-router authentication of Firebase, also copying the code from the website. Moreover, I had to refresh for changes to be processed.
Why is there this delay? Isn't firebase supposed to be real-time? My guess is that it has to do something with the settings of Ionic, since using the Angularfire-seed (without Ionic) works perfectly fine. Or maybe its something else?
app.js
// Ionic Starter App
// angular.module is a global place for creating, registering and retrieving Angular modules
// 'starter' is the name of this angular module example (also set in a <body> attribute in index.html)
// the 2nd parameter is an array of 'requires'
// 'starter.services' is found in services.js
// 'starter.controllers' is found in controllers.js
angular.module('starter', ['ionic', 'firebase', 'starter.controllers', 'starter.services'])
.run(function($ionicPlatform) {
$ionicPlatform.ready(function() {
// Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
// for form inputs)
if (window.cordova && window.cordova.plugins.Keyboard) {
cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
}
if (window.StatusBar) {
// org.apache.cordova.statusbar required
StatusBar.styleDefault();
}
});
})
.config(function($stateProvider, $urlRouterProvider) {
// Ionic uses AngularUI Router which uses the concept of states
// Learn more here: https://github.com/angular-ui/ui-router
// Set up the various states which the app can be in.
// Each state's controller can be found in controllers.js
$stateProvider
// setup an abstract state for the tabs directive
.state('tab', {
url: "/tab",
abstract: true,
templateUrl: "templates/tabs.html"
})
// Each tab has its own nav history stack:
.state('tab.dash', {
url: '/dash',
views: {
'tab-dash': {
templateUrl: 'templates/tab-dash.html',
controller: 'DashCtrl'
}
}
})
.state('tab.chats', {
url: '/chats',
views: {
'tab-chats': {
templateUrl: 'templates/tab-chats.html',
controller: 'ChatsCtrl'
}
}
})
.state('tab.chat-detail', {
url: '/chats/:chatId',
views: {
'tab-chats': {
templateUrl: 'templates/chat-detail.html',
controller: 'ChatDetailCtrl'
}
}
})
.state('tab.friends', {
url: '/friends',
views: {
'tab-friends': {
templateUrl: 'templates/tab-friends.html',
controller: 'FriendsCtrl'
}
}
})
.state('tab.friend-detail', {
url: '/friend/:friendId',
views: {
'tab-friends': {
templateUrl: 'templates/friend-detail.html',
controller: 'FriendDetailCtrl'
}
}
})
.state('tab.account', {
url: '/account',
views: {
'tab-account': {
templateUrl: 'templates/tab-account.html',
controller: 'AccountCtrl'
}
}
});
// if none of the above states are matched, use this as the fallback
$urlRouterProvider.otherwise('/tab/dash');
});
services.js
angular.module('starter.services', [])
// let's create a re-usable factory that generates the $firebaseAuth instance
.factory("Auth", ["$firebaseAuth", function($firebaseAuth) {
var ref = new Firebase("https://cloakit.firebaseio.com/");
return $firebaseAuth(ref);
}])
controllers.js
// other controllers
// AccountCtrl
.controller("AccountCtrl", ["$scope", "Auth", function($scope, Auth) {
$scope.settings = {
enableFriends: true
};
$scope.auth = Auth;
$scope.user = $scope.auth.$getAuth();
}]);
tab-account.html
<ion-view view-title="Account">
<ion-content>
<ion-list>
<ion-item class="item-toggle">
Enable Friends
<label class="toggle">
<input type="checkbox" ng-model="settings.enableFriends">
<div class="track">
<div class="handle"></div>
</div>
</label>
</ion-item>
<ion-item>
<div ng-show="user">
<p>Hello, {{ user.twitter.displayName }}</p>
<button ng-click="auth.$unauth()">Logout</button>
</div>
<div ng-hide="user">
<p>Welcome, please log in.</p>
<button ng-click="auth.$authWithOAuthPopup('twitter')">Login</button>
</div>
</ion-item>
</ion-list>
</ion-content>
</ion-view>
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>
<!-- firebase js -->
<script src="lib/firebase/firebase.js"></script>
<script src="lib/firebase/angularfire/angularfire.min.js"></script>
<!-- loading bar -->
<script src="lib/angular-loading-bar/src/loading-bar.js"></script>
<link href='lib/angular-loading-bar/src/loading-bar.css' rel='stylesheet' />
<!-- cordova script (this will be a 404 during development) -->
<script src="lib/ngCordova/dist/ng-cordova.js"></script>
<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="starter">
<!--
The nav bar that will be updated as we navigate between views.
-->
<ion-nav-bar class="bar-stable">
<ion-nav-back-button>
</ion-nav-back-button>
</ion-nav-bar>
<!--
The views will be rendered in the <ion-nav-view> directive below
Templates are in the /templates folder (but you could also
have templates inline in this html file if you'd like).
-->
<ion-nav-view></ion-nav-view>
</body>
</html>
You might want to take a look at $onAuth.
$onAuth Listens for changes to the client’s authentication state.
So your code would look like:
$scope.auth = Auth;
var authData = $scope.auth.$getAuth();
$scope.auth.$onAuth(function(authData) {
if (authData) {
$scope.user = authData
} else {
console.error("Could not retrieve user");
}
});
You may need to run a $scope.$apply(). I'm thinking you won't since $firebase should be within Angulars digest cycle, but I would throw one in there if it still doesn't work just to be sure you don't need it