单击 Angular Href 时没有任何反应

Question

我正在使用带有 webapi 2 控制器的 Angular 路由。

虽然默认路径加载了正确的数据，但当我单击列表中包含指向详细信息页面的链接的项目时，没有加载任何数据。

浏览器显示我认为正确的 url (http://localhost:xxxxx/#/details/2)，但没有调用 DetailsController 脚本文件，也没有调用 webapi2 控制器上的任何方法。

这是我的主页：

<div class="jumbotron">
    <h1>Movies Example</h1>
</div>

@section scripts {
    <script src="~/Scripts/angular.js"></script>
    <script src="~/Scripts/angular-route.js"></script>
    <script src="~/Client/Scripts/atTheMovies.js"></script>
    <script src="~/Client/Scripts/ListController.js"></script>
    <script src="~/Client/Scripts/DetailsController.js"></script>
}

<div ng-app="atTheMovies">
    <ng-view></ng-view>
</div>

这是部分列表：

<div ng-controller="ListController as ctrl">
    <h1>{{ctrl.message}}</h1>
    <h2>There are {{ctrl.movies.length}} Movies in the Database</h2>

    <table>
        <tr ng-repeat="movie in ctrl.movies">
            <td>{{movie.Title}}</td>
            <td>
                <a ng-href="/#/details/{{movie.Id}}" >Details</a>
            </td>
        </tr>
    </table>
</div>

这里是部分细节：

<div ng-controller="DetailsController as ctrl2">
    <h2>ctrl2.message</h2>
    <h2>{{movie.Title}}</h2>
    <div>
        Released in {{movie.ReleaseYear}}
    </div>    
    <div>
        {{movie.Runtime}} minutes long.
    </div>
</div>

这是创建 Angular 应用程序的 javascript 文件：

(function () {
    var app = angular.module("atTheMovies", ["ngRoute"]);

    var config = function ($routeProvider) {

        $routeProvider
        .when("/list", { templateUrl: "/client/views/list.html" })
        .when("/details/:id", { templatUrl: "/client/views/details.html" })
        .otherwise(
        { redirectTo: "/list" });
    };

    app.config(config);

}());

这里是创建列表控制器的 javascript 文件：

(function (app) {
    app.controller("ListController", ['$http', function ($http) {
        var ctrl = this;
        ctrl.message = "Hello World!";
        ctrl.movies = [];
        $http.get("/api/movie")
        .success(function (data) {
            ctrl.movies = data;
        })
        .error(function(status){
            ctrl.message = status;
        });
    }])
}(angular.module("atTheMovies")));

这里是创建细节控制器的 javascript 文件：

(function (app) {
    app.controller("DetailsController", ['$routeParams', '$http', function ($routeParams, $http) {
        var ctrl2 = this;
        ctrl2.message = "";
        ctrl2.movie = {};

        var id = $routeParams.id;
        $http.get("/api/movie/" + id)
        .success(function(data){
            ctrl2.movie = data;
        }).error(function (status) {
            ctrl2.message = status;
        });
    }])
}(angular.module("atTheMovies")));

最后是 webapi2 控制器

public class MovieController : ApiController
{
    private MovieDb db = new MovieDb();

    // GET: api/Movie
    public IQueryable<Movie> GetMovie()
    {
        return db.Movies;
    }

    // GET: api/Movie/5
    [ResponseType(typeof(Movie))]
    public IHttpActionResult GetMovie(int id)
    {
        Movie movie = db.Movies.Find(id);
        if (movie == null)
        {
            return NotFound();
        }

        return Ok(movie);
    }

Answer 1

您的路线配置中有错字，即templatUrl

.when("/details/:id", { templatUrl: "/client/views/details.html" })

应该是

.when("/details/:id", { templateUrl: "/client/views/details.html" })