VS2013 Cordova Projekt mit AngularJS

Hallo,

ich möchte eine Cross-Plattform App schreiben und habe mir schon diverse Tutorials und Videos angeschaut, bekomme es aber auf der grünen Wiese selber nicht hin was ich sehe.
Ich komme aus der C# Welt und habe mir einen Web-API Server Service gebaut und versuche nun mit diesem meine App zu befüllen und zu Starten, stoße doch seit zwei Tagen schon beim Start auf Probleme die ich einfach nicht korregiert kriege.

Ich will daher mal von Anfang an beschreiben was meine Schritte sind:

1. Ich erstelle ein neues Apache Cordova Projekt in VS2013
2. Importiere ein paar JavaScript und TypeScript Packe im PM von VS.
   2.1 Install-Package Angular.js
   2.2 Install-Package Angularjs.typescript.definitelytyped
   2.3 Install-Package JQuery.js
   2.4 Install-Package jquery.typescript.definitelytyped
   2.5 Install-Package bootstrap.js
   2.6 Install-Package bootstrap.typescript.definitelytyped
   (Namen aus dem Gedächtnis)
3. Erstelle ein TypeScript im scripts Ordner mit dem Namen angularApp:

module Snip {

    //ng
    var app = angular.module("Snip", []);
    app.controller("HomeCtrl", function ($scope, $http, $q) {
        $scope.vm = new HomeVM($scope, $http, $q);
    });

    var INTEGER_REGEXP = /^\-?\d*$/;
    app.directive('integer', function () {
        return {
            require: 'ngModel',
            link: function (scope, elm, attrs, ctrl) {
                ctrl.$parsers.unshift(function (viewValue) {
                    if (INTEGER_REGEXP.test(viewValue)) {
                        // it is valid
                        ctrl.$setValidity('integer', true);

                        return viewValue;
                    } else {
                        // it is invalid, return undefined (no model update)
                        ctrl.$setValidity('integer', false);
                        return undefined;
                    }
                });
            }
        };
    });

    export class CategoryVM {
        public Name: string;
        public Description: string;
        public Position: number;
        public Color: number;
        public Id: string;
        public Selected: boolean;

        constructor(category: any) {
            this.Id = category.Id;
            this.Name = category.Name;
            this.Description = category.Description;
            this.Color = category.Color;
            this.Position = category.Position;
        }
    }

    export class HomeVM {

        public categories: Array<CategoryVM> = new Array<CategoryVM>();
        public selectedCategorie: CategoryVM;
        public categoryFilter: string;
        public categoryDescriptionFilter: string;

        private scope: any;
        private http: ng.IHttpService;
        private q: ng.IQService;
        public state: string = "Category";

        public message: string;

        public SetState(state: string) {
            this.state = state;
        }

        constructor(scope: any, http: ng.IHttpService, q: ng.IQService) {
            this.scope = scope;
            this.q = q;
            this.http = http;
        }

        public selectCategory(idx: number) {
            for (var i = 0; i < this.categories.length; i++) {
                var f = this.categories[i];
                if (i == idx) {
                    f.Selected = true;
                    this.selectedCategorie = f;
                }
                else {
                    f.Selected = false;
                }
            }
        }

        private processCategories(p) {
            this.categories = new Array<CategoryVM>();

            if (angular.isArray(p)) {

                for (var i = 0; i < p.length; i++) {
                    var category = p[i];
                    var pVM = new CategoryVM(category);
                    this.categories.push(pVM);
                }
            }
            else {
                var pVM = new CategoryVM(p);
                this.categories.push(pVM);
            }
        }

        public load(): ng.IPromise<any> {
            var defered = this.q.defer<any>();
            var params: any = {};
            var that = this;

            this.http.get("http://localhost:62191/tables/Category")
                .then((result) => {

                var categories = result.data;
                this.processCategories(categories);
                that.scope.$apply();
                defered.resolve(null);
            }).catch((p) => {
                this.message = "Fehler: " + p;
                defered.reject(null);
            });
            return defered.promise;
        }
    }
} 

4. Passe meine Index.html an:

<!DOCTYPE html>
<html ng-app="Snip">
<head>
    <title>Test</title>
    <script src="cordova.js"></script>
    <script src="scripts/angular.js"></script>
    <script src="scripts/angularApp.js"></script>
</head>
<body>
    <div>
        <table ng-controller="HomeCtrl" ng-show="vm.categories.length &gt; 0">
            <tr>
                <th>Id</th>
                <th>Name</th>
                <th>Beschr</th>
                <th>Position</th>
            </tr>
            <tr ng-repeat="f in vm.categories" ng-class="{ selected: f.Selected }">
                <td>{{f.Id}}</td>
                <td>{{f.Name}}</td>
                <td>{{f.Description}}</td>
                <td>{{f.Position}}</td>
                <td><a href="#" ng-click="vm.selectCategory($index)">Auswählen</a></td>
            </tr>
        </table>
    </div>
</body>
</html>

5. Starte die App. Er sagt mir das er alle Resourcen Dateien nicht laden konnte und zeigt mir kein Inhalt an. Was ist falsch? Ich verstehe das nicht. In die Script datei springt er nicht. Ich habe da diverse Breakpoints eingebaut...

