大佬教程收集整理的这篇文章主要介绍了angularjs – 如何使用SystemJS将角度TypeScript与内部模块捆绑在一起,大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
我们在github:https://github.com/hikirsch/TypeScriptSystemJSAngularSampleApp上发布了这个工作示例
脚步:
npm install jspm -g npm install cd src/ jspm install jspm install --dev cd .. gulp bundle cd src/ python -m SimplehttpServer
这是应用程序的要点:
index.ts
/// <reference path="../typings/tsd.d.ts" /> /// <reference path="../typings/typescriptApp.d.ts" /> import * as angular from 'angular'; import {ExampleCtrl} from './controllers/ExampleCtrl'; import {ExampleTwoCtrl} from './controllers/ExampleTwoCtrl'; export var app = angular.module("myApp",[]); app.controller("ExampleCtrl",ExampleCtrl); app.controller("ExampleTwoCtrl",ExampleTwoCtrl);
ExampleCtrl.ts
/// <reference path="../../typings/tsd.d.ts" /> /// <reference path="../../typings/typescriptApp.d.ts" /> export class ExampleCtrl { public static $inject:Array<String> = []; constructor() { } public name:string; public Hello_world:string; public say_Hello() { console.log('greeTing'); this.Hello_world = "Hello," + this.name + "!"; } }
ExampleTwoCtrl.ts
/// <reference path="../../typings/tsd.d.ts" /> /// <reference path="../../typings/typescriptApp.d.ts" /> export class ExampleTwoCtrl { public static $inject:Array<String> = []; constructor() { } public name:string; public text:string; public second() { this.text = "ExampleTwoCtrl: " + this.name; } }
如上所述,这一切都很好.但我们宁愿将所有内容都放在这样的名称空间下:
@H_28_11@module myApp.controllers { export class ExampleController { ... } } //do we need to export something here?
然后像这样使用它:
这将正确编译运行gulp bundle任务,但在浏览器中出错
///
///
import * as angular from 'angular'; import ExampleCtrl = myApp.controllers.ExampleCtrl; import ExampleTwoCtrl = myApp.controllers.ExampleTwoCtrl; export var app = angular.module("myApp",ExampleTwoCtrl);
浏览器错误:
Uncaught ReferenceError: myApp is not defined(anonymous function) @ build.js:5u @ build.js:1i @ build.js:1c @ build.js:1(anonymous function) @ build.js:1(anonymous function) @ build.js:1 build.js:1 Uncaught Error: [$injector:modulerr] Failed to instantiate module myApp due to: Error: [$injector:nomod] Module 'myApp' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument. http://errors.angularjs.org/1.3.15/$injector/nomod?p0=myApp at http://localhost:8000/build/build.js:1:4007 at http://localhost:8000/build/build.js:1:12353 at e (http://localhost:8000/build/build.js:1:11925) at t.register.e (http://localhost:8000/build/build.js:1:12237) at http://localhost:8000/build/build.js:1:20741 at o (http://localhost:8000/build/build.js:1:4392) at p (http://localhost:8000/build/build.js:1:20519) at Bt (http://localhost:8000/build/build.js:1:22209) at t.register.s (http://localhost:8000/build/build.js:1:10038) at Q (http://localhost:8000/build/build.js:1:10348) http://errors.angularjs.org/1.3.15/$injector/modulerr?p0=myApp&p1=Error%3A%…0%20at%20Q%20(http%3A%2F%2Flocalhost%3A8000%2Fbuild%2Fbuild.js%3A1%3A10348)
我发现使用COR_883_11845@monjs加载器(我使用的是browserify)使用typescript的最好方法是做类似的事情:
class ExampleTwoCtrl { public static $inject:Array<String> = []; constructor() { } public name:string; public text:string; public second() { this.text = "ExampleTwoCtrl: " + this.name; } } export = ExampleTwoCtrl
并使用它:
import MyController = require('./ExampleTwoCtrl'); var a = new MyController();
话虽这么说,我观看了John Papa’s talk at AngularU的录音,他们演示了一些代码捆绑使用systemjs编写的typescript,没有任何导入,只有内部ts模块.我在twitter上问我哪里可以找到示例代码,但还没有得到回复.
以上是大佬教程为你收集整理的angularjs – 如何使用SystemJS将角度TypeScript与内部模块捆绑在一起全部内容,希望文章能够帮你解决angularjs – 如何使用SystemJS将角度TypeScript与内部模块捆绑在一起所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。