路由指向空白页面

时间:2017-08-05 22:38:45

标签: angularjs angular-routing

我有一个项目,我正在为一个类使用AngularJS和Angular-route。我正在使用作为模板的类的分配结构,但由于某种原因我无法显示项目页面。

我有以下文件结构:

enter image description here

config.js:

/**
 * Created by Anthony on 8/4/2017.
 */
(function () {
    angular
        .module("SpotifyReviews")
        .config(Config);
    function Config($routeProvider) {
        console.log("hello from config");
        $routeProvider
            .when("/", {
                templateUrl: "views/templates/search.view.client.html",
                controller: "SearchController",
                controllerAs: "model"
            })

    }
});

app.js:

/**
 * Created by Anthony on 8/4/2017.
 */
(function () {
    angular
        .module("SpotifyReviews", ["ngRoute"]);
})();

的index.html

<!DOCTYPE html>
<html lang="en" ng-app="SpotifyReviews">
<head>
    <meta charset="UTF-8">
    <title>Project Home Page</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0rc1/angular-route.min.js"></script>
    <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/handlebars.js/2.0.0-alpha.1/handlebars.min.js"></script>

    <script src="app.js"></script>
    <script src="config.js  "></script>
    <script src="views/controllers/search.controller.client.js"></script>
    <script src="services/search.service.client.js"></script>


</head>
<body>
<div ng-view class="ng-scope">

</div>


</body>
</html>

search.controller.client.js:

/**
 * Created by Anthony on 7/24/2017.
 */
(function () {
    angular
        .module("SpotifyReviews")
        .controller("SearchController", SearchController);

    function SearchController($location, $routeParams, SearchService) {
        var vm = this;

        vm.albums = [];

        vm.albumSearch = albumSearch;


        function init() {
            vm.queryString = "";
            console.log("hello");
        }

        init();

        function albumSeach() {
            SearchService.searchAlbum(vm.queryString)
                .then(vm.albums = response.data);
        }


    }

})();

search.service.client.js:

/**
 * Created by Anthony on 7/23/2017.
 */

(function () {
    angular
        .module("SpotifyReviews")
        .factory("SearchService", SearchService);
    function SearchService($http) {

        var api = {
            "searchAlbum": searchAlbum
        };
        return api;

        function searchAlbum(queryString) {



        }


    }
})();

据我所知,我正在追随与公开/任务完全相同的结构,但我不能为我的生活让它显示出来。导航到localhost:3000 /赋值会自动重定向到localhost:3000 / assignment /#!/,但localhost:3000 / project和localhost:3000 /#!/都只显示一个空白屏幕。任何和所有的帮助将不胜感激。

0 个答案:

没有答案