Deine Fehlermeldung lässt nicht erkennen, ob Du von Angular-Fehlermeldungen sprichst oder von HTTP-Fehlermeldungen.

Aber Hinweise:
a) verwende lieber bower als NuGet für Elemente wie angular, jQuery und Co.
Ab VS2015 wird bower auch direkt in VS integriert sein; solange empfehle ich ein Copy-Paste von Hand.
NuGet würde ich persönlich nur für .NET Elemente verwenden, keine Web-Elemente.
b) Nimm den Browser-Debugger Deiner Wahl um zu schauen, welchen HTTP Fehler Du bekommst bei der Anfrage der Ressourcen. So ist das nicht aussagekräftig.
c) wenn Du schon (aus meiner Sicht positiverweise) TypeScript verwendest, dann verwende es richtig.
Teile Controller in Klassen auf und definiere auch Deine $injects, denn sonst sieht man schnell Schwarz.

Ich würde auch das TpeScript-Projekt, also die eigentliche App, nicht im Scripts-Ordner schreiben.
Aber das ist fast Geschmackssache.

Danke für die guten Tipps. Würdest du dann auch empfehlen NodeJs zu verwenden?

Hier der Auszug aus dem Fehlerlog:

Ripple :: Environment Warming Up (Tea. Earl Gray. Hot.)
File: ripple.js, Line: 37, Column: 13059
cordova :: Initialization Finished (Make it so.)
File: ripple.js, Line: 37, Column: 13059
Failed to load resource: the server responded with a status of 404 (Not Found)
File: favicon.ico, Line: 0, Column: 0
Failed to load resource: the server responded with a status of 404 (Not Found)
File: angular.js, Line: 0, Column: 0
Failed to load resource: the server responded with a status of 404 (Not Found)
File: moment.js, Line: 0, Column: 0
Failed to load resource: the server responded with a status of 404 (Not Found)
File: angular-locale_de.js, Line: 0, Column: 0
Failed to load resource: the server responded with a status of 404 (Not Found)
File: AngularApp.js, Line: 0, Column: 0
Ripple :: Environment Warming Up (Tea. Earl Gray. Hot.)
File: ripple.js, Line: 37, Column: 13059
cordova :: Initialization Finished (Make it so.)
File: ripple.js, Line: 37, Column: 13059
Failed to load resource: the server responded with a status of 404 (Not Found)
File: favicon.ico, Line: 0, Column: 0
Ripple :: Environment Warming Up (Tea. Earl Gray. Hot.)
File: ripple.js, Line: 37, Column: 13059
Failed to load resource: the server responded with a status of 404 (Not Found)
File: favicon.ico, Line: 0, Column: 0
cordova :: Initialization Finished (Make it so.)
File: ripple.js, Line: 37, Column: 13059
Ripple :: Environment Warming Up (Tea. Earl Gray. Hot.)
File: ripple.js, Line: 37, Column: 13059
cordova :: Initialization Finished (Make it so.)
File: ripple.js, Line: 37, Column: 13059
Ripple :: Environment Warming Up (Tea. Earl Gray. Hot.)
File: ripple.js, Line: 37, Column: 13059
cordova :: Initialization Finished (Make it so.)
File: ripple.js, Line: 37, Column: 13059
Failed to load resource: the server responded with a status of 404 (Not Found)
File: favicon.ico, Line: 0, Column: 0
Ripple :: Environment Warming Up (Tea. Earl Gray. Hot.)
File: ripple.js, Line: 37, Column: 13059
cordova :: Initialization Finished (Make it so.)
File: ripple.js, Line: 37, Column: 13059
Failed to load resource: the server responded with a status of 404 (Not Found)
File: favicon.ico, Line: 0, Column: 0
Ripple :: Environment Warming Up (Tea. Earl Gray. Hot.)
File: ripple.js, Line: 37, Column: 13059
cordova :: Initialization Finished (Make it so.)
File: ripple.js, Line: 37, Column: 13059

Gewiss nicht. nodeJS is für mich eine totes Projekt.
Seit über einem Jahr kein Update mehr, schon mehrere Forks und die Entwickler streiten sich. Lange geb ich denen nicht mehr - meine persönliche Meinung.

Deine Pfade stimmen nicht.
Das denke ich kannste selbst lösen 😉

Die einzigen Pfade die ich eingetippt habe sind doch die hier:

    
    <script src="cordova.js"></script>
    <script src="scripts/angular.js"></script>
    <script src="scripts/angularApp.js"></script>

Die stimmen eigentlich. Cordova ist zwar nicht auf Top-Ebene vorhanden soll aber zur Laufzeit da sein, hab ich zumindest gelesen.
Und meine Datei heisst eigentlich angularApp.ts <- eine Typescript datei, aber im Hintergrund wird doch auch an der Stelle eine js Datei erzeugt die ich referenzieren muss oder?
Oder bin ich auf dem Holzweg. Bitte auch wenn das ein absolutes Newbie Problem ist, ich sehe kein Problem...

404 heisst, dass das Element nicht gefunden wurde.
Ergo stimmt der Pfad nicht oder die Ressource ist nicht dort, wo sie erwartet wird. Ein eigentlich gibt es da nicht 😉

Hast Du Dir angeschaut, was TypeScript macht?
Es erzeugt typisiert Javascript. Du kannst kein TypeScript konsumieren sondern nur kompilieren - genau 😃