CODEWITHSUNDEEP
javascriptangularjswebpack
user3856699
user3856699

Reputation:

Webpack and angularJs

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 ?

Upvotes: 11

Views: 18872

Answers (1)

Zan RAKOTO
Zan RAKOTO

Reputation: 911

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

Upvotes: 9

Related Questions