Develop Reference

AngularJS prevent $urlRouterProvider.otherwise from opening "default" page

I am loading some images from db according to the list item click. Everything works fine but before loading image grid template/state, my ionic framework + angularjs app is opening the default state from $urlRouterProvider.otherwise().
How can I prevent this from happening and directly open image grid state?
list item html:
<ion-list id="fotos-list4" ng-show="albums_list">
<ion-item class="item-icon-left item-icon-right calm" id="fotos-list-item4" ng-model="album_name" ng-repeat="item in albums" item="item" href="#/item/{{item.FOLDER}}" ng-click="open_album(item)">
<i class="icon ion-images"></i>
{{item.FOLDER}}
<i class="icon ion-ios-arrow-forward"></i>
</ion-item>
</ion-list>
image grid html
<div class="row" ng-repeat="image in images" ng-if="$index % 2 === 0">
<div class="col col-50" ng-if="$index < images.length">
<img class="grid-thumb" ng-src="http://website.com/{{images[$index].FILE}}" width="100%" ng-click="showImages($index)" />
</div>
<div class="col col-50" ng-if="$index + 1 < images.length">
<img class="grid-thumb" ng-src="http://website.com/{{images[$index + 1].FILE}}" width="100%" ng-click="showImages($index+1)" />
</div>
</div>
routes.js
angular.module('app.routes', [])
.config(function($stateProvider, $urlRouterProvider) {
// DEFAULT PAGE
.state('cadastreSe', {
url: '/page5',
templateUrl: 'templates/cadastreSe.html',
controller: 'cadastreSeCtrl'
})
// LIST ITEMS
.state('suporte', {
cache: false,
url: '/page7',
templateUrl: 'templates/suporte.html',
controller: 'suporteCtrl'
})
// IMAGE GRID
.state('fotos2', {
cache: false,
url: '/page8',
templateUrl: 'templates/fotos2.html',
controller: 'fotos2Ctrl',
params: {
dataToFotos: false
}
})
$urlRouterProvider.otherwise('/page5')
controller.js
.controller('suporteCtrl', ['$scope', '$http', '$state', function ($scope, $http, $state) {
$scope.open_album = function(item){
var dataToPass = {};
$http.post("http://website.com/select-album-by-name.php", {'album_name': item.FOLDER}).then(function(response){
console.log({'album_name': item.FOLDER});
console.log(response);
console.log(JSON.stringify(response));
dataToPass.item = item;
dataToPass.album = response.data;
$state.go('fotos2', {dataToFotos: dataToPass});
});
}
.controller('fotos2Ctrl', ['$scope', '$state', function ($scope, $state) {
$scope.myGoBack = function(){
$state.go('suporte');
}
if(!$state.params.dataToFotos) {
console.log($state.params.dataToFotos);
alert("Error :(");
}else{
console.log($state.params.dataToFotos);
$scope.images = $state.params.dataToFotos.album;
}

When I am working with complex, or even simple routing in angular/ionic, I like to set up a router module similar to what you have in routes.js. The key is to use the run() function, which will only run when your router module is initialized.
angular.module('myapp.router', [])
.run( [ '$state', '$rootScope', function( $state, $rootScope ) {
// you could set the state directly here
$state.go('mystate');
$rootScope.$on( '$stateChangeStart', function( evt, toState, toParams, fromState, fromParams, options ) {
// or dynamically set the state based on logic here
if( userIsLoggedIn ) {
evt.preventDefault(); // prevent routing
$state.go('user.account'); // go to page
}
});
}]);

Side menu runs but routes file shows nothing

I am trying to make a simple side menu with chats events and settings tab. It runs if i remove the settings and events block from the routes js file but shows nothing.
Snippets are below and here is a link to the entire meteor folder to run on your comp if needed - https://drive.google.com/folderview?id=0B2MX6dSPUGBMTnMtWVVqLVcwNDQ&usp=sharing
I keep getting an error saying this:
=> Meteor server restarted
Started your app. App running at: http://localhost:3000/
Errors prevented startup: While processing files with pbastowski:angular-babel (for target web.browser):
client/scripts/routes.js:20:4: Babel transform error
Your application has errors. Waiting for file change.
routes.js and settings.html respectively
angular
.module('myapp')
.config(config);
function config($stateProvider, $urlRouterProvider) {
$stateProvider
.state('tab', {
url: '/tab',
abstract: true,
templateUrl: 'client/templates/tabs.html'
})
.state('tab.chats', {
url: '/chats',
views: {
'tab-chats': {
templateUrl: 'client/templates/chats.html'
}
}
});
.state('tab.events', {
url: '/events',
views: {
'tab-events': {
templateUrl: 'client/templates/events.html'
}
}
});
.state('tab.settings', {
url: '/settings',
views: {
'tab-settings': {
templateUrl: 'client/templates/settings.html'
}
}
});
//$urlRouterProvider.otherwise('tab/recents');
}
<!-- settings.html, events.html, chats.html are all pretty much the same -->
<ion-view view-title="Settings">
<ion-content>
</ion-content>
</ion-view>
menu.html
<ion-side-menus>
<ion-side-menu-content>
<ion-nav-bar class="bar-stable nav-title-slide-ios7">
<ion-nav-back-button class="button-clear"><i class="icon ion-ios7-arrow-back"></i> Back</ion-nav-back-button>
</ion-nav-bar>
<ion-nav-view name="menuContent" animation="slide-left-right"></ion-nav-view>
</ion-side-menu-content>
<ion-side-menu side="left">
<header class="bar bar-header bar-royal">
<h1 class="title">Left</h1>
</header>
<ion-content class="has-header">
<ion-list>
<ion-item menu-close title="Chats" href="#/app/chats">
Chats
</ion-item>
<ion-item menu-close title="Events" href="#/app/events">
Events
</ion-item>
<ion-item menu-close title="Settings" href="#/app/settings">
Settings
</ion-item>
</ion-list>
</ion-content>
</ion-side-menu>
</ion-side-menus>

It looks like you some semicolons in there that shouldn't be there. The calls to state must be nested, so don't end them with a semicolon unless it's your last one. Updated code:
angular
.module('myapp')
.config(config);
function config($stateProvider, $urlRouterProvider) {
$stateProvider
.state('tab', {
url: '/tab',
abstract: true,
templateUrl: 'client/templates/tabs.html'
})
.state('tab.chats', {
url: '/chats',
views: {
'tab-chats': {
templateUrl: 'client/templates/chats.html'
}
}
})
.state('tab.events', {
url: '/events',
views: {
'tab-events': {
templateUrl: 'client/templates/events.html'
}
}
})
.state('tab.settings', {
url: '/settings',
views: {
'tab-settings': {
templateUrl: 'client/templates/settings.html'
}
}
});
//$urlRouterProvider.otherwise('tab/recents');
}

Images not loading from my json file

I'm trying to load images from my json file into my application. Here is a code pen: http://codepen.io/beefman/pen/QbBdVw
Here's my code:
js:
.controller('photoCtrl', function($scope, $ionicModal, $ionicBackdrop, $ionicScrollDelegate, $ionicSlideBoxDelegate, $http) {
$scope.images = [];
$scope.getImages = function() {
$http.get('https://api.myjson.com/bins/37ia6')
.success(function(data) {
$scope.images = data.images;
})
}
html:
<ion-view view-title="Gallery" align-title="center" ng-controller="photoCtrl" >
<ion-content ng-init="getImages()" class="center" class="has-header padding">
<!-- start Under6/7/8/9s Photos -->
<div class="item item-divider">
<i class="ion-images"></i> Under6/7/8/9s Photos
</div>
<a class="item item-list-detail">
<ion-scroll direction="x">
<img on-hold="onHold()" ng-repeat="image in images" ng-src="{{images.src}}" ng-click="showImages($index)" class="image-list-thumb" />
</ion-scroll>
</a>
</ion-content>
</ion-view>

You were missing brackets and semicolons in your code.
Use a coding environment to check your syntax, or implement JSHint, which is a tool that checks your code.
http://codepen.io/anon/pen/bdjXYE
angular.module('ionicApp', ['ionic'])
.config(function($stateProvider, $urlRouterProvider, $ionicConfigProvider) {
$ionicConfigProvider.tabs.position('bottom');
$ionicConfigProvider.navBar.alignTitle('center');
$stateProvider
.state('tabs', {
url: "/tabs",
abstract: true,
templateUrl: "tabs.html"
})
.state('tabs.announcement', {
url: '/announcement',
views: {
home: {
templateUrl: 'announcement.html',
controller: 'photoCtrl'
}
}
})
$urlRouterProvider.otherwise('/tabs/announcement');
})
.controller("photoCtrl", function($scope, $http) {
$scope.data = [];
// $scope.getImages = function() {
console.log("trying to load JSON");
$http.get('https://api.myjson.com/bins/1jovy')
.success(function(data) {
$scope.data = data;
console.log(data);
})
.error(function(error) {
console.log(error)
});
});

angular controller doesnt get called or instantiated

I am trying to call a function in another controller from a different controller but but I keep getting error
Error: [ng:areq] Argument 'NewCaseCtrl' is not a function, got undefined
My app.js
.state('app', {
url: "/app",
abstract: true,
templateUrl: "templates/menu.html",
controller: 'MainCtrl'
})
.state('app.dashboard', {
url: "/dashboard",
views: {
'menuContent': {
templateUrl: "templates/dashboard.html",
}
}
})
.state('app.new', {
url: "/new_referral",
views: {
'menuContent': {
templateUrl: "templates/new_referral.html",
controller: 'NewCaseCtrl'
}
}
})
my dashboard.html
<ion-view view-title="Dashboard">
<ion-content>
<div class="list card">
<div class="item bar bar-royal">Referral Case Updates</div>
<div class="item item-body">
<div ng-controller="NewCaseCtrl" class="ion-ios-plus-outline" ng-click="createNew()"></div>
</div>
</div>
</ion-content>
</ion-view>
my new_referral.html
<ion-view view-title="New Referral">
<ion-nav-bar class="bar-stable">
<ion-nav-buttons side="left">
<button class="button button-small" ng-click = "goBack()">Cancel</button>
</ion-nav-buttons>
</ion-nav-bar>
<ion-content>
<p> In new referral page
</ion-content>
</ion-view>
my new_controller.js
angular.module('my.controllers')
.controller('NewCaseCtrl', function($scope, $rootScope, $q, $window, $ionicModal, createNewRealEstateCase, $state, $ionicLoading, $cordovaCamera, $cordovaFile, $cordovaFileTransfer, $ionicSlideBoxDelegate) {
$scope.createNew = function() {
console.log("in here build loan application")
createNewRealEstateCase.buildLoanApplication().then(function(data){
$rootScope.states = data.states;
$rootScope.nationalities = data.nationalities;
var hideSheet = $ionicActionSheet.show({
buttons: [
{ text: 'Eligibility Checking' },
{ text: 'Loan Application' }
],
cancelText: 'Cancel',
titleText: 'Type of Service',
cancel: function() {
// add cancel code..
},
buttonClicked: function(index) {
console.log(index)
if(index == 0) {
$scope.eligibility = true;
}
else if(index == 1){
$scope.eligibility = false;
}
$state.go('app.new')
return true;
}
});
$timeout(function() {
hideSheet();
}, 10000);
});
};
});
Why do i get an error why i click on the createNew() div in dashboard.html when i have already initiated ng-controller="NewCaseCtrl"? why doesnt it work as it should?
Thanks any help appreciated

Instead of nesting controllers you can have a service which shares the data & functions for both the controller.

Pass variable onto Ionic Framework page (based on AngularJS)

I have a set of tabs in Ionic framework which show a list of movies:
<script id="tabs.html" type="text/ng-template">
<ion-tabs tabs-style="tabs-icon-top" tabs-type="tabs-positive">
<ion-tab title="Movies" icon="ion-film-marker" href="#/tab/movies">
<ion-nav-view name="movies-tab"></ion-nav-view>
</ion-tab>
</ion-tabs>
</script>
<script id="movies.html" type="text/ng-template">
<ion-view title="'Movies'">
<ion-content has-header="true" padding="false">
<div class="list">
<a ng-repeat="item in movies" href="#/tab/movies/{{item.id}}" class="item item-thumbnail-left item-text-wrap">
<img ng-src="{{ item.image }}">
<h2>{{ item.title }}</h2>
<h4>{{ item.desc }}</h4>
</a>
</div>
</ion-content>
</ion-view>
</script>
Each of the items in the list is linked to #/tab/movies/{{item.id}}, for example, #/tab/movies/27. My movies are defined in the controler
.controller('MyCtrl', function($scope) {
$scope.movies = [
{ id: 1, title: '12 Rounds', desc: 'Detective Danny Fisher discovers his girlfriend has been kidnapped by a ex-con tied to Fisher\'s past, and he\'ll have to successfully complete 12 challenges in order to secure her safe release.', image: ''}
];
My pages are routed as below:
.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('tabs', {
url: "/tab",
abstract: true,
templateUrl: "tabs.html"
})
.state('tabs.movies', {
url: "/movies",
views: {
'movies-tab': {
templateUrl: "movies.html",
controller: 'MyCtrl'
}
}
})
$urlRouterProvider.otherwise("/tab/movies");
})
What I need to do now is when each item on the above list is clicked, it takes it to it's own page, #/tab/movies/{{item.id}}, where I can display things like item.title or item.image, along with a back button to go to the list.
In order to do this, from what I can tell, I need to create a blank ng-template with a placeholder for the information, and then some how pass this information to it when clicked, but I'm not sure how to do this.

In your stateProvider config, you need to add a placeholderFor for the movie id, something like:
.state('tabs.movies', {
url: "/movies/:id",
views: {
'movies-tab': {
templateUrl: "movies.html",
controller: 'MyCtrl'
}
}
})
see https://github.com/angular-ui/ui-router/wiki/URL-Routing#stateparams-service

What are you looking for is probably service/factory where you can store list of movies and then retrieve full list for MyCtrl or just a single movie object for movie page.
angular.module('myAppName')
.factory('MovieService', function () {
return {
MoviesList: [
{movie object}
],
GetAllMovies: function () {
return this.MoviesList;
},
GetMovieById: function (id) {
//iterate MoviesList and return proper movie
}
}
}
that service can be then injected into your controllers
.controller('MyCtrl', function($scope, MoviesService) {
$scope.movies = MoviesService.GetAllMovies();
}
and same goes for a movie view controller:
.controller('ShowMyMovie', function($scope, MoviesService) {
$scope.movie = MoviesService.GetMovieById(//retrieve_id_from_routing_service);
}
then in template for this view you can simply use {{movie.title}} to display informations