Angular JS animation with UI router - javascript

In my application i use animation and ui-route
my app route like this
$stateProvider
.state('app', {
abstract: true,
url: '/{lang:(?:he|en)}/',
template: '<ui-view/>'
}).state('app.home', {
url: '',
templateUrl: "Assets/app/templates/home.html",
controller: 'homeController'
})
.state('app.activity', {
url: "activity",
templateUrl: "Assets/app/templates/gallery.html",
controller: 'galleryController'
})
The animate work just when i moved from language he to language en,
but when i moving to one of the other page (inside the language) like from home to activity page the animation does not work.
How can i make the animation to work either for "sub pages"
thanks

Related

Delaying AngularJS route change until load page

I use library "ui-router" in angular. I have problem in route page when I route to other page till when load controller last page show and at the same time 2 page show in one page and when load page, last page remove.
How to solve problem delay ?
app.config([
"$stateProvider", "$urlRouterProvider",
function (stateProvider, urlRouterProvider) {
urlRouterProvider.otherwise("/dashboard");
stateProvider
.state("Dashboard",
{
url: "/dashboard",
templateUrl: "/Modules/Dashboard/Partials/dashboard.html",
controller: "DashboardCtrl as self"
})
.state("Deposit",
{
url: "/dashboard/desposit",
templateUrl: "/Modules/Dashboard/Partials/deposit.html",
controller: "DepositCtrl as self"
})
.state("PeymentRequest",
{
url: "/dashboard/peymentRequest",
templateUrl: "/Modules/Dashboard/Partials/peymentRequest.html",
controller: "PeymentRequestCtrl as self"
})
.state("ChangeBroker",
{
url: "/dashboard/changeBroker",
templateUrl: "/Modules/Dashboard/Partials/changeBroker.html",
controller: "ChangeBrokerCtrl as self"
});
}
]);

Can you switch between ui-router views without switching tabs?

I am using Ionic and Angular 1 (with ui-router). Let's say I have 2 tabs:
+----+ +-------+
|HOME| |PROFILE|
+----+ +-------+
This is the important part: there's a link within the HOME tab to /profile... but, I do not want it to automatically switch to the PROFILE tab when I click that link... I want to continue with the navigation stack within the HOME tab.
The usual approach using ui-router to have multiple nested states is something like this (some unnecessary things for this example purposefully omitted):
$stateProvider
.state('app', {
abstract: true,
template: require('templates/app.html'),
})
.state('app.home', {
template: require('templates/home.html'),
url: '/home',
controller: 'HomeCtrl',
views: {
// a bunch of child views that can only belong to this state
}
})
.state('app.profile', {
template: require('templates/profile.html'),
url: '/profile',
controller: 'ProfileCtrl',
views: {
// a bunch of child views that can only belong to this state
}
});
But what if I want to navigate to app.profile inside of app.home, instead of being forced to change tabs?
One options is to make all my tabs abstract and then declare <tab>.<state> for every possible state (using a loop), but this seems like it requires a lot of possibly unnecessary overhead:
var abstractStates = [
{
name: 'home',
url: '/home',
controller: 'HomeCtrl',
template: require('templates/home.html')
},
{
name: 'profile',
url: '/profile',
controller: 'ProfileCtrl',
template: require('templates/profile.html')
}
];
abstractStates.forEach(function(state) {
$stateProvider.state(state.name, _.omit(state, ['name']);
abstractStates.forEach(function(nestedState) {
$stateProvider.state([state.name, nestedState.name].join('.'), _.omit(nestedStates, ['abstract', 'name']));
});
});
Is there a better way to accomplish this?

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?

How to remove Ionic Framework tabs bar+ buttons and simplify routing?

I have an existing app with tabs bar and buttons at the bottom.
I hope to remove tabs completely and simplify the routing. Is it possible?
Im not looking for css or ionic appearence changes like suggested here. This merely hides the bar but routing isnt simplified.
My current routing:
.state('tab', {
url: '/tab', //anyway to remove this?
abstract: true,
templateUrl: 'templates/tabs.html'
})
.state('login', {
url: '/login',
templateUrl: 'templates/login.html',
controller: 'AuthCtrl'
})
.state('tab.posts', { //ideally no more tabs.something
url: '/posts',
views: {
'tab-posts': {
templateUrl: 'templates/tab-posts.html',
controller: 'PostsCtrl'}}
})
.state('tab.newpost', {
url: '/newpost',
views: {
'tab-posts': {
templateUrl: 'templates/tab-newpost.html',
controller: 'NavCtrl'}}
})
.state('tab.posts.view', {
url: '/posts/:postId',
views: {
'tab-posts#tab': {
templateUrl: 'templates/tab-showpost.html',
controller: 'PostViewCtrl'}}
})
I hope to simplify routing by removing the tab abstract state. Cos right now, it can get rather confusing with the view names and all.
I removed tabs state but app returned blank. Same for deleting the html file URL line.
When I revamped the naming convention, the program no longer works (blank screen) but yet devtools doesnt throw any errors.

AngularJS $stateProvider loads parent but not child template

I just started migrating to AngularJS and I'm already having problems with the $stateProvider from the angular-ui/ui-router framework. This is what I have so far:
angular
.module('testApp', ['ui.router'])
.config(function($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise("/index/home");
$stateProvider
.state('index', {
abstract: true,
url: "/index",
template: "parent"
})
.state('index.home', {
url: "/home",
template: "child"
})
})
.controller("MainController", function() {
})
Now, running this script redirects me to http://example.com/#/index/home but it only displays the parent string on the page. The child string is not being shown. From my understanding this should load the first template because we are on the /#/index domain part and then the second because we are on a nested page /#/index/home.
Can someone help me and explain why this is not working as intended?
In your template for the parent you need another <div ui-view></div> in order to render child states.
If you want multiple nested views, you can have multiple ui-view in your parent template. You just have to name them. For example,
parent template:
<h1>parent</h1>
<div ui-view="child1"></div>
<div ui-view="child2"></div>
And you define the child states as follows:
$stateProvider
.state('index', {
abstract: true,
url: "/index",
template: "parent"
})
.state('index.home', {
url: "/home",
views: {
'child1': {
templateURL: "child1.html"
}
}
})
.state('index.home2', {
url: '/home2',
views: {
'child2': {
templateURL: 'child2.html'
}
}
})
*note I used templateURL instead of template. Assuming your app has modular file structure.

Categories

Resources