點擊下載
本文文檔

當前位置：首頁 - 科技 - 知識百科 - 正文

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

來源：懂視網責編：小采時間：2020-11-27 22:32:30

詳解如何使用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 = requ

推薦度：

點擊下載本文 文檔為doc格式

導讀詳解如何使用webpack+es6開發angular1.x:雖然，現在越來越多的人選擇使用react、vue以及ng2，但是依然存在相當一部分人在使用angular1.x開發。本文將介紹如何使用webpack+es6+angular1.x+$oclazyLoad實現動態加載。 1.webpack webpack.config.js var path = requ

雖然，現在越來越多的人選擇使用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