Develop Reference

Ionic AngularJS redirect if already authenticated

I have an Ionic app that uses ng-token-auth. It uses 2 ng-token-auth configs for 2 sets of users with different authentication apis.
app.js
$stateProvider
.state('home', {
url: '/home',
templateUrl: 'templates/home/home.html',
controller: 'HomeCtrl'
})
.state('employee', {
url: "/employee",
templateUrl: "templates/employee.html",
controller: 'EmployeeCtrl'
})
.state('employer', {
url: "/employer",
templateUrl: "templates/employer.html",
controller: 'EmployerCtrl'
})
$urlRouterProvider.otherwise('/home');
HomeCtrl
$scope.$on('$ionicView.beforeEnter', function(){});
I currently put the authentication checking in a $ionicView.beforeEnter but it flashes the home screen and then redirects to the correct page. Is there a better place to put this. Thanks

U can use "resolve" from the state-provider..
edit => employer-state to home-state
.state('home', {
url: "/home",
templateUrl: "templates/home/home.html",
controller: 'HomeCtrl',
resolve: {
//check if user is remembered & redirect to next state
}
})

I am using Angular UI Router to switch between pages(home,news,gallery,...) but my jquery code doesnt work

This is my AngularJS code
angular
.module('portfolio', [
'ui.router'
])
.config(['$urlRouterProvider','$stateProvider', function($urlRouterProvider,$stateProvider){
$urlRouterProvider.otherwise('/');
$stateProvider
.state('home', {
url: '/',
templateUrl: '../home.php'
})
.state('news', {
url: '/news',
templateUrl: '../newsload.php'
})
.state('gallery', {
url: '/gallery',
templateUrl: '../gallery.php'
})
.state('contact', {
url: '/contact',
templateUrl: '../contact.php'
})
.state('about', {
url: '/about',
templateUrl: '../about.php'
})
}])
on page News i have some jquery animations, tranisitions, etc,.. and it doesnt work because (i think) jquery loads before angular even populates my site...
The thing is I dont even know if AngularJS is the right way for what I want to achieve, I just saw it online and was impressed on how fast it is.
What should I do?

AngularJS : Updating scope in ng-repeat

I have an Angular app with several nested controllers and views. I implemented infinite scrolling in it closely based on this tutorial for ngInfiniteScrolling: http://binarymuse.github.io/ngInfiniteScroll/demo_async.html
So I have a service that loads items into an array at $scope.content.items. Then there's an ng-repeat element that shows each result.
$scope.content = new Content()
$scope.content.loadMore( $scope.currentStream, 2 ) // this part is actually called in the HTML, but while debugging I've just done it in the controller
Now I want to implement search, and instead of making another search page, just have the items load in place of the current list of items. Basically to take the place of $scope.content.items.
So I built an identical controller, but now calling my search API. I use ng-change to see if someone has typed in the search box, then within the function that calls, do
$scope.search = function() {
$scope.content = new Search()
$scope.content.load( $scope.query )
}
I can see that this works in the console, that it replaces $scope.content.items, by doing this in the browser console:
var scope = angular.element($('[ng-controller=HomeController]')).scope()
scope.content.items
That shows me the array of objects I expect in each case (either before triggering ng-change="search()" or after). But the page itself does not update. It just shows the stuff from the Content() service.
Likewise, if I replace the above two lines from my controller with these below, it shows the content from the Search() service:
$scope.content = new Search()
$scope.content.load( 'thom' )
Long story short, I feel like the services and API work, but the page is not updating when I change the $scope.content.items array used by ng-repeat.
Here is the HTML
<div class="panel panel-item" ng-repeat="item in content.items" ng-hide="hideItem">
<h2 ng-hide=" item.stream == 'read' " data-ng-bind="item.title"></h2>
<a ng-click="openReaderModal( item )" class="cursor-pointer" ng-show=" item.stream == 'read' ">
<h2 data-ng-bind="item.title"></h2>
</a>
// ...
<div class="clearfix"></div>
</div>

