Create a gist now

Instantly share code, notes, and snippets.

What would you like to do?
<div ng-app="wizardApp">
<div ng-controller="WizardSignupController">
<h2>Signup wizard</h2>
<div ui-view></div>
</div>
</div>
<script type="text/javascript" src="/js/vendor/angular-ui-router/release/angular-ui-router.min.js"></script>
<script type="text/javascript">
angular.module('wizardApp', [
'ui.router',
'wizardapp.controllers'
])
.config(['$stateProvider', '$urlRouterProvider', function($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('/wizard/start');
$stateProvider
.state('wizard', {
abstract: true,
url: '/wizard',
template: '<div>\
<div ui-view></div>\
</div>'
})
.state('wizard.start', {
url: '/start',
template: '<h3>Step 1</h3>\
<form ng-submit="">\
<input type="text" ng-model="user.name" placeholder="Your name" />\
<input type="submit" class="button" value="Next" ui-sref="wizard.email"/>\
</form>\
'
})
.state('wizard.email', {
url: '/email',
template: '<h3>Step 2</h3>\
<form ng-submit="">\
<input type="email" ng-model="user.email" placeholder="Your email" />\
<input type="submit" class="button" value="Next" ui-sref="wizard.finish"/>\
</form>\
'
})
.state('wizard.finish', {
url: '/complete',
template: '<h3>Congrats! You signed up!</h3>\
<h5>Your name: {{ user.name }}</h5>\
<h5>Your email: {{ user.email }}</h5>\
<a class="button" ui-sref="wizard.start">Start over</a> \
',
controller: function($scope) {
$scope.signup();
}
})
}]);
angular.module('wizardapp.controllers', [])
.controller('WizardSignupController', ['$scope', '$state', function($scope, $state) {
$scope.user = {};
$scope.signup = function() {
}
}]);
</script>

Must say, You guys rock!!!

Just got into ui-router. This is interesting

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment