/angularjs/

AngularJS - Example App - Part 5

2014-07-08 00:07:42

1. As a user I want see wizard with some form. _2. Form should be generated based on JSON._

Add new module to our app

var louisApp = angular.module('louisApp',
    [
        //..
        'LouisApp.module.wizard',
        //..
    ])

Add new item in route

louisApp.config(function ($routeProvider) {

    $routeProvider.
        //..
        when('/module/wizard', {templateUrl: 'app/tpl/page.tpl.html', controller: 'PageCtrl'}).
        otherwise({redirectTo: '/dashboard'});
});

Add new controller

.controller('PageCtrl', function ($scope, $http) {
        $scope.pageTitle = "Wizard";
    })

Create wizard directive

angular.module('LouisApp.module.wizard', [])

    .directive('wizardWidget', function () {
        return {
            restrict: 'E',
            scope: {},
            controller: function ($scope, $http) {

                $scope.showCard = 0;
                $scope.wizardForm = {};

                $http({method: 'GET', url: 'app/mockdata/wizard.json'}).
                    success(function (data) {
                        $scope.wizard = data;
                        $scope.wizard[0].isShow = true;
                    });

                $scope.show = function (card) {

                    $scope.wizard.forEach(function (card) {
                        card.isShow = false;
                    });

                    card.isShow = true;
                }
            },
            templateUrl: 'app/module/wizard-main-widget.tpl.html'
        };
    })
;

Template for wizard directive


<section in="" ng-repeat='"card' ng-show='"card.isShow"' wizard&quot;="">
<h1>{{card.title}}</h1>
<div card.fields&quot;="" class='"form-group"' in="" ng-repeat='"field'>
<label>{{field.label}}</label>
<input class='"form-control"/' ng-model='"wizardForm[field.name]"' type='"{{field.type}}"'/>
</div>
</section>

<a btn-default&quot;="" btn-sm="" class='"btn' in="" ng-click='"show(card)"' ng-repeat='"card' wizard&quot;="">
<span class='"glyphicon' glyphicon-tasks&quot;=""></span>
    Show card {{$index}}
</a>

<pre>{{wizardForm | json}}</pre>

Add directive to page


<div class='"row"'>
<div action-top-bar&quot;="" class='"col-xs-12'>
<h1>{{pageTitle}}</h1>
</div>
</div>

<div class='"row"'>
<div class='"col-xs-12"'>
<wizard-widget></wizard-widget>
</div>
</div>

Mock data

[
    {
        "id": 1,
        "title": "Wizard Step 1",
        "fields": [
            {
                "type": "text",
                "name": "username",
                "label": "User name"
            },
            {
                "type": "password",
                "name": "address",
                "label": "Password"
            }
        ]
    },
    {
        "id": 2,
        "title": "Wizard Step 2",
        "fields": [
            {
                "type": "text",
                "name": "city",
                "label": "City"
            },
            {
                "type": "text",
                "name": "street",
                "label": "Street"
            }
        ]
    },
    {
        "id": 3,
        "title": "Wizard Step 3",
        "fields": [
            {
                "type": "text",
                "name": "lorem",
                "label": "Lorem"
            },
            {
                "type": "text",
                "name": "ipsum",
                "label": "Ipsum"
            }
        ]
    }
]

GitHub and example