AngularJS demo 2

<html>

  <head>

    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.13/angular-ui-router.min.js"></script>

</head>

<body ng-app="app">

<div id="header" ui-view="header"></div>
<div id="main" ui-view="main"></div>
<div id="footer" ui-view="footer"></div>

<script src="app.base.js"></script>
<script src="app.config.js"></script>
<script src="app.run.js"></script>

<script src="DashboardController.js"></script>
<script src="RegisterBaseController.js"></script>
<script src="RegisterProfileController.js"></script>
<script src="NavigationController.js"></script>


</body>
</html>

(function( window, document, angular, undefined ) {
    "use strict";

    angular.config = {
        file_path     : '/',
        default_state : '/dashboard'
    };

    angular
        .module('app', [
            'ui.router'
        ]);

})( window, document, angular );

(function( angular ){
    "use strict";

    var CONFIG = angular.config || {};

    function ApplicationConfig ($stateProvider, $locationProvider, $urlRouterProvider, $httpProvider) {

        $locationProvider.html5Mode(false).hashPrefix('!');

        $urlRouterProvider
            .when('/register', ['$state', function ($state) {
                $state.go('.app.register.identification');
            }])
            .otherwise(CONFIG.default_state);

        $stateProvider
            .state('app',{
                url     : '/',
                views   : {
                    'header' : {
                        templateUrl : 'layout.header.html'
                    },
                    'main': {
                        templateUrl : 'layout.main.html'
                    },
                    'footer': {
                        templateUrl : 'layout.footer.html'
                    }
                }
            })
            .state('app.dashboard', {
                url         : 'dashboard',
                views       : {
                    'main@': {
                        templateUrl : 'dashboard.index.html',
                        controller  : 'DashboardController',
                        controllerAs: 'vm'
                    }
                }
            })
            .state('app.register', {
                url         : 'register',
                views       : {
                    'main@': {
                        templateUrl : 'register.index.html',
                        controller  : 'RegisterBaseController',
                        controllerAs: 'vm'
                    }
                }
            })
            .state('app.register.identification', {
                url         : '/identification',
                views       : {
                    'registerView@app.register' : {
                        templateUrl : 'register.identification.html',
                        controller  : 'RegisterProfileController',
                        controllerAs: 'vm'
                    }
                }
            });
            
    }

    ApplicationConfig.$inject = ['$stateProvider', '$locationProvider', '$urlRouterProvider', '$httpProvider'];

    angular
        .module('app')
        .config(ApplicationConfig);

})( angular );

(function( window, document, angular, undefined ) {
    "use strict";

    var onChangeConfig = ['$rootScope', '$state',
        function ($rootScope, $state) {
            $rootScope.$on('$stateChangeStart', function (evt, toState) {
                var key,
                    redirectUrl;

                key = toState.name;

                switch (key) {
                    case 'app.register':
                        redirectUrl = 'app.register.identification';
                        break;
                    default:
                        break;
                }

                if (typeof redirectUrl !== 'undefined') {
                    evt.preventDefault();
                    $state.go(redirectUrl);
                }
            });
        }
    ];

    angular
        .module('app')
        .run(onChangeConfig)

})( window, document, angular );

<hr/>
Page title: {{vm.title}}
<hr/>

(function( angular ){
    "use strict";

    function DashboardController () {
        var vm = this;

        vm.title = 'Dashboard';

        return vm;
    }

    angular
        .module('app')
        .controller('DashboardController', DashboardController);

})( angular );

Footer

<nav ng-controller="NavigationController as vm">
    <ul>
        <li ng-repeat="menu in vm.navigation" ui-sref-active="active">
            <a ui-sref="{{menu.link}}">{{menu.name}}</a>
        </li>
    </ul>
</nav>

main.html

(function( angular ){
    "use strict";

    function NavigationController () {
        var vm = this;

        vm.navigation = [
            {
                id      : 1,
                link    : '.dashboard',
                name    : 'Dashboard'
            },
            {
                id      : 2,
                link    : '.register',
                name    : 'Register'
            }
        ];

        return vm;
    }

    angular
        .module('app')
        .controller('NavigationController', NavigationController);

})( angular );


<table>
    <tr>
        <td><label for="names" class="field-label">Your Personal Names</label></td>
        <td><input type="text" name="names" id="names" class="gui-input" placeholder="Enter name..." ng-model="vm.formData.name"></td>
    </tr>
    <tr>
        <td><label for="email" class="field-label">Your Email Address</label></td>
        <td><input type="email" name="email" id="email" class="gui-input" placeholder="example@domain.com..." ng-model="vm.formData.email"></td>
    </tr>
</table>


<hr/>

<div class="menu">
    <ul class="nav nav-pills">
        <li ng-repeat="step in vm.steps">
            <a ui-sref-active="active" ui-sref="{{step.link}}">{{step.name}}</a>
        </li>
    </ul>
</div>

<hr/>

<div id="register-views" ui-view="registerView"></div>

<hr/>

<b>Form data in parent:</b> <code>{{vm.formData}}</code>

<hr/>

(function( angular ){
    "use strict";

    function RegisterBaseController ($http, $state) {
        var vm = this;

        vm.formData = {};
        vm.steps = [
            {
                id      : 1,
                link    : '.identification',
                name    : 'Identification'
            },
            {
                id      : 2,
                link    : '.interests',
                name    : 'Personal interests'
            },
            {
                id      : 3,
                link    : '.subscribe',
                name    : 'Subscribe'
            }
        ];

        return vm;
    }

    RegisterBaseController.$inject = ['$http','$state'];

    angular
        .module('app')
        .controller('RegisterBaseController', RegisterBaseController);

})( angular );

(function( angular ){

    function RegisterProfileController($scope, $http, $stateParams) {
        var vm = this;

        vm.title = 'Uw profiel';

        //JavaScript error:
        // vm.formData undefined...

        vm.formData.name = 'Your Name';
        vm.formData.email = 'Your E-mail';

        return vm;
    }

    RegisterProfileController.$inject = ['$scope','$http', '$stateParams'];

    angular
        .module('app')
        .controller('RegisterProfileController', RegisterProfileController);

})( angular );