WebPACK中和angularJs [英] Webpack and angularJs
问题描述
我试图运行与angularjs和的WebPack简单的应用程序，这是我的code：结果
的index.html
I'm trying to run simple app with angularjs and webpack , here is my code :
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>
app.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");
bundle.js
?? I don't know what i sholud write here !!
此外，我已经看到了这个：<一href=\"https://github.com/jeffling/angular-webpack-example\">https://github.com/jeffling/angular-webpack-example
问题是我怎么能正确运行呢？
also i've seen this : https://github.com/jeffling/angular-webpack-example
the question is how can i run this correctly ?
推荐答案
bundle.js 由产生的WebPack所以我认为你不需要写这个文件。
bundle.js is generated by webpack so I think that you don't need to write this file.
有关WebPACK中config文件中的正确名称是webpack.config.js。有了这个文件的地方，你可以启动编译的WebPack 或的WebPack --watch 来不断编译你的文件捆绑为你修改code。
The correct name for Webpack config file is webpack.config.js. With this file in place you can launch compilation with webpack or webpack --watch to continuously compile you bundle file as you modify your code.
我已经创建一个角index.js 包角为CommonJS的模块。这里是源$ C $ C：
I've create a angular-index.js to wrap Angular as CommonJS module. Here is the source code :
require('./angular.min.js');
module.exports = angular;
和我已经合并 main.js ，并在一个单一的文件app.js
And I've merged main.js and 'app.js' in one single file
var jquery = require('jquery');
var angular = require('./angular-index');
var myApp = angular.module('myApp', []);
myApp.controller('mainCtrl', require('./mainCtrl'));
最后，我已经添加了 mainCtrl.js 。这一次仅仅是控制器的功能定义。
And finally, I've added mainCtrl.js. This one is just the function definition of the controller.
module.exports = function($scope) {
$scope.firstName = 'John';
$scope.lastName = 'Doe';
};
为了更好的和详细的解释，请阅读这篇博客的https： //blog.$c$ccentric.de/en/2014/08/angularjs-browserify/ 。我的工作code是这里 https://github.com/jean-rakotozafy/angular -webpack模板
For better and detailed explication please read this blog post https://blog.codecentric.de/en/2014/08/angularjs-browserify/. My working code is here https://github.com/jean-rakotozafy/angular-webpack-template
这篇关于WebPACK中和angularJs的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
