Ionic template does not work on mobile - javascript

I have been making an app in AngularJS with Angular-ui-router based on Ionic Framework. It works perfect on the desktop in every web browser, but it does not show anything on my mobile (after build I run it on 2 devices). The problem is that it doesn't load template inside ui-view.
I have got an index.html file, the body section is below (in head section there is everything included):
<body ng-app="starter">
<div ui-view=""></div>
</body>
And the part of app.js - run and config.
angular.module('starter', ['ionic', 'ngStorage', 'ngAnimate', 'naif.base64', 'ui.router'])
.run(function($ionicPlatform, $rootScope, $location) {
$ionicPlatform.ready(function() {
if (window.cordova && window.cordova.plugins.Keyboard) {
cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
}
if (window.StatusBar) {
StatusBar.styleDefault();
}
});
history = [];
$rootScope.$on('$routeChangeSuccess', function() {
history.push($location.$$path);
});
$rootScope.back = function () {
history.back();
};
})
.config(function($stateProvider, $urlRouterProvider) {
"use strict";
$stateProvider
.state('connectionCheck', {
url: '/',
controller: ['$scope', '$location', '$http',
function($scope, $location, $http) {
$http.get('http://pingurl.com')
.success(function(data) {
jdata = data;
if (data.status === "success") {
$location.path('/login');
}else{
$location.path('/error');
}
})
.error(function() {
$location.path('/error');
});
$scope.retry = function() {
$location.path('/');
};
}
]
})
.state('login', {
url: '/login',
templateUrl: 'login.html'
})
.state('main', {
url: '/main',
templateUrl: 'main.html',
controller: ['$scope', '$location', '$localStorage',
function($scope, $location, $localStorage) {
$scope.username = $localStorage.username;
$scope.token = $localStorage.token;
$scope.email = $localStorage.email;
$scope.goToAlerts = function() {
$location.path('/alerts');
};
$scope.goToSettings = function() {
$location.path('/settings');
};
$scope.goToLocation = function() {
$location.path('/location');
};
$scope.goToSymptoms = function() {
$location.path('/symptoms');
};
$scope.getClass = function(path) {
if ($location.path().substr(0, path.length) == path) {
return "active"
} else {
return ""
}
};
}
]
})
.state('error', {
url: '/error',
templateUrl: 'error.html'
})
.state('register', {
url: '/register',
templateUrl: 'register.html',
})
.state('push', {
url: '/push',
templateUrl: 'push.html',
})
.state('alerts', {
url: '/alerts',
templateUrl: 'alerts.html'
})
.state('newSymptom', {
url: '/newSymptom',
templateUrl: 'newsymptom.html'
})
.state('symptoms', {
url: '/symptoms',
templateUrl: 'symptoms.html'
})
.state('newAlert', {
url: '/newalert',
templateUrl: 'newalert.html'
})
.state('settings', {
url: '/settings',
templateUrl: 'settings.html'
})
.state('location', {
url: '/location',
templateUrl: 'location.html'
});
$urlRouterProvider.otherwise('/');
}).
//some controllers goes here
What I have already checked/tried to do?
I put example content to index.html - it worked.
I tried chanage the name of ui-view and add them in templateURL values of each state.
I changed the .html files to exlude error in them, but it did not helped.
Can anyone more experienced with Ionic/Angular give me a hint what is wrong here?

I seem to notice that it's often due to the modules you're loading in. So It's likely in this line.
angular.module('starter', ['ionic', 'ngStorage', 'ngAnimate', 'naif.base64', 'ui.router'])
Try checking each module by making sure:
You added it to your index.html
it's being called correctly
it's up to date
You can figure out by removing each, one at a time and then seeing if it works on the device.
Also know that AngularJS out of the box uses AngularUI Router and this uses a thing called routing for views. The UI-Router uses a thing called states that is the most used but the unofficial way for AngularJS and Ionic uses their own view state system that is basically the same thing as the UI-Router just with the Ionic namespace. So that is something you need to look up or you may find yourself running into a lot of walls during you builds because you are calling ui.router and I bet it's what's confusing your app, so remove it.

