Question

我似乎有一个问题让ui-router实际路由东西。我确信我的所有javascript文件都被加载，而角度不会丢失任何错误。我有一个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

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

$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');

所以这个状态在app start上加载：

$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();

});

请注意我的代码不是＆＃34;正确＆＃34;模块化;在一个模块中有太多的东西（ddsWeb），我正计划修复它。

希望这有帮助。

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

3 个答案: