如何在VS2015中的angujarJS 1.6.4中使用角度布线

时间:2017-08-23 16:21:38

标签: javascript angularjs visual-studio-2015 routing ng-view

大家好我开始使用angularJS,我尝试添加路由到应用程序,但我什么也没收到,我也在使用指令,我不知道这是不是问题。 所以我有5个不同的文件,我正在尝试使用ng-view将tripsView.html路由到Trips.cshtml 我非常感谢您的时间和帮助

这是我的代码:

APP-trip.js

"use strict";
var app = angular.module("app-trips",["ngRoute"]);

app.config(function($routeProvider) {
    $routeProvider
        .when("/",
        {
            controller: "tripsController",
            //controllerAs: "trip",
            templateUrl: "/views/tripsView.html"
        });
    $routeProvider.otherwise({ redirectTo: "/" });
});

simpleControl.js

app.directive("waitCursor", function waitCursor() {
    return {
        scope: {
            show: "=displayWhen"
        },
        restrict: "E",
        templateUrl: "/views/waitCursor.html"
    };
});

tripsController.js

(function () {
    "use strict";

    app.controller("tripsController", function ($scope, $http) {
        $scope.trips = [];
        $scope.errorMessage = "";
        $scope.isBusy = true;

        $http.get("/api/trips")
            .then(function(response) {
                //Success
                angular.copy(response.data, $scope.trips);
                },
                function(error) {
                    //Failure
                    $scope.errorMessage = "Failed to load data: " + error;
                })
                .finally(function() {
                $scope.isBusy = false;

            });

        $scope.addTrip = function (newTrip) {

            newTrip.dateCreated = new Date();

            $scope.isBusy = true;
            $scope.errorMessage = "";
            $http.post("/api/trips", newTrip)
                .then(function (response) {
                        $scope.trips.push(response.data);
                        $scope.newTrip = {};
                        // Success
                    },
                    function() {
                        // Failure
                        $scope.errorMessage = "Failed to save new trip";
                    })
                .finally(function() {
                    $scope.isBusy = false;
                });

        };


    });
})();

Trips.cshtml

@model IEnumerable<TheWorld.Models.Trip>
@{
    ViewBag.Title = "Home Page";
}

    <script src="~/lib/angular/angular.min.js"></script>    
    <script src="~/lib/angular-route/angular-route.min.js"></script>    
    <script src="~/js/app-trips.js"></script>    
    <script src="~/js/tripsController.js"></script>    
    <script src="~/js/simpleControls.js"></script>

<div ng-app="app-trips" class="row" >

    <div ng-view></div>

    <div class="col-md-6 @*col-xs-8*@">
        <h1>The World</h1>
        <p>This will be a fun website soon</p>

        <form>
            <div class="form-group">
                <label>Date </label>
                <input class="form-control" />
            </div>
            <div class="form-group">
                <label>Location</label>
                <input class="form-control" />
            </div>
            <div>
                <input type="submit" value="Add" class="btn btn-success" />
            </div>
        </form>
    </div>
</div>
<div class="col-md-6 @*col-xs-4*@">
    <h2>The Map</h2>

    @foreach (var item in Model)
    {
        <li>  @item.Name: @item.DateCreated.ToString("d") </li>
    }
</div>

tripsView.html --------------------------------------

  <div  class="col-md-6 col-md-offset-3">
    <div class="text-danger" ng-show="errorMessage"> {{ errorMessage}}</div>

    <wait-cursor display-when="isBusy"></wait-cursor>

    <table class="table table-responsive table-striped">
        <tr ng-repeat="trip in trips">
            <td>{{ trip.name }}</td>
            <td>{{ trip.dateCreated | date:'MM-dd-yyyy' }}</td>
            <td>
                <a 
                    href="" class="btn btn-sm btn-primary">Manage
                </a>
            </td>
        </tr>
    </table>

    <form novalidate name="newTripForm" ng-submit="addTrip(newTrip)">
        <div class="form-group">
            <label for="name">Trip Name</label>
            <input class="form-control" type="text" id="name" value="name" ng-model="newTrip.name" required ng-minlength="5" />
        </div>
        <div class="form-group">
            <input type="submit" value="Add" class="btn btn-success btn-sm" ng-disabled="newTripForm.$invalid" />
            <span ng-show="newTripForm.$error.required" class="text-warning"> Name is required</span>
            <span ng-show="newTripForm.$error.minlength" class="text-warning"> Name must be at least 5 characters</span>
        </div>
    </form>
</div>

0 个答案:

没有答案