8 |
8 | © Footer example directive
3 |Just set resolve rule with require.ensure statement and then use angularOcLazyLoad to init module
5 |
9 | resolve: {
10 | modulePreloading: function($q, $ocLazyLoad) {
11 | "ngInject";
12 |
13 | var deferred = $q.defer();
14 |
15 | require.ensure([], function (require) {
16 | var asyncModule = require('./async.module');
17 | $ocLazyLoad.load({
18 | name: asyncModule.default.name,
19 | });
20 |
21 | deferred.resolve(asyncModule.default.controller);
22 | });
23 |
24 | return deferred.promise;
25 | }
26 | }
27 |
--------------------------------------------------------------------------------
/generators/app/templates/_src/_app/_pages/async-page-example/async.module.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | import './async.scss';
4 |
5 | import asyncController from './async.controller.js';
6 |
7 | const asyncModule = angular.module('async-module', []);
8 |
9 | asyncModule.controller('asyncController', asyncController);
10 |
11 | export default asyncModule;
--------------------------------------------------------------------------------
/generators/app/templates/_src/_app/_pages/async-page-example/async.scss:
--------------------------------------------------------------------------------
1 | .jumbotron.async-box {
2 | background-color: #000;
3 | color: #fff;
4 | }
--------------------------------------------------------------------------------
/generators/app/templates/_src/_app/_pages/main/main.component.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | import MainController from './main.controller';
4 | import mainTpl from './main.html';
5 |
6 | export default class MainComponent {
7 | constructor() {
8 | this.controller = MainController;
9 | this.templateUrl = mainTpl;
10 | }
11 | }
--------------------------------------------------------------------------------
/generators/app/templates/_src/_app/_pages/main/main.controller.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | <% if (props.lodash) { %>
4 | import _ from 'lodash/core';
5 | <% } %>
6 | <% if (props.moment) { %>
7 | import moment from 'moment';
8 | <% } %>
9 |
10 | export default class MainController {
11 | constructor($log) {
12 | 'ngInject';
13 | this.$log = $log;
14 | this.awesomeThings = ['Angular', 'Webpack', 'babel'];
15 | }
16 |
17 | $onInit() {
18 | <% if (props.lodash) { %>
19 | this.lodash_version = _.VERSION;
20 | <% } %>
21 | <% if (props.moment) { %>
22 | this.moment_version = moment.version;
23 | <% } %>
24 | }
25 | }
26 |
--------------------------------------------------------------------------------
/generators/app/templates/_src/_app/_pages/main/main.controller.spec.js:
--------------------------------------------------------------------------------
1 | /*
2 | This file includes an example test
3 | for main component controllerusing es6
4 | */
5 |
6 | // load the target module for test
7 | import mainModule from './main.module';
8 |
9 | describe('Main component controller',() => {
10 | // load the module
11 | beforeEach(angular.mock.module(mainModule.name));
12 |
13 | let $componentController;
14 |
15 | // Initialize the component`s controller provider
16 | beforeEach(() => {
17 | angular.mock.inject(_$componentController_ => {
18 | $componentController = _$componentController_;
19 | });
20 | });
21 |
22 | it('AwesomeThings has been defined', () => {
23 | let mainComponentCtrl = $componentController('main', null, {});
24 | expect(mainComponentCtrl.awesomeThings).toBeDefined();
25 | });
26 |
27 | it('AwesomeThings has 3 elements', () => {
28 | let mainComponentCtrl = $componentController('main', null, {});
29 | expect(mainComponentCtrl.awesomeThings.length).toEqual(3);
30 | });
31 | });
--------------------------------------------------------------------------------
/generators/app/templates/_src/_app/_pages/main/main.html:
--------------------------------------------------------------------------------
1 | This is a simple angular webpack es6 example, compatible with lazy-loading modules.
5 | <% if (props.lodash) { %> 6 |Lodash version: {{$ctrl.lodash_version}}
7 | <% } %> 8 | <% if (props.moment) { %> 9 |Moment version: {{$ctrl.moment_version}}
10 | <% } %> 11 | <% if (props.ocLazyLoad) { %> 12 | 13 | <% } %> 14 |
22 |