Question

您好，我在努力让我的引导程序标签/角路由器通过Webpack工作。无需使用webpack即可正常工作。

我遇到的错误是Error: Argument 'TabsDesktopCtrl' is not a function, got undefined

需要知道如何使其正常工作吗？

将routes文件夹输出到构建目录吗？
加载角度脚本吗？

webpack的新功能，非常感谢您的帮助！

结构

build
src
/images
/js
--/angular_routing.js
--/...
/scss
/routes
--/settings.html
...
/index.js
/template.html
webpack.common.js
webpack.dev.js
webpack.prod.js

这是我的文件

/src/js/angular_routing.js

var app = angular.module('profile-page', []);
app.config(['$routeProvider', '$locationProvider', function ($routeProvider, $locationProvider) {

  $routeProvider.
    when('/titanfx-account', { templateUrl: './routes/account.html', controller: MainCtrl }).
    when('/trader-client-cabinet', { templateUrl: './routes/trader.html', controller: MainCtrl }).
    when('/intro-broker-ib', { templateUrl: './routes/broker', controller: MainCtrl }).
    when('/history-notes', { templateUrl: './routes/history-notes.html', controller: MainCtrl }).
    when('/settings', { templateUrl: './routes/settings.html', controller: MainCtrl }).
    otherwise({ redirectTo: '/account.html' });
}]);
function TabsDesktopCtrl($scope, $location) {
  $scope.tabs = [
    { link: '#/account', label: 'Account' },
    { link: '#/trader', label: 'Trader' },
    { link: '#/broker', label: 'Broker' },
    { link: '#/history-notes', label: 'History / Notes' },
    { link: '#/settings', label: 'Settings' }
  ];
  $scope.selectedTab = $scope.tabs[0];
  $scope.setSelectedTab = function (tab) {
    $scope.selectedTab = tab;
  }
  $scope.tabClass = function (tab) {
    if ($scope.selectedTab == tab) {
      return "active";
    } else {
      return "";
    }
  }
}

/src/template.html （使用HtmlWebpackPlugin）

<html ng-app="profile-page">
...
<script data-require="angular.js@1.0.x" src="http://code.angularjs.org/1.0.7/angular.min.js"></script>
<script>
<!--Tab View Desktop -->
<ul class="nav nav-tabs nav-tabs-desktop" ng-controller="TabsDesktopCtrl">
<li ng-class="tabClass(tab)" ng-repeat="tab in tabs" tab="tab"><a href="{{tab.link}}" data-target="#"
                ng-click="setSelectedTab(tab)">{{tab.label}}</a></li>
</ul>

<!--Main View -->
<div ng-view></div>

webpack.common.js

const path = require("path");

module.exports = {
entry: {
  main: "./src/index.js",
  angular_routing: "./src/js/angular_routing.js",
  angular_tabs: "./src/js/angular_tabs.js",
  inline: "./src/js/inline.js",
  user_profile_js: "./src/js/user_profile_js.js"
},
module: {
    rules: [
      {
        test: /\.(jpe?g|png|gif|woff|woff2|eot|ttf|svg)(\?[a-z0-9=.]+)?$/,
        use: {
            loader: "file-loader",
            options: {
              name: "[name].[hash].[ext]",
              outputPath: "images"
            }
        }
      },
      {
        test: /\.(jpe?g|png|gif|woff|woff2|eot|ttf|svg)(\?[a-z0-9=.]+)?$/,
        use: {
            loader: "url-loader",
            options: {
              name: "[name].[hash].[ext]",
              outputPath: "images"
            }
        }
      },
      {
        test: /\.html$/,
        use: [
            "html-loader"
        ]
      }

    ]
}
};

webpack.prod.js

const path = require("path");
const common = require("./webpack.common");
const merge = require("webpack-merge");
const {CleanWebpackPlugin} = require("clean-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const OptimizeCssAssetsPlugin = require("optimize-css-assets-webpack-plugin");
const TerserPlugin = require("terser-webpack-plugin"); 
var HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = merge(common, {
mode: "production",
output: {
    filename: "[name].[contentHash].bundle.js",
    path: path.resolve(__dirname, "build")
},
optimization: {
    minimizer: [
        new OptimizeCssAssetsPlugin(),
        new TerserPlugin()
    ]
},
plugins: [
    new MiniCssExtractPlugin(
        {
            filename: "[name].[contentHash].css"
        }
    ), 
    new CleanWebpackPlugin(),
    new HtmlWebpackPlugin(
        {
            template: "./src/template.html"
        }
    )
],
module:{
    rules: [
        {
            test: /\.scss$/,
            use: [
                MiniCssExtractPlugin.loader,
                "css-loader",
                "sass-loader"
            ]
        },
    ]
}
});

Answer 1

您收到的错误是因为函数TabsDesktopCtrl超出范围。猜想我要说的是，没有webpack，Angular只会解决全局功能。

我不推荐使用的一种非常hack的方式，将是像这样全局声明函数：

window.TabsDesktopCtrl = function ($scope, $location) { //etc... }

以上内容不会解决webpack的更大问题以及如何实现。尽管有更好的指南。

https://webpack.js.org/concepts https://www.robinwieruch.de/minimal-react-webpack-babel-setup/

带有Webpack的角形路由Boostrap选项卡

1 个答案: