Geek Answers Handbook

Webpack and angularJs

I am trying to run a simple application using 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 !!

I also saw this: https://github.com/jeffling/angular-webpack-example
The question is, how can I run this correctly?

+8
javascript angularjs webpack
source share
1 answer

bundle.js is created by webpack, so I think you do not need to write this file.

The correct name for the Webpack configuration file is webpack.config.js. Using this file, you can start compilation using webpack or webpack --watch to continuously compile the package file when the code changes.

I created angular-index.js to wrap Angular as a CommonJS module. Here is the source code:

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

And I combined main.js and 'app.js' in one file

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

And finally, I added mainCtrl.js . This is just a definition of a controller function.

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

For a better and more detailed explanation, please read this blog post at https://blog.codecentric.de/en/2014/08/angularjs-browserify/ . My working code is here https://github.com/jean-rakotozafy/angular-webpack-template

+6
source share

More articles:


All Articles