首页问答社区 web技术正文

使用webpack+es6开发angular1.x的案例

2021-02-22 07:30:21 177 0

这篇文章给大家分享的是有关使用webpack+es6开发angular1.x的案例的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。

虽然，现在越来越多的人选择使用react、vue以及ng2，但是依然存在相当一部分人在使用angular1.x开发。本文将介绍如何使用webpack+es6+angular1.x+$oclazyLoad实现动态加载。

1.webpack

webpack.config.js

varpath=require('path');

varwebpack=require('webpack');

varExtractTextPlugin=require("extract-text-webpack-plugin");

module.exports={
entry:{
home:[
'babel-polyfill',
'./app/app.js'//引入文件
],
common:[
'babel-polyfill',
'angular',
'angular-ui-router',
'oclazyload'
]
},
output:{
path:path.join(__dirname,'/wap'),
filename:'[name].js',
chunkFilename:'[id].build.js?[chunkhash]',
publicPath:'/wap/',
},
module:{
loaders:[
{
test:/\.js?$/,
loader:'ng-annotate-loader!babel-loader',
exclude:/node_modules/
},
{
test:/\.html$/,
loader:'raw-loader',
exclude:/node_modules/
},
]
},
resolve:{
root:['node_modules'],
extensions:['','.js','.html','.json'],
modulesDirectories:['node_modules'],
alias:{}
},
externals:{},
plugins:[
newwebpack.HotModuleReplacementPlugin(),
newExtractTextPlugin('[name].[contenthash:20].css'),
newwebpack.optimize.UglifyJsPlugin({
compress:{warnings:false},
sourceMap:true
}),
newwebpack.optimize.CommonsChunkPlugin('common','common.js')
]

}

2.Module

第一步，先引入angular ，以及相关模块，然后像es5中那样定义一个模块

app.js

importangularfrom'angular';
importuirouterfrom'angular-ui-router';
importocLazyLoadfrom'oclazyLoad';
angular.module('app',[uirouter，ocLazyLoad])

模块与模块之间引用

我们建立第二个模块 header/index.js

importangularfrom'angular';
exportdefaultangular.module('header',[]).name

修改app.js

importheaderfrom'./header'
angular.module('app',[uirouter，ocLazyLoad,header])

模块的引用完成

3.控制器

假设在header目录下新增一个控制器

header/controller.js

exportdefaultclassHeaderController{
consturctor(){
this.home='header'
}
}

引用控制器修改 header/index.js

importHeaderControllerfrom'./controller'
exportdefaultangular.module('header',[])
.controller('HeaderController',HeaderController)
.name

4.服务

如果要在控制器内使用$scope,或者其他服务肯定是报错的,那是因为我们在使用之前没有注入服务

所以第一步应该注入服务

header/controller.js

exportdefaultclassHeaderController{
consturctor($scope){
this.home='header'
$scope.component='head'
}
}
HeaderController.$inject=['$scope']

那么如何自定义服务呢？

新建 header.server.js

classHeaderServices{
constructor(){
this.name='cxh'
}
getName(){
returnthis.name
}
}

header/index.js

importHeaderServicefrom'./service';
exportdefaultangular.module('header',[])
.controller('HeaderController',HeaderController)
.service('HeaderService',HeaderService)
.name

在控制器中使用自定义服务

header/controller.js

exportdefaultclassHeaderController{
consturctor($scope,HeaderService){
this.home='header'
$scope.component='head'
$scope.name=HeaderService.getName
}
}
HeaderController.$inject=['$scope','HeaderService']

5.指令

新建 footer/index.js 大致和 header/index.js相同

将 footer模块引入到 app.js

新建footer/directive.js

exportdefaultclassFooter{
constructor(){
this.restrict='E',
this.scope={},
this.template="<divng-click='alert()'>footer</div>"
this.controller=Foot
this.link=(scope,element,attr)=>{}
}
}
classFoot{
constructor(){
$scope.alert=()=>{alert(1)}
}
}
Header.$inject=['$scope']

footer/index.js

exportdefaultangular.module('footer',[])
.directive('footerDirective',()=>newFooter)
.name

6.路由

router.js

exportdefaultrouter($stateProvider,$urlRouterProvider){
$stateProvider.state("home",{
url:"/home",
templateUrl:'app/home/home.html',
controller:"HomeController",
controllerAs:"HMC",
})
$urlRouterProvider.otherwise('/home');
}
router.$inject=['$stateProvider','$urlRouterProvider']

DEMO 实现动态加载

1.第一步，新建app.js创建一个module

importangularfrom'angular';
importuirouterfrom'angular-ui-router';
importocLazyLoadfrom'oclazyLoad';
//引用创建头部组件
importHeaderfrom'./header';
//路由
importroutingfrom"./router.js";
//引入两个子模块
importHomefrom"./homes";
importRouterfrom"./router";

angular.module('app',[uirouter,Header,ocLazyLoad,Home,Router])
.config(routing)

2.配置路由 ./route.js

exportdefaultfunctionrouting($stateProvider,$urlRouterProvider){
'ngInject';//注入服务就不需要使用$inject了
$stateProvider
.state("home",{
url:"/home",
templateProvider:($q)=>{//动态引入html模板
'ngInject';
letdeferred=$q.defer();
require.ensure([],function(){
lettemplate=require('./home/home.html');
deferred.resolve(template);
});
returndeferred.promise;
},
controller:"HomeController",
controllerAs:"HMC",
resolve:{//动态加载模块
loadMyCtrl:function($q,$ocLazyLoad){
'ngInject';
letdeferred=$q.defer();
require.ensure([],()=>{
letmodule=require("./home").default;
$ocLazyLoad.load({name:module.name});
deferred.resolve(module.controller)
});
returndeferred.promise;
}
}
}),
.state("route",{
url:"/route",
templateProvider:($q)=>{//动态引入html模板
'ngInject';
letdeferred=$q.defer();
require.ensure([],function(){
lettemplate=require('./router/router.html');
deferred.resolve(template);
});
returndeferred.promise;
},
controller:"routerController",
controllerAs:"RTC",
resolve:{//动态加载模块
loadMyCtrl:function($q,$ocLazyLoad){
'ngInject';
letdeferred=$q.defer();
require.ensure([],()=>{
letmodule=require("./router").default;
$ocLazyLoad.load({name:module.name});
deferred.resolve(module.controller)
});
returndeferred.promise;
}
}
}）
$urlRouterProvider.otherwise('/home');
}

3.header

header/index.js

importangularfrom"angular";
importheaderfrom'./directive';
exportdefaultangular.module('app_header',[])
.directive('header',()=>newheader)
.name;

header/directive.js

classHeader{
constructor($scope){
'ngInject';
$scope.isshow=false;
}
}
exportdefaultclassheader{
constructor(){
this.restrict='E',
this.scope={},
this.template=require(./header.html)
this.controller=Header
this.link=(scope,element,attr)=>{}
}
}

header/header.html

<div>
<ahref="#home"rel="externalnofollow">home</a>
<ahref="#router"rel="externalnofollow">router</a>
</div>

4.home

home/index.js

importangularfrom"angular";
importHomeControllerfrom'./controller';
exportdefaultangular.module('app_home',[])
.controller('HomeController',HomeController)

home/controller.js

exportdefaultclassHomeController{
constructor($scope){
'ngInject';
this.isshow=false;
this.eage='sds';
$scope.edg='sma'
}
change(){
this.isshow=!this.isshow;
console.log(this.isshow);
}
}

home/home.html