[英]Pattern Lab with angular4
由于Angular 2或Angular 4需要在每个Component的HTML/TS/CSS
编写太多代码。 如果我将Pattern lab与Angular 4一起使用怎么办?
我认为使用模式实验室将需要更多维护,我们需要在此编写更多代码来维护分子/原子以及模式实验室中的JSON文件。
你能否建议使用带有角度为2/4的Pattern Lab是好还是不好?
任何帮助将不胜感激!
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");
}
}
})();
这取决于您的项目要求。 如果两个以上的Web开发人员同时开始工作项目,则意味着您需要彼此共享UI组件。 此外,它还需要针对不同的设计区域进行定制。 因此,原子设计可帮助您创建最低限度的UX / UI部分。 从原子,组织开始,分子很容易变成模板。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.