Webpack and angularJs

Question

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 !!

also i've seen this : https://github.com/jeffling/angular-webpack-example
the question is how can i run this correctly ?

If you need help just make an issue in the project and I'll do my best! — Jeff Ling, Dec 20 '14 at 10:34

score 9 · Accepted Answer · answered Dec 16 '14 at 08:31

9

bundle.js is generated by webpack so I think that you don't need to write this file.

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.

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;

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'));

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';
};

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

answered Dec 16 '14 at 08:31

Zan RAKOTO

903
9
14

You can type `npm start` to compile and watch and run `http-server` (`sudo npm install -g http-server` if not yet installed) in other console to run the app. – Zan RAKOTO Dec 16 '14 at 09:22
sry for this question : why should i use command line to run it ? – Dec 16 '14 at 09:28
thx maaaan,i've run it, one more question if u don't mind : i'm working on .net and angular project , and now we want to add webpack . how can i run your github project without npm ? – Dec 16 '14 at 09:38
You can find in package.json, scripts/start section, the command executed by `npm start`. So you can just do `webpack --progress --colors --watch` instead of `npm start`. – Zan RAKOTO Dec 16 '14 at 10:44
Sorry :). The blog post that I mentioned in my response use gulp: https://github.com/basti1302/angular-browserify. Perhaps, their example is more suitable for your use case. – Zan RAKOTO Dec 16 '14 at 11:19
You're welcome ;). This link may help http://www.hanselman.com/blog/IntroducingGulpGruntBowerAndNpmSupportForVisualStudio.aspx. Good luck! – Zan RAKOTO Dec 16 '14 at 13:36

Webpack and angularJs

1 Answers1

Linked