Pattern Lab with angular4

Question

As Angular 2 or Angular 4 requires too much of code to be write in HTML/TS/CSS per Component. What if I use Pattern lab with Angular 4 ?.

What I think is Using Pattern Lab will require more maintenance and we need to write more Code in this to maintain molecules/atoms and that JSON File in Pattern lab.

Can You Please Suggest that Using Pattern Lab with angular 2/4 is Good or not ?

Any Help would appreciated !

Answer 1

1) Yarn install

2) Yarn add angular

3) resources->assets->js->admin->app.module.js

4) app.module.js

      (function () {
                    'use strict';

                    var app = angular.module('App', [
                            'app.S1'
                    ], function ($httpProvider) {
        $httpProvider.defaults.headers.post['Content-Type'] = 'application/x-www-form-          urlencoded';
             $httpProvider.defaults.headers.post['X-Requested-With'] = 'XMLHttpRequest';
        $httpProvider.defaults.headers.put['Content-Type'] = 'application/x-www-form-       urlencoded';
            $httpProvider.defaults.headers.put['X-Requested-With'] = 'XMLHttpRequest';
        }).config(['$qProvider', function ($qProvider) {
            $qProvider.errorOnUnhandledRejections(false);
        }]);
    })();


5) Add dependency in webpackmix



mix.scripts([
         'node_modules/angular/angular.min.js'
],'public/js/main.plugin.js');

mix.babel([
             /*Main module for all*/
    'resources/assets/js/admin/app.module.js',

                /*Controller and services*/
            'resources/assets/js/admin/S1/S1.module.js',
            'resources/assets/js/admin/S1/S1.js',
],'public/js/admin.plugin.js');


6)  make folder in admin with name S1.

7) resources->assets->js->admin->S1->S1.module.js

8) S1.module.js


    (function(){
                'use strict';
                angular.module('app.S1', []);
    })();

9) resources->assets->js->admin->S1->S1.js

10)  S1.js

(function(){
    'use strict';

    angular.module('app.S1')
            .controller('s1Controller', s1Controller);

    /* @ngInject */
    function s1Controller($scope){
        /*jshint validthis: true */
         var vm = this;

         activate();

         function activate(){
             console.log("here call");
         }
    }

})();

Answer 2

It depends on your project requirements. If more than 2 web developer going to work project at the same time, it means you need to share UI component with eachother. Also it needs to be customize for different area of design. So atomic design helps you to create minimal part of your UX/UI. Starting from atoms, organizm, molecules turns to templates easily.