टाइपप्रति + RequireJs + AngularJS

Question

मेरे सामने के अंत में मैं requireJs और AngularJS

साथ टाइपप्रति उपयोग करने के लिए मैं AngularJS के साथ काम करने टाइपप्रति मिला चाहते हैं, लेकिन जब मैं requireJs कुछ नहीं जोड़ना चाहते हैं अब और काम कर रहा है। मुझे आशा है कि किसी ने मुझे यहाँ मदद कर सकते हैं :)

यह मूल रूप से मेरी संरचना होती है:

मेरी इंडेक्स फ़ाइल मैं शुरू कर मेरी requireJs के रूप में मुख्य फ़ाइल बात कर रहा हूँ बिंदु में

</script><script src="/components/requirejs/require.js" data-main="/js/main"> 

यह मेरा मुख्य है।

///<reference path="types/collection.d.ts"/> 

require.config({ 
    baseUrl: '/js/', 
    paths: { 
     angular: '/components/angular/angular', 
     angularRoute: '/components/angular-route/angular-route' 
    }, 
    shim: { 
     'angular': {'exports': 'angular'}, 
     'angularRoute': ['angular'] 
    }, 
    priority: [ 
     'angular' 
    ] 
}); 

require([ 
    'angular', 
    'app/appsetup' 
], function(angular, app) { 
    'use strict'; 
    $(document).ready(function() { 
     var $html = $('html'); 
     angular.bootstrap($html, [app.app['name']]); 
    }); 
}); 

अंतिम लेकिन कम से कम नहीं मेरी appsetup फ़ाइल है, जहां मैं अपने एप्लिकेशन को लोड करने हूँ:

///<reference path="../types/collection.d.ts"/> 
/// <amd-dependency path="angular"/> 

import controller = require("./../controllers/home/index"); 
import angular = require("angular"); 

export var app = angular.module('app', ['ngRoute']) 
         .controller('app.controllers.home.index', controller.HomeController); 

return app; 

इसके अलावा Webstorm बयान की आवश्यकता होती है में कोणीय को रेखांकित करता है और कहता है नहीं कर सकते कि यह यह पाते हैं।

Uncaught Error: [$injector:modulerr] Failed to instantiate module app due to: Error: [$injector:nomod] Module 'app' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the de......0)

तुम लोगों को पता है मैं गलत क्या कर रहा हूँ है: वर्तमान में मैं इस त्रुटि मिल रहा है? या क्या आपके पास पृष्ठों के कुछ लिंक हो सकते हैं, जहां मैं देख सकता हूं कि आप बड़ी परियोजनाओं के लिए इन 3 तकनीकों के साथ कैसे विकसित कर सकते हैं?

Answer 1

जब टाइपस्क्रिप्ट संकलित करता है तो यह आयात या निर्यात की उपस्थिति के आधार पर परिभाषित() फ़ंक्शन (या तो requjs या commonjs के लिए) बनाता है। लेकिन ध्यान दें कि आयात और निर्यात केवल टाइपस्क्रिप्ट मॉड्यूल पर काम नहीं करता है, सरल जेएस फाइलें। आप इस

import myimportmodule = require("myimportmodule"); 

की तरह कुछ कर सकते हैं जहाँ आपके आयात मॉड्यूल

export module myimportmodule 
{ 
    export class Test 
    {} 
} 

था और तुम कुछ इस तरह नहीं कर सकते।

import angular = require("angular"); 

बस क्योंकि angular.js टाइपस्क्रिप्ट मॉड्यूल नहीं है।

नीचे

/** 
* Created by Costa on 4/19/2014. 
*/ 
///<reference path="../ts_references/reference.ts"/> 


///<amd-dependency path="angular"/> 

//register controllers 

import ImportMainCtrl = require("controllers/import/importMainCtrl"); 
export module Controllers 
{ 

    var angular:ng.IAngularStatic = require("angular"); 
    var ControllersAM:ng.IModule; 
    ControllersAM = angular.module('controllers', []); 
    ControllersAM.controller(ImportMainCtrl); 
} 

सूचना इस लाइन कोड पर नज़र?

///<amd-dependency path="angular"/> 

इसे परिभाषित समारोह में एक निर्भरता जुड़ जाएगा इस प्रकार js फ़ाइल इस तरह दिखता है:

/** 
* Created by Costa on 4/19/2014. 
*/ 
///<reference path="../ts_references/reference.ts"/> 
define(["require", "exports", "controllers/import/importMainCtrl", "angular"], function(require, exports, ImportMainCtrl) { 
    (function (Controllers) { 
     var angular = require("angular"); 
     var ControllersAM; 
     ControllersAM = angular.module('controllers', []); 
     ControllersAM.controller(ImportMainCtrl); 
    })(exports.Controllers || (exports.Controllers = {})); 
    var Controllers = exports.Controllers; 
}); 
//# sourceMappingURL=controllers.js.map 

यही कारण है कि आप इस

var angular:ng.IAngularStatic = require("angular"); 

कोणीय कार्यक्षमता का उपयोग करने के जरूरत है। उम्मीद है कि मदद करता है। संपादित ---- या आप angular.d.ts या किसी अन्य .d में निम्न कार्य कर सकते हैं।ts दायर करता है, तो आप वास्तव में इस

declare module 'angular'{ 
    export var angular:ng.IAngularStatic; 
} 

इस तरह आयात करने के लिए वर कोणीय अंदर के साथ एक बाहरी मॉड्यूल घोषणा बना सकते हैं और यह निर्यात करेगा चाहते हैं।