We Keep Coding

How to redirect to new state in Angularjs?

Hi I am developing SPA application in Angularjs. This is my first application in Angularjs. I have two master pages. In first master page there is one tab when i click on that tab i want to redirect to another master page. I am using UI routing in Angularjs. I completed Login and registration modules but these modules should come in second master page but i have it in first master page now.
Below is my index.html first master page file.
<ul id="nav">
<li><a ui-sref="Registration.mainRegistration">{{ 'Registration' | translate }}</a></li>
<li><a ui-sref="Registration.Login">Login</a></li>
<li>{{ 'Careers' | translate }} </li>
<li>{{ 'Offers & Deals' | translate }} </li>
<li>{{ 'Financial' | translate }} </li>
This is the first page loads. There is one Financial tab in the above file. When i click on that tab all my above master page disappears and in that place new master page should come.
Below is my App.js
var app = angular.module('RoslpApp', ['pascalprecht.translate', 'ui.router', 'toastr']);
app.config(function ($stateProvider,
$urlRouterProvider,
$translateProvider,
$translatePartialLoaderProvider) {
$stateProvider
.state('Registration', {
abstract: true,
url: '/Registration',
templateUrl: 'Registration/placeholder.html',
controller: 'MainRegistration'
});
//there are other states also.
I am in the initial stage of development. So May I know this can be achieved? Any help would be appreciated. Thank you.

Your state should not contain abstract: true. Abstract states are usually created when you want a parent view and create nested views.
var app = angular.module('RoslpApp', ['pascalprecht.translate', 'ui.router', 'toastr']);
app.config(function ($stateProvider, $urlRouterProvider, $translateProvider, $translatePartialLoaderProvider) {
$stateProvider
.state('registration', {
url: '/registration',
templateUrl: 'Registration/registration.html',
controller: 'RegistrationController'
})
.state('login', {
url: '/login',
templateUrl: 'Registration/login.html',
controller: 'LoginController'
});
Refer the states in ui-sref as below:
/All css,js and angular references.
<script src="ForgotPassword/ForgotPasswordController.js"></script>
<script src="ForgotPassword/ResetPasswordController.js"></script>
<script src="ForgotPassword/OTPVerificationController.js"></script>
<script src="ForgotPassword/ChangePasswordController.js"></script>
//header
<ul id="nav">
<li><a ui-sref="registration">{{ 'Registration' | translate }}</a></li>
<li><a ui-sref="login">Login</a></li>
<li>{{ 'Careers' | translate }} </li>
<li>{{ 'Offers & Deals' | translate }} </li>
<li>{{ 'Financial' | translate }} </li>
</ul>
<div ui-view></div>
//Footer
Create the registration.html and login.html under Registration folder. Create the controller files RegistrationController and LoginController

Routing of a directive within a directive

I have been having some issues regarding routing of directives within directives.
This is my app.config for ui-routing:
app.config(['$stateProvider', '$urlRouterProvider', '$locationProvider', function ($stateProvider, $urlRouterProvider, $locationProvider) {
$urlRouterProvider.otherwise('/home');
$stateProvider
.state('modules', {
url: '/home',
templateUrl: 'resources/modules/home/templates/module-panel.jsp'
})
.state('customer', {
url: '/customer',
templateUrl: 'resources/modules/customer/templates/customer-panel.jsp'
})
.state('customerProfile', {
url: '/customer/customerProfile',
templateUrl: 'resources/modules/customer/templates/customer-profile.jsp'
})
.state('customerList', {
url: '/customer/customerList',
templateUrl: 'resources/modules/customer/templates/customer-list.jsp'
});
;
/*$locationProvider.html5Mode(true);*/
As far as my directives are concerned, the main directive is "customer" and its sub-directives are "customer-list" and "customer-profile" respectively.
This is the html for "customer" directive:
<span ng-controller="CustomerController as custCtrl">
<div class="sub-menu">
<ul class="menuList">
<li class=""><a class="anime" ui-sref="customerList" ng-class="{active: custCtrl.customerListPanel}" ng-click="custCtrl.openCustomerList()">Customer List</a></li>
<li class=""><a class="anime" ui-sref="customerProfile" ng-class="{active: custCtrl.customerProfilePanel}" ng-click="custCtrl.openCustomerProfile()">Customer Profile</a></li>
</ul>
</div>
<div ng-show="custCtrl.customerListPanel">
<customer-list></customer-list>
</div>
<div ng-show="custCtrl.customerProfilePanel">
<customer-profile></customer-profile>
</div>
</span>
But the problem is, when the control goes to either of "customer-profile" or "customer-list", the content of "customer" are gone. I want "customer" directive to act as the "master" and both of these directives should use the main "customer" template other than their respective html.

TemplateUrl, ngRoute

I have a problem with my code:
var app = angular.module( "myApp", ['ngRoute'] );
app.config( function ( $routeProvider ) {
$routeProvider
.when( '/home', { templateUrl: 'strony/home.html' } )
.when( '/about', { templateUrl: 'strony/about.html' } )
.when( '/contact', { templateUrl: 'strony/contact.html' } )
.otherwise( { redirectTo: '/this' } );
});
app.controller( 'MainCtrl', function ( $scope ) {
});
<div ng-controller="MainCtrl">
<ul>
<li>Home</li>
<li>About Us</li>
<li>Contact Us</li>
</ul>
<div ng-view></div>
</div>
and i have three html positions in folder: 'strony'. If i click on link adress name is changing but on site nothing happenes. Can you help me with this?

Relating routing and navigation styles with AngularJS

Say you have a basic router set up in Angular as follows:
app.config(function($routeProvider) {
$routeProvider.when('/', {
redirectTo: "/news"
}).when('/news', {
templateUrl: "partials/pages/news.html",
controller: "NewsCtrl"
}).when('/about', {
templateUrl: "partials/pages/about.html",
controller: "AboutCtrl"
})
});
And then you have an index.html that looks like:
<nav>
<ul>
<li>news</li>
<li>about</li>
</ul>
</nav>
<section ng-view></section>
What's the best way to add the .active class to the link corresponding to the route? Create a controller for the navigation? Use $rootScope? Etc. I'm having a problem with both those options, as neither seems very clean when I implement it.

I use next code:
<ul class="navigation">
<li ng-class="{active : (current == '/')}"><span>Articles</span></li>
<li ng-class="{active : (current == '/about')}"><span>About</span></li>
<li ng-class="{active : (current == '/contact')}"><span>Contact</span></li>
</ul>
In JS:
app.run(['$location', '$rootScope', function($location, $rootScope, $document) {
$rootScope.$on('$routeChangeSuccess', function(event, current, previous) {
$rootScope.current = $location.path();
});
}]);

Angular.js: ng-show element when $state.current.name is a certain value

I am looking to show a block of HTML only when $state.current.name equals about.list. So far I have the following code but it doesn't seem to be toggling the element depending on the state.
index.html
<nav class="global-navigation">
<ul class="list">
<li class="list-item">
<a class="list-item-link" ui-sref="home">
Home
</a>
</li>
<li class="list-item">
<a class="list-item-link" ui-sref="about">
About
</a>
</li>
<li class="list-item" ng-show="$state.current.name == 'about.list'">
<a class="list-item-link" ui-sref="about.list">
List
</a>
</li>
</ul>
</nav>
app.js
var myApp = angular.module('myApp', ['ui.router'])
.config(['$urlRouterProvider', '$stateProvider',
function($urlRouterProvider, $stateProvider) {
$urlRouterProvider.otherwise('/404.html');
$stateProvider.
// Home
state('home', {
url: '/',
templateUrl: 'partials/_home.html',
controller: 'homeCtrl'
}).
// About
state('about', {
url: '/about',
templateUrl: 'partials/_about.html',
controller: 'aboutCtrl'
}).
// About List
state('about.list', {
url: '/list',
controller: 'aboutCtrl',
templateUrl: 'partials/_about.list.html',
views: {
'list': { templateUrl: 'partials/_about.list.html' }
}
});
}]
);

You can use filters like isState or includedByState.
ng-if="'about.list' | isState" // exactly 'about.list'
ng-if="'about' | includedByState" // works for about and its children about.*

Or
JS
.run(function ($state,$rootScope) {
$rootScope.$state = $state;
})
HTML
data-ng-show="$state.includes('about.list')"

The view (html) doesn't know about the variable $state. It only knows the $scope that is associated with the view.
You can expose the $state variable on the $scope inside the controller that is associated with this view (you might have to inject $state into your controller as well):
$scope.uiRouterState = $state;
Then change the expression in your markup slightly:
<li class="list-item" ng-show="uiRouterState.current.name == 'about.list'">