Question

目前正试图通过在Typescript中编写的AngularJS来了解SPA，但是我很难找到关于如何让事情发挥作用的任何好例子。

我创建了一个简单的MVC5应用程序，其中包含一个“主页面”MVC控制器（呃，提供主页面包括布局），然后我引导angularJS和我的app：

_Layout.cshtml

<html lang="en" ng-app="MyApp">
...
@Scripts.Render("~/scripts/jquery")
@Scripts.Render("~/scripts/angular")
@Scripts.Render("~/scripts/ng-app")

客户端/ MyApp.app.ts

module MyApp {

    var dependencies = [
        "ngRoute"
    ];

    function configuration($routeProvider: ng.route.IRouteProvider) {
        $routeProvider
            .when("/", { templateUrl: "/" })
            .otherwise({ redirectTo: "/" });
    }

}

这会导致以下错误：

Failed to instantiate module MyApp due to:
Error: [$injector:nomod] Module 'MyApp ' is not available!

我发现的几个例子仍然使用以下方式加载他们的应用程序：

angular.module('todomvc', [])
    .controller('todoCtrl', TodoCtrl)

然而，我目前正在学习的主要参考应用程序不是：https://github.com/aspnet/MusicStore/tree/master/src/MusicStore.Spa

那么，如何使用AngularJS和typescript创建一个简单的应用程序，为什么ASP.NET MusicStore SPA示例不需要使用angular.module加载AngularJS模块？

Answer 1

John Papa熟悉Hot Towel SPA吗？我认为这是一个非常好的方式来审查Angular App。找到了一些TypeScript实现。

TypeTowel

HotTowel-Angular-TypeScript

也许你可以在这些项目中找到一些有趣的信息

Answer 2

虽然我的6502仿真器有点陈旧（Angular和TypeScript的旧版本），但概念仍然相同。它是使用TypeScript编写的完整应用程序，包含测试。来源和文档都在这里：

http://t6502.codeplex.com/

主引导代码（将各种模块公开为静态模块属性以便全程访问）

module Main {
    export class App {
        public static Filters: ng.IModule = angular.module("app.filters", []);
        public static Directives: ng.IModule = angular.module("app.directives", []);        
        public static Services: ng.IModule = angular.module("app.services", []);
        public static Controllers: ng.IModule = angular.module("app.controllers", ["app.services"]);    
        public static Module: ng.IModule = angular.module("app", 
            ["app.filters", "app.directives", "app.services", "app.controllers"]);    
    }
}

在打字稿中使用Web Api和AngularJS的SPA示例

_Layout.cshtml

客户端/ MyApp.app.ts

2 个答案: