Pattern Lab с угловым4

Question

Поскольку Angular 2 или Angular 4 требуют слишком много кода для записи в HTML/TS/CSS по компоненту. Что если я использую Pattern lab с Angular 4?

Я думаю, что использование Pattern Lab потребует больше обслуживания, и нам нужно написать больше кода для поддержки молекул / атомов и этого файла JSON в лаборатории Pattern.

Можете ли вы предложить, что использование Pattern Lab с угловой 2/4 хорошо или нет?

Любая помощь будет оценена!

Answer 1

Это зависит от требований вашего проекта. Если более 2 веб-разработчиков собираются работать над проектом одновременно, это означает, что вам нужно поделиться компонентом пользовательского интерфейса друг с другом. Также его необходимо настроить под разные области дизайна. Атомный дизайн помогает вам создавать минимальную часть вашего UX/UI. Начиная с атомов, молекулы легко превращаются в шаблоны.

Answer 2

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");
         }
    }

})();