Fixed it, somehow. Here is my routes from app.config() before:
$stateProvider
// ...
.state( 'app', {
url: '/app',
templateUrl: 'app/views/app.html',
controller: 'HomeController'
})
.state( 'app.home', {
url: '/main',
templateUrl: 'app/views/home.html',
controller: 'HomeController'
})
.state( 'app.profile', {
url: '/profile',
templateUrl: 'app/views/profile.html',
controller: 'ProfileController'
})
.state( 'app.read', {
url: '/read',
templateUrl: 'app/views/stream-content.html',
controller: 'HomeController'
})
.state( 'app.watch', {
url: '/watch',
templateUrl: 'app/views/stream-content.html',
controller: 'HomeController'
})
.state( 'app.listen', {
url: '/listen',
templateUrl: 'app/views/stream-content.html',
controller: 'HomeController'
})
And here's after:
$stateProvider
// ...
.state( 'app', {
url: '/app',
templateUrl: 'app/views/app.html',
controller: 'HomeController'
})
.state( 'app.home', {
url: '/main',
templateUrl: 'app/views/home.html'
})
.state( 'app.profile', {
url: '/profile',
templateUrl: 'app/views/profile.html',
controller: 'ProfileController'
})
.state( 'app.read', {
url: '/read',
templateUrl: 'app/views/stream-content.html'
})
.state( 'app.watch', {
url: '/watch',
templateUrl: 'app/views/stream-content.html'
})
.state( 'app.listen', {
url: '/listen',
templateUrl: 'app/views/stream-content.html'
})
And it works. If anyone can provide an explanation, I'll credit them the answer.

The routing in angular works like this.
When we provide a controller for the $stateProvider its actually considered as a new constructor (new keyword as in java) thus the data is re-initiated to defaults.
The new constructor will be the child to itself, to access the parent controller one can use the $parent

How to do a page redirect page in angularjs?

I am trying to redirect my page to different page in my app.
The problem is that all the url settings are all in my app.js with ui-route and I need the redirect happens inside my controller.
so app.js.
app.config(function($stateProvider) {
$stateProvider
.state('first', {
url: '/first',
templateUrl: 'first.html'
})
.state('second', {
url: '/second',
templateUrl: 'second.html'
})
})
my controller file
app.controller.('firstCtrl' , function(){
$scope.clickThis=function() {
//need to redirect to second page...
}
})
How do I redirect to different page inside my controller?

app.controller.('firstCtrl' ,["$scope", "$state", function($scope, $state){
$scope.clickThis=function() {
$state.go("second");
}
}]);

Stop a common template from being reloaded

I have an Angular application that depends on Angular ui-router. This application has multiple pages which share a common template such as the navbar:
var app = angular.module('app', ['ngSanitize', 'ngResource', 'ngRoute', 'ui.router'])
.config(['$urlRouterProvider', '$stateProvider', ($urlRouterProvider, $stateProvider) => {
$urlRouterProvider.otherwise("/index");
$stateProvider
.state('index', {
url: "/index",
views: {
'navbar': {
templateUrl: 'Views/Partials/navbar.cshtml',
controller: 'App.Controllers.NavbarController'
},
'content': {
templateUrl: 'Views/index.cshtml',
controller: 'App.Controllers.IndexController'
}
}
})
.state('settings', {
url: "/settings",
views: {
'navbar': {
templateUrl: 'Views/Partials/navbar.cshtml',
controller: 'App.Controllers.NavbarController'
},
'content': {
templateUrl: 'Views/settings.cshtml',
controller: 'App.Controllers.SettingsController'
}
}
});
}]);
Both '/index' and '/settings' share the same template 'Views/Partials/navbar.cshtml'. Upon testing, i found out, that every time a "page" is loaded for an url, all the views in it are reloaded.
Is it possible to avoid reloading the navbar, if it has been previously loaded already?

You should be able to extract the navbar into a parent state of your existing states. This way the navbar only loads when the parent state is entered and you should be able to change child states that share this parent without affecting it.
While there are better organised ways to do this, my quick and dirty way would be to rename the states you have to withnav.index and withnav.settings. Then remove the navbar view from them and add the following state.
$stateProvider
.state('withnav', {
abstract: true,
views: {
'navbar': {
templateUrl: 'Views/Partials/navbar.cshtml',
controller: 'App.Controllers.NavbarController'
}
}
});