Angular ui-router 未加载控制器或模板

Question

我似乎无法让 ui-router 实际路由。我确定我的所有 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>

yellr.routes.js（编译成scripts.min.js）

'use strict';

angular
    .module('Yellr', ['ui.router'])
    .config(['$stateProvider', '$urlRouterProvider',
            function ($stateProvider, $urlRouterProvider) {

        $urlRouterProvider.otherwise('/notfound');

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

console.log('Yellr routes');

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

Answer 1

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

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

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

Answer 2

我created working plunker这里

我添加了对 angular 和 ui-router

的引用

<!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>

并更改了其他内容：

$urlRouterProvider.otherwise('/feed');

所以这个状态是在应用程序启动时加载的：

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

剩下的就和你的情况一样……工作。检查一下 here

Answer 3

我建议的第一件事是，鉴于 ui-router 正在处理路由并分配控制器，可能会与您在 html 元素上分配控制器发生冲突

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

使用我正在处理的项目中的一些示例代码：

在index.html中：

<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>
...

在app.js中：

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'
                }
            }
        })

});

然后，例如，在 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();

});

请注意我的代码没有"properly"模块化；一个模块 (ddsWeb) 中的内容过多，我正计划修复它。

希望对您有所帮助。

Angular ui-router 未加载控制器或模板

Angular ui-router not loading controller or template

javascript

angularjs

angular-ui-router