详解如何使用webpack+es6开发angular1.x

详解如何使用webpack+es6开发angular1.x

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

1.webpack

webpack.config.js

var path = require('path');

var webpack = require('webpack');

var ExtractTextPlugin = 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: [

new webpack.HotModuleReplacementPlugin(),

new ExtractTextPlugin('[name].[contenthash:20].css'),

new webpack.optimize.UglifyJsPlugin({

compress: {warnings: false},

sourceMap: true

}),

new webpack.optimize.CommonsChunkPlugin('common', 'common.js')

]

}

2.Module

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

app.js

import angular from 'angular';

import uirouter from 'angular-ui-router';

import ocLazyLoad from 'oclazyLoad';

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

模块与模块之间引用

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

import angularfrom 'angular';

export default angular.module('header',[]).name

修改app.js

import header from './header'

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

模块的引用完成

3.控制器

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

header/controller.js

export default class HeaderController {

consturctor(){

this.home = 'header'

}

}

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

import HeaderController from './controller'

export default angular.module('header',[ ])

.controller('HeaderController',HeaderController)

.name

4.服务

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

所以第一步应该注入服务

header/controller.js

export default class HeaderController {

consturctor($scope){

this.home = 'header'

$scope.component = 'head'

}

}

HeaderController.$inject = ['$scope']

那么如何自定义服务呢？

新建 header.server.js

class HeaderServices {

constructor(){

this.name = 'cxh'

}

getName(){

return this.name

}

}

header/index.js

import HeaderService from './service';

export default angular.module('header',[ ])

.controller('HeaderController',HeaderController)

.service('HeaderService',HeaderService)

.name

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

header/controller.js

export default class HeaderController {

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

export default class Footer {

constructor(){

this.restrict = 'E',

this.scope = {},

this.template = "

this.controller = Foot

this.link = (scope, element, attr) => {}

}

}

class Foot{

constructor(){

$scope.alert = () => { alert(1) }

}

}

Header.$inject = ['$scope']

footer/index.js

export default angular.module('footer',[])

.directive('footerDirective',()=> new Footer)

.name

6.路由

router.js

export default router ($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

import angular from 'angular';

import uirouter from 'angular-ui-router';

import ocLazyLoad from 'oclazyLoad';

//引用创建头部 组件

import Header from './header';

//路由

import routing from "./router.js";

//引入两个子模块

import Home from "./homes";

import Router from "./router";

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

.config(routing)

2.配置路由 ./route.js

export default function routing($stateProvider, $urlRouterProvider) {

'ngInject'; //注入服务 就不需要使用$inject了

$stateProvider

.state("home",{

url:"/home",

templateProvider: ($q) => { //动态引入html模板

'ngInject';

let deferred = $q.defer();

require.ensure([], function () {

let template = require('./home/home.html');

deferred.resolve(template);

});

return deferred.promise;

},

controller: "HomeController",

controllerAs:"HMC",

resolve: { //动态加载模块

loadMyCtrl: function ($q, $ocLazyLoad) {

'ngInject';

let deferred = $q.defer();

require.ensure([], () => {

let module = require("./home").default;

$ocLazyLoad.load({name: module.name});

deferred.resolve(module.controller)

});

return deferred.promise;

}

}

}),

.state("route",{

url:"/route",

templateProvider: ($q) => { //动态引入html模板

'ngInject';

let deferred = $q.defer();

require.ensure([], function () {

let template = require('./router/router.html');

deferred.resolve(template);

});

return deferred.promise;

},

controller: "routerController",

controllerAs:"RTC",

resolve: { //动态加载模块

loadMyCtrl: function ($q, $ocLazyLoad) {

'ngInject';

let deferred = $q.defer();

require.ensure([], () => {

let module = require("./router").default;

$ocLazyLoad.load({name: module.name});

deferred.resolve(module.controller)

});

return deferred.promise;

}

}

}）

$urlRouterProvider.otherwise('/home');

}

3.header

header/index.js

import angular from "angular";

import header from './directive';

export default angular.module('app_header',[])

.directive('header', () => new header)

.name;

header/directive.js

class Header {

constructor($scope){

'ngInject';

$scope.isshow = false;

}

}

export default class header {

constructor() {

this.restrict = 'E',

this.scope = {},

this.template = require(./header.html)

this.controller = Header

this.link = (scope, element, attr) => {}

}

}

header/header.html

home

router

4.home

home/index.js

import angular from "angular";

import HomeController from './controller';

export default angular.module('app_home',[])

.controller('HomeController', HomeController)

home/controller.js

export default class HomeController {

constructor($scope) {

'ngInject';

this.isshow = false;

this.eage = 'sds';

$scope.edg = 'sma'

}

change(){

this.isshow = !this.isshow;

console.log(this.isshow);

}

}

home/home.html

其余的模块大同小异就不依依去写了。

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。