कोणीय जेएस, ब्राउज़र और मॉड्यूल लोडिंग

Question

ठीक है, मेरे पास कोई सुराग नहीं है। मैंने इंटरनेट को 3 दिनों के लिए खोजा और एंगुलरजेएस और गुलप के साथ संयोजन में ब्राउजरिफ़ का उपयोग करने के तरीके पर कोई उदाहरण नहीं मिला। हां उदाहरण हैं लेकिन वे सभी दिखाते हैं कि सरल 'हैलो वर्ल्ड' ऐप स्ट्रक्चर किसी भी तरह से अंत में उपयोग नहीं करेगा। वे सभी मुख्य app.js फ़ाइल के अंदर अपने छोटे नियंत्रकों को लिखते हैं। कोई मॉड्यूलर सेटअप नहीं। और मॉड्यूलर सेटअप मैंने पाया, ठीक है .. वे index.html फ़ाइल में हाथ से सभी फाइलें शामिल हैं .. sigh (मेरे स्वर के लिए खेद है)।

जो मैं प्राप्त करने का प्रयास करता हूं वह है मेरी सभी एप्लिकेशन फ़ाइलों को स्वत: लोड करना, लेकिन यह काम नहीं करता है। मेरी नियंत्रक फ़ाइलों को शामिल करने के लिए मुझे क्या करने की ज़रूरत है? क्या यह ब्राउजरिफा नहीं है? यह क्यों काम नहीं कर रहा है?

पहला उत्तर शायद होगा: आपको require() फ़ाइलों की आवश्यकता है। पर कैसे? मैं require('myApp.mainController'); के साथ-साथ require('src/features/main/main-controller.js') की कोशिश की के परिणाम के साथ:

Error: No Module found.

कोई सही दिशा में मुझे बात कर सकते हैं, मेरी मदद कृपया! :)। अग्रिम धन्यवाद! आवश्यक जानकारी लाइन के नीचे है।

---

परियोजना संरचना

|project 
|-builds 
| |-development 
| |-production 
|-src 
| |-components 
| |-features 
| | |-main 
| | | |-main-ctrl.js 
| | | |-main.html 
| | |-dashboard 
| | | |-dashboard-ctrl.js 
| | | |-dashboard.html 
| |-app.js 
| |-app.scss 
| |-index.html 

app.js

require('angular'); 
require('angular-ui-router'); 

var app = angular.module('myApp', [ 
    'ui.router', 
    'myApp.mainController' 
]).config(['$stateProvider', '$urlRouterProvider', function($stateProvider, $urlRouterProvider) { 
    $urlRouterProvider.otherwise('/'); 

    $stateProvider 
    .state('main', { 
     url: '/', 
     templateUrl: 'src/features/main/main.html', 
     controller: 'mainController' 
    }) 
    .state('dashboard', { 
     url: '/dashboard', 
     templateUrl: 'src/features/dashboard/dashboard.html', 
     controller: 'dashboardController' 
    }) 
}]); 

मुख्य-ctrl.js

angular.module('myApp.mainController', []) 

    .controller('mainController', ['$scope', 'Main', function($scope, Main) { 
    $scope.message = Main.message; 
}]); 

gulpfile.js

gulp.task('js', function() { 
    return browserify({ 
    entries: 'src/app.js', 
    debug: true 
    }) 
    .bundle() 
    .pipe(gulp.dest('builds/development')) 
    .pipe(connect.reload()); 

});

Answer 1

इस प्रकार मैंने इस समस्या का समाधान किया।

• मैंने बनाए गए प्रत्येक 'मॉड्यूल' में index.js फ़ाइल डाली। यह फ़ाइल स्पष्ट रूप से एक मॉड्यूल के रूप में देखा जाता है।
• यहां से मैं require नियंत्रक, कारखानों/सेवाओं और उन्हें अपने AngularJS ऐप में जोड़ता हूं।