詳解如何使用webpack+es6開發angular1.x

2019-11-19 15:46:35

字體：大中小

來源：轉載

供稿：網友

雖然，現在越來越多的人選擇使用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 = "<div ng-click='alert()'>footer</div>"          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

<div>   <a href="#home" rel="external nofollow" >home</a>   <a href="#router" rel="external nofollow" >router</a></div>

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