11

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 ?

Improve this question
1
  • If you need help just make an issue in the project and I'll do my best! Commented Dec 20, 2014 at 10:34

1 Answer 1

Reset to default
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

Improve this answer
Sign up to request clarification or add additional context in comments.

6 Comments

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.
sry for this question : why should i use command line to run it ?
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 ?
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.
Sorry :). The blog post that I mentioned in my response use gulp: github.com/basti1302/angular-browserify. Perhaps, their example is more suitable for your use case.
|