我目前正在尝试将 OcLazyLoad 与角度组件以及 ui-router 1.0.0 和 Webpack 1 一起使用。
但我无法弄清楚如何正确地使用带有ui-view="MainView"
和的视图对象显示 html 视图ui-view="rightMenuView"
。其次,我想直接加载组件而不是 templateProvider、控制器等(位于 ui-router 中)。我浏览了很多教程和现有项目,但我没有找到这个用例的任何示例。
以下是我的一些代码片段:
webpack.config.js:
.......
.......
.......
module: {
loaders: [{
test: /\.json$/,
exclude: /node_modules/,
loaders: ["raw-loader"]
},{
test: /\.html$/,
exclude: /node_modules/,
loader: 'ngtemplate!html'
},{
test: /\.(jpe?g|gif|png|svg|woff|woff2|ttf|eot|wav|mp3)$/,
loader: 'file' // inline base64 URLs for <=10kb images, direct URLs for the rest
},{
test: /\.less$/,
exclude: /node_modules/,
loaders: ['style', 'css', 'less?sourceMap', 'resolve-url']
},{
test: /\.scss$|\.css$/,
exclude: /node_modules/,
loaders: ['style', 'css-loader', 'resolve-url', 'sass?sourceMap']
},{
test: /\.js$/,
exclude: /node_modules/,
loaders: ['ng-annotate?add=true&map=true', 'babel', 'eslint-loader']
}]
},
......
......
......
然后这是我的 page1.component.js:
import Page1View from './page1.html';
import './page1.scss';
class Page1 {
static detailsComponent() {
return {
templateUrl: Page1View,
controller: function () {
this.name = 'Hello Page1';
}
};
}
}
export default Page1.detailsComponent();
然后是模块 page1.module.js:
import Page1Component from 'components/page1/page1.component';
const PAGE1MODULE = 'page1';
angular.module(PAGE1MODULE, [])
.component('page1', Page1Component);
export default PAGE1MODULE;
然后这是 config.js (ui-router):
.....
.....
$stateProvider
.state('home', {
url: '/home',
views: {
mainView: {
component: 'home'
},
rightMenuView: {
component: 'rightMenu'
}
}
})
.state('page1', {
url: '/page1',
views: {
mainView: {
templateProvider: ($q) => {
return $q((resolve) => {
// lazy load the view
require.ensure([], () => resolve(require("./components/page1/page1.html")));
});
},
controller: function () {
this.name = 'Hello Page1';
}
},
rightMenuView: {
templateProvider: ($q) => {
return $q((resolve) => {
// lazy load the view
require.ensure([], () => resolve(require("./components/rightMenu/rightMenu.html")));
});
}
}
},
resolve: {
loadPage1Component: ($q, $ocLazyLoad) => {
return $q((resolve) => {
require.ensure([], () => {
// load whole module
let module = require('./components/page1/page1.module');
$ocLazyLoad.load({name: 'page1'});
resolve(module.component);
});
});
}
}
})
正如你所看到的,我重写了,component: 'page1'
因为我不知道如果我不加载component page1
. 如果你看到更好的方法,我会听。主要问题是 templateProvider 中的模板未显示。我只看到网址。我是否可以在 Webpack 中以特定方式使用 angular 的 templateCache ?先感谢您。
以及 Webpack 构建的一部分:
....
....
chunk {1} 1.bundle.js, 1.bundle.js.map 3.52 kB {0} [rendered]
[20] ./~/css-loader!./~/resolve-url-loader!./~/sass-loader?sourceMap!./lib/components/page1/page1.scss 196 bytes {1} [built]
[23] ./lib/components/page1/page1.html 271 bytes {1} {2} [built]
[83] ./lib/components/page1/page1.component.js 1.39 kB {1} [built]
[84] ./lib/components/page1/page1.module.js 408 bytes {1} [built]
[133] ./lib/components/page1/page1.scss 1.25 kB {1} [built]
chunk {2} 2.bundle.js, 2.bundle.js.map 271 bytes {0} [rendered]
[23] ./lib/components/page1/page1.html 271 bytes {1} {2} [built]
....
....
我看到 page1.html 两次,我不知道如何避免这种情况,但我猜它似乎没有阻塞。
最后,这是我的 package.json,也许这很有用:
"name": "",
"version": "",
"description":"",
"main": "index.js",
"scripts": {
"prod": "rm -rf dist/* && cross-env NODE_ENV=production webpack --config webpack.prod.config.js",
"dev": "cross-env NODE_ENV=development webpack-dev-server --config webpack.dev.config.js"
},
"dependencies": {
"angular": "1.5.8",
"angular-animate": "1.5.8",
"angular-bootstrap-material": "0.1.4",
"angular-loading-bar": "0.9.0",
"angular-messages": "1.5.8",
"angular-sanitize": "1.5.8",
"angular-translate": "2.12.1",
"angular-translate-loader-static-files": "2.12.1",
"angular-ui-bootstrap": "2.2.0",
"angular-ui-router": "1.0.0-beta.2",
"angular-ui-router-anim-in-out": "1.0.2",
"bootstrap": "3.3.7",
"bootstrap-material-design": "0.5.10",
"bootstrap-material-design-icons": "2.2.0",
"cross-env": "3.1.3",
"http-server": "0.9.0",
"oclazyload": "^1.0.9",
"rx": "4.1.0",
"rx-angular": "1.1.3"
},
"devDependencies": {
"angular-mocks": "1.5.8",
"autoprefixer": "6.5.1",
"babel-core": "6.17.0",
"babel-loader": "6.2.5",
"babel-plugin-transform-runtime": "6.15.0",
"babel-polyfill": "6.16.0",
"babel-preset-es2015": "6.16.0",
"babel-runtime": "6.11.6",
"css-loader": "0.25.0",
"eslint": "3.8.1",
"eslint-config-xo": "0.17.0",
"eslint-loader": "1.6.0",
"extract-text-webpack-plugin": "1.0.1",
"file-loader": "0.9.0",
"html-loader": "0.4.4",
"html-webpack-plugin": "2.24.0",
"image-webpack-loader": "3.0.0",
"imagemin-webpack-plugin": "1.2.1",
"isparta-loader": "2.0.0",
"jasmine-core": "2.5.2",
"karma": "1.3.0",
"karma-coverage": "1.1.1",
"karma-jasmine": "1.0.2",
"karma-phantomjs-launcher": "1.0.2",
"karma-sourcemap-loader": "0.3.7",
"karma-spec-reporter": "0.0.26",
"karma-webpack": "1.8.0",
"less": "2.7.1",
"less-loader": "2.2.3",
"ng-annotate-loader": "0.2.0",
"ng-annotate-webpack-plugin": "0.1.3",
"ngtemplate-loader": "1.3.1",
"node-sass": "3.10.1",
"optimize-css-assets-webpack-plugin": "1.3.0",
"path": "0.12.7",
"postcss-loader": "1.0.0",
"progress-bar-webpack-plugin": "1.9.0",
"protractor": "4.0.9",
"raw-loader": "0.5.1",
"resolve-url-loader": "1.6.0",
"sass-lint": "1.9.1",
"sass-loader": "4.0.2",
"sasslint-webpack-plugin": "1.0.4",
"style-loader": "0.13.1",
"url-loader": "0.5.7",
"watch-ignore-webpack-plugin": "1.0.0",
"webpack": "1.13.2",
"webpack-dev-server": "1.16.2"
}
}