组件系统技术栈 -- Angular

Posted on | In |

Angular组件库

文档说明

技术中心前端组-组件系统是采用 AngularJS+Gulp 搭建的项目，该文档主要针对AngularJS如何实现我们的业务代码进行讲解，加深对项目构建的认识，当项目出错时也方便快速定位错误的地方。

Git仓库

目录树

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
├── gulp
├── gulpfile.js
├── package.json
├── src
│   ├── 404.html
│   ├── app
│   │   ├── app.js
│   │   ├── pages
│   │   │   ├── date
│   │   │   │   ├── date.js
│   │   │   │   └── daterangepicker
│   │   │   │       ├── daterangepicker.controller.js
│   │   │   │       ├── daterangepicker.html
│   │   │   │       └── daterangepicker.module.js
│   │   │   ├── input
│   │   │   │   ├── input.module.js
│   │   │   │   └── select
│   │   │   │       ├── select.autoComplete.html
│   │   │   │       ├── select.combobox.html
│   │   │   │       ├── select.controller.js
│   │   │   │       ├── select.filters.js
│   │   │   │       ├── select.html
│   │   │   │       └── select.module.js
│   │   │   ├── pages.module.js
│   │   │   ├── progress
│   │   │   │   ├── progress.module.js
│   │   │   │   └── progressbar
│   │   │   │       ├── progressbar.controller.js
│   │   │   │       ├── progressbar.html
│   │   │   │       └── progressbar.module.js
│   │   │   ├── slider
│   │   │   │   ├── basic
│   │   │   │   │   ├── basic.controller.js
│   │   │   │   │   ├── basic.html
│   │   │   │   │   └── basic.module.js
│   │   │   │   └── slider.module.js
│   │   │   ├── table
│   │   │   │   ├── basic
│   │   │   │   │   ├── basic.controller.js
│   │   │   │   │   ├── basic.html
│   │   │   │   │   └── basic.module.js
│   │   │   │   ├── paging
│   │   │   │   │   ├── paging.controller.js
│   │   │   │   │   ├── paging.html
│   │   │   │   │   └── paging.module.js
│   │   │   │   └── table.module.js
│   │   │   ├── ui
│   │   │   │   ├── basic
│   │   │   │   │   ├── basic.controller.js
│   │   │   │   │   ├── basic.html
│   │   │   │   │   └── basic.module.js
│   │   │   │   └── ui.module.js
│   │   │   ├── upload
│   │   │   │   ├── upload
│   │   │   │   │   ├── upload.controller.js
│   │   │   │   │   ├── upload.html
│   │   │   │   │   └── upload.module.js
│   │   │   │   └── upload.module.js
│   │   │   ├── validation
│   │   │   │   ├── basic
│   │   │   │   │   ├── basic.controller.js
│   │   │   │   │   ├── basic.html
│   │   │   │   │   └── basic.module.js
│   │   │   │   └── validation.js
│   │   │   └── window
│   │   │       ├── modal
│   │   │       │   ├── modal.controller.js
│   │   │       │   ├── modal.html
│   │   │       │   └── modal.module.js
│   │   │       ├── tooltip
│   │   │       │   ├── tooltip.controller.js
│   │   │       │   ├── tooltip.html
│   │   │       │   └── tooltip.module.js
│   │   │       └── window.module.js
│   │   └── theme
│   ├── assets
│   │   ├── fonts
│   │   ├── img
│   │   └── pictures
│   ├── auth.html
│   ├── index.html                        // 入口页面
│   ├── reg.html
│   └── sass
└── yarn.lock

静态页面index.html

1
2
3
4
5
6
7
<!DOCTYPE html>
<html lang="en" ng-app="BlurAdmin"> // ng-app 指令用于告诉 AngularJS 应用当前这个元素是根元素
<head> </head>
<body>
    <div ui-view autoscroll="true" autoscroll-body-top></div>
</body>
</html>

入口文件 app.js

实现与 ng-app 关联起来的模块 BlurAdmin ,BlurAdmin 是一个模块，当启动AngularJS时，就会去匹配这种对应关系，发现一致时则开始执行里面的内容。一个模块可以将其他模块引进来，就如以下 [] 中包含好几个字符串，这些字符串就是一个个module 。

src / app / app.js ：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
'use strict';
angular.module('BlurAdmin', [  
    'ngAnimate',               
    'ui.bootstrap-slider',
    '720kb.datepicker',
    'daterangepicker',
    'ui.bootstrap',
    'ui.sortable',
    'ui.router',
    'ui.select',
    'ngTouch',
    'toastr',
    'hljs',
    'BlurAdmin.theme',
    'BlurAdmin.pages'
]);

