Webpack và angularJs

Tôi đang cố gắng để chạy ứng dụng đơn giản với angularjs và webpack, đây là mã của tôi:
index.htmlWebpack và angularJs

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

tôi cũng đã thấy điều này: https://github.com/jeffling/angular-webpack-example
câu hỏi là làm thế nào tôi có thể chạy một cách chính xác?

Nguồn

2014-12-15 Anonymous

Nếu bạn cần trợ giúp chỉ cần tạo sự cố trong dự án và tôi sẽ cố hết sức! –

ok chắc chắn, thx;) –

bundle.js được tạo bởi webpack vì vậy tôi nghĩ bạn không cần phải viết tệp này.

Tên chính xác cho tệp cấu hình Webpack là webpack.config.js. Với tệp này tại chỗ, bạn có thể khởi chạy biên dịch với webpack hoặc webpack --watch để liên tục biên dịch tệp gói khi bạn sửa đổi mã của mình.

Tôi đã tạo một angular-index.js để quấn Angular làm mô-đun CommonJS. Đây là mã nguồn:

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

Và tôi đã sáp nhập main.js và 'app.js' trong một file duy nhất

var jquery = require('jquery'); 
var angular = require('./angular-index'); 

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

Và cuối cùng, tôi đã thêm mainCtrl.js. Cái này chỉ là định nghĩa hàm của bộ điều khiển.

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

Để hiểu rõ hơn và chi tiết, vui lòng đọc bài đăng blog này https://blog.codecentric.de/en/2014/08/angularjs-browserify/. Mã làm việc của tôi là ở đây https://github.com/jean-rakotozafy/angular-webpack-template

Nguồn

2014-12-16 08:31:49

thx, thx, thx nhưng dự án github không hoạt động –

Bạn có thể nhập 'npm start' để biên dịch và xem và chạy' http-server' ('sudo npm install -g http-server' nếu chưa được cài đặt) trong bảng điều khiển khác để chạy ứng dụng. –

sàng cho câu hỏi này: tại sao tôi nên sử dụng dòng lệnh để chạy nó? –

Webpack và angularJs

Trả lời

Các vấn đề liên quan