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

Question

目前，我正試圖用用Typescript編寫的AngularJS來了解SPA，但是我很難找到任何有關如何使事情正常工作的好例子。

我用一個“主頁” MVC控制器（它提供了包括布局的主頁）創建了一個簡單的MVC5應用程序，然后在其中引導了angularJS和我的應用程序：

_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應用程序的一種非常好的方法。 找到了一些TypeScript實現。

類型毛巾

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 個解決方案

解決方案1
0 已采納 2014-12-22 11:33:22

解決方案2
0 2014-12-22 20:00:30

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

問題描述

_Layout.cshtml

客戶端/MyApp.app.ts

2 個解決方案

解決方案1 0 已采納 2014-12-22 11:33:22

解決方案2 0 2014-12-22 20:00:30

解決方案1
0 已采納 2014-12-22 11:33:22

解決方案2
0 2014-12-22 20:00:30