子模块

我们以其中一个例子为例，比如 daterangepicker 模块，路径为 ‘src / app / pages /data’ 下，这个例子实现日期组件，即系统左侧菜单的“日期组件”。

步骤

  • 新建module BlurAdmin.pages.date (ps:这个module需要注入到BlurAdmin，后面我们将会提到)。
  • 我们会有一级菜单和二级菜单，以下BlurAdmin.pages.date为一级菜单，[]中引进来的module为二级菜单。

src / app / pages / data / date.js ：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
(function() {
'use strict';
angular.module('BlurAdmin.pages.date', ['BlurAdmin.pages.date.daterangepicker'])
        .config(routeConfig);
    /** @ngInject */
    function routeConfig($stateProvider) {
        $stateProvider
            .state('date', {
                url: '/date',
                template: '<ui-view  autoscroll="true" autoscroll-body-top></ui-view>',
                abstract: true,
                title: '日期组件',               // 菜单名称
                sidebarMeta: {
                    icon: 'ion-calendar',      // 菜单icon
                    order: 8                   // 菜单位置
                }
            });
    }
})();
  • 这时我们已经实现了一级菜单，template中显示的内容为我们引进来的 'BlurAdmin.pages.date.daterangepicker' 即为二级菜单，接下来我们开始实现这个二级菜单。
  • 二级菜单路径为 路径为 ‘src / app / pages / data / daterangepicker’
  • 以下就是我们刚在 date.js 中引入的module，以下几点解释均以 daterangepicker.module.js 为例
    • $stateProvider.state('date.daterangepicker', {}) 这种写法是因为我们在项目中引入了 Angular-ui-router 当我们在 <a>中加入 ui-sref 属性，如 <a ui-sref='date.daterangepicker'></a> 就会引入 {} 中的的属性。
    • 属性 url : 当执行 <a ui-sref='date.daterangepicker'></a> 时，对应页面的URL为 /daterangepicker ,这就是单页面应用的精髓，它并不会刷新整个页面，只会更新这个module里的内容，其他外层的module不会更新。
    • 属性 templateUrl : 当进入该URL也会有页面上的变化，而这变化的页面路径就指向 templateUrl 里的页面。
    • 属性 controller : 该控制器是实现以上templateUrl页面的数据绑定。

src / app / pages / data / daterangepicker / daterangepicker.module.js ：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
(function() {
    'use strict';
    angular.module('BlurAdmin.pages.date.daterangepicker', [])
        .config(routeConfig);
    /** @ngInject */
    function routeConfig($stateProvider) {
        $stateProvider
            .state('date.daterangepicker', {
                url: '/daterangepicker',
                templateUrl: 'app/pages/date/daterangepicker/daterangepicker.html',
                controller: 'daterangepickerCtrl',
                controllerAs: 'vm',
                title: '基础日历',
                sidebarMeta: {
                    order: 100
                }
            });
    }
})();

子模板引入

我上一标题中我们讲解了module BlurAdmin.pages.date 的实现，这时候我们需要将它引入到我们的入口文件里面。

src / app / pages / pages.module.js ：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
(function() {
    'use strict';
    angular.module('BlurAdmin.pages', [
        'ui.router',
        'BlurAdmin.pages.ui',
        'BlurAdmin.pages.input',
        'BlurAdmin.pages.table',
        'BlurAdmin.pages.window',
        'BlurAdmin.pages.progress',
        'BlurAdmin.pages.upload',
        'BlurAdmin.pages.date',   // 这里!!! 我们以上实现了的module ,引入到一个叫 BlurAdmin.pages 的module里面了。
        'BlurAdmin.pages.validation',
        'BlurAdmin.pages.slider'
    ]).config(routeConfig);
    /** @ngInject */
    function routeConfig($urlRouterProvider) {
        $urlRouterProvider.otherwise('/ui/basic');
    }
})();
  • 我们再看看一开始我们讲解的 app.js

src / app / app.js ：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
'use strict';
angular.module('BlurAdmin', [  
    'ngAnimate',               
    'ui.bootstrap-slider',
    '720kb.datepicker',
    'daterangepicker',
    'ui.bootstrap',
    'ui.sortable',
    'ui.router',
    'ui.select',
    'ngTouch',
    'toastr',
    'hljs',
    'BlurAdmin.theme',
    'BlurAdmin.pages'    // 这里!!! 我们又把 BlurAdmin.pages  引进来了
]);

结束 ^_^