11

我正在尝试使用 angularjs 和 webpack 运行简单的应用程序，这是我的代码：
index.html 

<html ng-app="myApp">
    <head>
        <meta charset="utf-8">
    </head>
    <body ng-controller="mainCtrl">

Full Name: {{firstName + " " + lastName}}

        <script type="text/javascript" src="bundle.js" charset="utf-8"></script>
    </body>
</html>

应用程序.js 

var app = angular.module('myApp', []);

function mainCtrl($scope) {
    $scope.firstName="John",
    $scope.lastName="Doe"
}

Webpackconfig.js 

module.exports = {
  entry: './main.js',
  output: {
    filename: './bundle.js'       
  }
};

main.js 

var jquery = require("//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.js");
var angular = require("//cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.3/angular.min.js");


var app = require("./app.js");

捆绑.js 

?? I don't know what i sholud write here !!

我也看到了这个：https
://github.com/jeffling/angular-webpack-example 问题是我怎样才能正确运行它？

4

1 回答 1

9

bundle.js是由 webpack 生成的，所以我认为你不需要编写这个文件。

Webpack 配置文件的正确名称是 webpack.config.js。有了这个文件，您可以在修改代码时使用webpack或webpack --watch连续编译您的捆绑文件。

我创建了一个angular-index.js将 Angular 包装为 CommonJS 模块。这是源代码：

require('./angular.min.js');
module.exports = angular;

我已将main.js“app.js”合并到一个文件中

var jquery = require('jquery');
var angular = require('./angular-index');

var myApp = angular.module('myApp', []);
myApp.controller('mainCtrl', require('./mainCtrl'));

最后，我添加了mainCtrl.js. 这一项只是控制器的功能定义。 

module.exports = function($scope) {
  $scope.firstName = 'John';
  $scope.lastName = 'Doe';
};

如需更好更详细的说明，请阅读此博客文章https://blog.codecentric.de/en/2014/08/angularjs-browserify/。我的工作代码在这里https://github.com/jean-rakotozafy/angular-webpack-template

于 2014-12-16T08:31:49.707 回答