<div ng-app="formApp">
<div ui-view />
</div>
<script type="text/ng-template" id="form/step1.html">
Step 1 -
What animal do you prefer ?
<button ng-click="
step1Ctrl.selectAnimal('doge');
">
Doge
</button>
<button ng-click="
step1Ctrl.selectAnimal('cate');
">
Cate
</button>
</script>
<script type="text/ng-template" id="form/step2.html">
Step 2 -
What color do you like your {{step2Ctrl.formRegistry.animal}}?
<button ng-click="
step2Ctrl.selectColor('white');
">
White
</button>
<button ng-click="
step2Ctrl.selectColor('black');
">
Black
</button>
</script>
<script type="text/ng-template" id="form/step3.html">
Step 3 -
{{step3Ctrl.result()}}
</script>
var formApp = angular.module('formApp', ["ui.router"]);
formApp.config(function($stateProvider, $urlRouterProvider){
$stateProvider
.state('step1', {
url: '/step1',
templateUrl: "form/step1.html",
controller: 'step1Controller as step1Ctrl',
})
.state('step2', {
url: '/step2',
templateUrl: "form/step2.html",
controller: 'step2Controller as step2Ctrl',
})
.state('step3', {
url: '/step3',
templateUrl: "form/step3.html",
controller: 'step3Controller as step3Ctrl',
})
;
$urlRouterProvider.otherwise('/step1');
});
formApp.service('formRegistry', function(){
this.animal = undefined;
this.color = undefined;
});
formApp.controller('step1Controller',
function($state, formRegistry){
this.selectAnimal= function(animal){
formRegistry.animal = animal;
$state.go('step2');
}
})
.controller('step2Controller',
function($state, formRegistry){
this.formRegistry = formRegistry;
this.selectColor= function(color){
formRegistry.color = color;
$state.go('step3');
}
})
.controller('step3Controller', function(formRegistry){
this.result = function(){
if(formRegistry.animal === 'doge'){
if (formRegistry.color === 'white'){
return 'wow. white doge. such noble. so lithgside. much puer. wow'
}
return 'wow. black doge. such scary. many darkness. so scare. wow'
}
if (formRegistry.color === 'white'){
return 'white cate wisdom - “In the middle of a world that has always been a bit mad, a cat walks with confidence.” '
}
return 'Black cate. Pernicious. 13. Bad luck';
}
});
This Pen doesn't use any external CSS resources.