Javascript 角度ui路由器未加载控制器或模板_Javascript_Angularjs_Angular Ui Router

Javascript 角度ui路由器未加载控制器或模板

javascript angularjs

Javascript 角度ui路由器未加载控制器或模板,javascript,angularjs,angular-ui-router,Javascript,Angularjs,Angular Ui Router,我似乎有一个问题，让用户界面路由器实际路由的东西。我确信我的所有javascript文件都已加载，angular没有抛出任何错误。我有一个声明应用程序和基本控制器的HTML文件，然后加载包含路由器的js文件。您可以在下面看到我的代码示例 index.html <!DOCTYPE html> <html ng-app="Yellr" ng-controller="yellrBaseCtrl"> <head> <title>Yellr Mode

我似乎有一个问题，让用户界面路由器实际路由的东西。我确信我的所有javascript文件都已加载，angular没有抛出任何错误。我有一个声明应用程序和基本控制器的HTML文件，然后加载包含路由器的js文件。您可以在下面看到我的代码示例

index.html

<!DOCTYPE html>
<html ng-app="Yellr" ng-controller="yellrBaseCtrl">
<head>
    <title>Yellr Moderator</title>
    <link rel="stylesheet" type="text/css" href="assets/css/site.css"/>
</head>
<body>
    <div class="side-nav">
...
    </div>
    <div class='main' ui-view>
    </div>

    <script src="assets/js/scripts.min.js"></script>
</body>
</html>

我是不是漏掉了什么明显的东西？您可以找到整个代码库

问题在于模板url。我看到您直接从根文件夹而不是应用程序提供文件。您必须将模板url更改为：

$stateProvider
   .state('feed', {
        url: '/feed',
        templateUrl: 'app/templates/feed.html',
         controller: 'rawFeedCtrl'
    });

此外，我还建议将所有html和脚本构建到dist文件夹中，并从那里提供服务。

I在这里

我添加了对angular和ui路由器的引用

<!DOCTYPE html>
<html ng-app="Yellr" ng-controller="yellrBaseCtrl">

  <head>
    <title>Yellr Moderator</title>

    <link rel="stylesheet" type="text/css" href="assets/css/site.css" />
  </head>

  <body>
    <div class="side-nav">
...
    </div>
    <div class="main" ui-view=""></div>

    <script data-require="angular.js@*" data-semver="1.3.7" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.7/angular.js"></script>
    <script data-require="ui-router@*" data-semver="0.2.13" src="//rawgit.com/angular-ui/ui-router/0.2.13/release/angular-ui-router.js"></script>

    <script src="yellr.routes.js"></script>
    <script src="yellrBaseCtrl.js"></script>
    <script src="rawFeedCtrl.js"></script>
  </body>

</html>

因此，此状态在应用程序启动时加载：

$stateProvider
    .state('feed', {
        url: '/feed',
        templateUrl: 'feed.html',
        controller: 'rawFeedCtrl'
    });

剩下的和你的情况一样。。。工作检查它

我建议的第一件事是，如果ui路由器正在处理路由并分配控制器，那么在html元素上分配控制器可能会有冲突

<html ng-app="Yellr" ng-controller="yellrBaseCtrl">

然后，例如，在CustomerListController中：

ddsWeb.controller('customerListController', function ($scope,
                                                      pageLinkService,
                                                      searchService) {

    searchService.setType('customerSearch');
    pageLinkService.setType('customerPageChange');

    $scope.getCustomers = function () {
        $scope.CustomerModel.getAll(pageLinkService.current_page, pageLinkService.per_page, searchService.searchText)
            .then(function (result) {
                pageLinkService.current_page = Number(result.data.current_page);
                pageLinkService.last_page = Number(result.data.last_page);
                pageLinkService.calculatePages();
            });
    };

    $scope.$on('customerSearch', function () {
        pageLinkService.resetPages();
        $scope.getCustomers();
    });

    $scope.$on('customerPageChange', function () {
        $scope.getCustomers();
    });

    $scope.getCustomers();

});

请注意，我的代码没有“正确”模块化；一个模块（ddsWeb）中有太多内容，我正计划解决这个问题

希望这能有所帮助。

尝试将

templateUrl:'/templates/feed.html'

更改为

templateUrl:'templates/feed.html'

@alexs我似乎只是在某些时候得到了一个404 for feed.html。我不确定是什么可能导致此应用程序中出现竞态情况。这似乎是我的一个浏览器扩展的问题。

<html ng-app="Yellr" ng-controller="yellrBaseCtrl">

<html ng-app="ddsWeb">
....
<!--header-->
<div ui-view="header"></div>

<!--content area-->
<div ui-view="content" class="container-fluid slide"></div>

<!--footer-->
<div ui-view="footer"></div>
...

var ddsWeb = angular.module('ddsWeb',
    [
        'ui.router',
...
    ]);


// configure states
ddsWeb.config(function ($stateProvider, $urlRouterProvider) {

    // For any unmatched url, redirect to /state1
    $urlRouterProvider.otherwise("/customers");

    // Now set up the states
    $stateProvider
        .state('customers', {
            abstract: true,
            url: "/customers",
            views: {
                header: {
                    templateUrl: "/project/partials/header.html"
                },
                content: {
                    templateUrl: "/project/partials/customers/customers.html"
                },
                footer: {
                    templateUrl: "/project/partials/footer.html"
                }
            }
        })

        .state('customers.list', {
            url: '',
            views: {
                'list@customers': {
                    templateUrl: "/project/partials/customers/customers.list.html",
                    controller: "customerListController"
                },
                'searchbar@customers': {
                    templateUrl: "/project/search/searchbar.html",
                    controller: "searchController"
                },
                'pagination@customers': {
                    templateUrl: "/project/pagelink/pagination.html",
                    controller: "pageLinkController"
                }
            }
        })

        .state('customers.detail', {
            url: '/detail/{customerId}',
            views: {
                'detail_modal@customers': {
                    controller: 'customerDetailController'
                }
            }
        })

});

ddsWeb.controller('customerListController', function ($scope,
                                                      pageLinkService,
                                                      searchService) {

    searchService.setType('customerSearch');
    pageLinkService.setType('customerPageChange');

    $scope.getCustomers = function () {
        $scope.CustomerModel.getAll(pageLinkService.current_page, pageLinkService.per_page, searchService.searchText)
            .then(function (result) {
                pageLinkService.current_page = Number(result.data.current_page);
                pageLinkService.last_page = Number(result.data.last_page);
                pageLinkService.calculatePages();
            });
    };

    $scope.$on('customerSearch', function () {
        pageLinkService.resetPages();
        $scope.getCustomers();
    });

    $scope.$on('customerPageChange', function () {
        $scope.getCustomers();
    });

    $scope.getCustomers();

});