Related

Add a code into app.js

I'm new to Javascript. I'm building an app using Ionic.
First I created app using ionic start MyAPPOne tabs
Then I installed Cordova Text-to-SpeechPlugin
This is my 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', '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 && 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) {
// 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.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');
});
I want to add this code into my app.js.
angular.module('starter', ['ionic'])
.controller('AppCtrl', function($scope) {
$scope.data = {
speechText: ''
};
$scope.recognizedText = '';
$scope.speakText = function() {
TTS.speak({
text: $scope.data.speechText,
locale: 'en-GB',
rate: 1.5
}, function () {
// Do Something after success
}, function (reason) {
// Handle the error case
});
};
$scope.record = function() {
var recognition = new SpeechRecognition();
recognition.onresult = function(event) {
if (event.results.length > 0) {
$scope.recognizedText = event.results[0][0].transcript;
$scope.$apply()
}
};
recognition.start();
};
});
So how can I do it? I tried to merge this by pasted this code in app.js but when I checked this via ionic serve the app didn't show tabs. How can I merge this?
Replace this line
angular.module('starter', ['ionic'])
with
angular.module('starter.controllers')

Config issues with Factories in app.js & stateProvider

I am trying to set up a factory in my app.js of my ionic app. I have the following code that should work however my state provider is throwing me off and Im not sure where my states should be. I was suggested to use this app.js code to get my factory working however it leaves no room for my routes. I have tried different variations of the following with no lck. Thnk you in advance.
(function() {
'use strict';
angular
.module('starter', []) // In your real application you should put your dependencies.. ['ng...']
//.run(runFunction) // Just commenting to make it WORK HERE
.controller('MainCtrl', MainCtrl)
.factory('myService', myService);
// Just commenting to make it work here..
/*function runFunction($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 && window.cordova.plugins.Keyboard) {
cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
cordova.plugins.Keyboard.disableScroll(true);
}
if (window.StatusBar) {
// org.apache.cordova.statusbar required
StatusBar.styleDefault();
}
})
}*/
MainCtrl.$inject = ['$scope', 'myService'];
function MainCtrl($scope, myService) {
function getSuccess(response) {
$scope.items = response.data;
}
function getError(response) {
console.log('Of course an error since the url is a invalid, but it should work with a valid url!');
}
myService.getAll()
.then(getSuccess)
.catch(getError);
}
function myService($http) {
var factory = {
getAll: getAll
};
return factory;
function getAll() {
return $http.get("url"); // it -> should be your URL
}
}
})();
// dont know where the config goes?
.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
// setup an abstract state for the tabs directive
.state('tab', {
url: '/tab',
abstract: true,
templateUrl: 'templates/tabs.html'
})
.state('login', {
url: "/login",
cache: false,
controller: 'AccountCtrl',
templateUrl: "templates/login.html"
})
.state('list', {
url: "/list",
cache: false,
controller: 'ListCtrl',
templateUrl: "templates/list.html"
})
$urlRouterProvider.otherwise('/tab/dash');
});
I don't see you have included ui.router in your app. To work with $stateProvider you should place ui.router module in your depenencies, and should include angular-ui-router.js files in your project.
angular
.module('starter', ['ui.router']) // In your real application you should put your dependencies.. ['ng...']
//.run(runFunction) // Just commenting to make it WORK HERE
.controller('MainCtrl', MainCtrl)
.factory('myService', myService);
ui.router is the module that provides you $stateProvider.
After this .config can go along with module like .controller and .factory. Config is also defined on you app:
angular.module('starter', ['ui.router'])
.config(configFn) //configFn is the function you have in your .config
.controller('MainCtrl', MainCtrl)
.factory('myService', myService);

How to move controller source from app.js to desired folder location in angular project

I need help on moving controller from app.js to desired folder.
My Folder structure look likes the blw
---app
--home
--home.html
--homecontroller.js
--about
--contact
--app.html
--app.js
---asset
---index.html
I have kept my controller source in my app.js. But i planned to move the specific controller into the corresponding root folder. Lets say i have home controller code in app.js. Now i want to move it to homecontroller.js which placed in home folder. I tried that. but it doesn't work for me. However it works when i keep that in app.js.
Can you help me to move it to desired root.
my app.js is
var app = angular.module('TrailApp', ['ui.router'])
app.config(function($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('/home/part1');
$stateProvider
.state('base', {
abstract: true,
url: '',
templateUrl: 'app/app.html'
})
.state('home', {
url: '/home',
parent: 'base',
templateUrl: 'app/home/home.html',
controller: 'homectrl'
})
.state('home.part1', {
url: '/part1',
templateUrl: 'app/home/part1.html',
//controller: 'homectrl'
})
.state('home.part2', {
url: '/part2',
templateUrl: 'app/home/part2.html',
//controller: 'homectrl'
})
.state('about', {
url: '/about',
parent: 'base',
templateUrl: 'app/about/about.html',
//controller: 'aboutctrl'
})
});
//This below code should be moved to homecontroller.js
app.controller('homectrl', ['$scope', '$location', '$rootScope',
function($scope, $location, $rootScope) {
$scope.custom = false;
$scope.actionBtn = function(event) {
$scope.custom = true;
};
}
]);
You can get your answer here
In homecontroller.js
angular.module('TrailApp').controller('homectrl', ['$scope', '$location', '$rootScope',
function($scope, $location, $rootScope) {
$scope.custom = false;
$scope.actionBtn = function(event) {
$scope.custom = true;
};
}
]);
You have to inject that controller module in app.js. Like
var myApp=angular.module('myApp', ['controllers']);
This is your controller.js in other folder
var controllers = angular.module('controllers', []);

Resource no refresh when i use slow connection o 3G angular js

I 'm creating a mobile application based on angularjs . To load a list , I'm making a call to an API Rest. I am using a resource for doing this. When I 'm connected to the wifi it works perfectly , but when I use ยท g, the recuerso not call the API and always returns the previous value.
How I can refresh the application each time you call?
SERVICES.JS
.factory('Exercises', function($resource) {
// localhost: Local
// 79.148.230.240: server
return $resource('http://79.148.230.240:3000/wodapp/users/:idUser/exercises/:idExercise', {
idUser: '55357c898aa778b657adafb4',
idExercise: '#_id'
}, {
update: {
method: 'PUT'
}
});
});
CONTROLLERS
.controller('ExerciseController', function($q, $scope, $state, Exercises) {
// reload exercises every time when we enter in the controller
Exercises.query(function(data) {
$scope.exercises = data;
});
// refresh the list of exercises
$scope.doRefresh = function() {
// reload exercises
Exercises.query().$promise.then(function(data) {
$scope.exercises = data;
}, function(error) {
console.log('error');
});
// control refresh element
$scope.$broadcast('scroll.refreshComplete');
$scope.$apply();
}
// create a new execersie template
$scope.newExercise = function() {
$state.go('newExercise');
};
// delete a exercise
$scope.deleteExercise = function(i) {
// we access to the element using index param
var exerciseDelete = $scope.exercises[i];
// delete exercise calling Rest API and later remove to the scope
exerciseDelete.$delete(function() {
$scope.exercises.splice(i, 1);
});
};
})
APP.js
angular.module('wodapp', ['ionic', 'ngResource', 'wodapp.controllers','wodapp.services'])
// Run
.run(function($ionicPlatform) {
$ionicPlatform.ready(function() {
// ionic is loaded
});
})
// Config
.config(function($stateProvider, $urlRouterProvider, $ionicConfigProvider) {
$stateProvider
.state('slide', {
url: '/',
templateUrl: 'templates/slides.html',
controller: 'SlideController'
})
.state('login', {
url: '/login',
templateUrl: 'templates/login.html',
controller: 'LoginController'
})
.state('dashboard', {
url: '/dashboard',
templateUrl: 'templates/dashboard.html',
controller: 'DashboardController'
})
.state('exercise', {
url: '/exercise',
templateUrl: 'templates/exercises.html',
controller: 'ExerciseController'
})
.state('newExercise',{
url: '/newExercise',
templateUrl: 'templates/newExercise.html',
controller: 'NewExerciseController'
});
$urlRouterProvider.otherwise('/');
});
Inject $ionicView and then:
$ioniView.enter(function(){
Exercises.query(function(data) {
$scope.exercises = data;
});
})

AngularJS class ng-scope is not being added

I"m following the Angular Tutorials and I see in their example that ng-scope is added to each element with a directive.
https://docs.angularjs.org/guide/scope
But my own code does NOT add the ng-scope for each directive, every thing seems to work from rendering the data, but for some reason this CSS class is not added.
My Application has started life from a Yeoman.io starter project so I'm not sure if something in that project has caused the issue.
https://github.com/diegonetto/generator-ionic
Ive added the www code as a .zip in my dropbox:
https://www.dropbox.com/s/hn36080isu83vw5/www.zip
Tutorial Example
My Example
HTML
<h1 style="margin-top: 50px;">Scope Heirachy</h1>
<div class="show-scope-demo">
<div ng-controller="ParentGreetController">
Hello {{name}}!
</div>
<div ng-controller="ChildListController">
<ol>
<li ng-repeat="name in names">{{name}} from {{department}}</li>
</ol>
</div>
</div>
Controller.JS
var moduleTest = angular.module('test', []);
moduleTest
.controller('ParentGreetController', ['$scope', '$rootScope', function ($scope, $rootScope)
{
$scope.name = 'World';
$rootScope.department = 'Angular';
}])
// We will access name which is in both scopes
.controller('ChildListController', ['$scope', function ($scope)
{
$scope.names = ['Igor', 'Misko', 'Vojta'];
}]);
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.controllers' is found in controllers.js
angular.module('starter', ['ionic', 'starter.controllers', 'invoice1', 'invoice2', 'invoice3', 'test', 'myService'])
.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) {
$stateProvider
.state('app', {
url: "/app",
abstract: true,
templateUrl: "templates/menu.html",
controller: 'AppCtrl'
})
.state('app.search', {
url: "/search",
views: {
'menuContent': {
templateUrl: "templates/search.html"
}
}
})
.state('app.browse', {
url: "/browse",
views: {
'menuContent': {
templateUrl: "templates/browse.html"
}
}
})
.state('app.playlists', {
url: "/playlists",
views: {
'menuContent': {
templateUrl: "templates/playlists.html",
controller: 'PlaylistsCtrl'
}
}
})
.state('app.scopeHeirachy', {
url: "/scopeHeirachy",
views: {
'menuContent': {
templateUrl: "templates/sample/scopeHeirachy.html"
}
}
})
;
// if none of the above states are matched, use this as the fallback
$urlRouterProvider.otherwise('/app/playlists');
});
I have tried setting debugInfoEnabled on & off using the following
.config(function($stateProvider, $urlRouterProvider, $compileProvider) {
$compileProvider.debugInfoEnabled(false);
});
and
.config(function($stateProvider, $urlRouterProvider, $compileProvider) {
$compileProvider.debugInfoEnabled(true);
});
Check if the following lines of code are added in your javascript. This usually removes debug info i.e. Ng-scope. This is usually added to improve performance in production code.
$compileprovider.debuginfoenabled(false)
ionic-angular.js has overridden the addClass function.
Here is the snippet.
jqLite.prototype.addClass = function(cssClasses) {
var x, y, cssClass, el, splitClasses, existingClasses;
if (cssClasses && cssClasses != 'ng-scope' && cssClasses != 'ng-isolate-scope') {
//............
Because of the if condition ng-scope and ng-isolate-scope classes are not getting added even if the debuggingInfo is enabled.

Categories