将导航与 ng-view 分开

Question

我是 Angularjs 的新手，正在尝试建立一个新网站，但我对设置感到困惑。我有一个模块，正在使用 $route 成功导航，但我不知道如何处理我的导航。当我加载模块时，我想读取我的数据库以获取允许用户访问的链接列表，然后将它们吐出到导航中。我不想在每个视图中重复这一点，因为我不需要。所以我想弄清楚如何运行 ajax 调用一次然后继续更改视图（我还想添加一个 class .selected 到他们的任何视图'重新开始）。我将如何使用指令来做到这一点？

(function () {
    var app = angular.module('manage', ['ngRoute', 'manageControllers']);

    /*
    I've tried this but obviously $http isn't injected. Can I even do that?
    var thisApp = this;

    $http.get('/test/angular/php/angular.php', {params: {'function': 'nav'}}).then(function successCallback(response) {

    });
    */


    app.config(['$routeProvider',
        function($routeProvider) {
            $routeProvider.
                when('/', {
                    templateUrl: 'templates/dash.html',
                    controller: 'DashCtrl'
                }).
                when('/inventory/', {
                    templateUrl: 'templates/inventory.html',
                    controller: 'InventoryCtrl'
                }).
                when('/inventory/:mvKey', {
                    templateUrl: 'templates/inventory.html',
                    controller: 'InventoryCtrl'
                }).
                when('/inventory/:mvKey/:tab', {
                    templateUrl: 'templates/inventory.html',
                    controller: 'InventoryCtrl'
                }).
                /* etc...*/
        }
    ]);
})();

编辑：

我试图让导航到运行一次

controllers.js

var manageControllers = angular.module('manageControllers', []);

var thisApp = this;
nav = null;
navSelected = '/';

manageControllers.controller('NavCtrl', ['$scope', '$http', function($scope, $http) {
    if (thisApp.nav === null) {
        $http.get('php/angular.php', {params: {'function': 'nav'}}).then(function successCallback(response) {
            console.log(response.data);
            thisApp.nav = response.data;
            $scope.nav = thisApp.nav;
            $scope.select = thisApp.navSelected;
        });
    } else {
        $scope.nav = thisApp.nav;
        $scope.select = thisApp.navSelected;
    }
}]);

manageControllers.controller('DashCtrl', ['$scope', function($scope) {
    thisApp.navSelected = '/';
}]);

Answer 1

我会切换到 UI 路由器 (https://github.com/angular-ui/ui-router) 而不是 $route。它使您的路由更加灵活。

一个小例子：

app.config(['$stateProvider',
        function($stateProvider) {
            $stateProvider.
                state('/', {
                    url: '/',
                    views: {
                        '': {
                            templateUrl: 'templates/dash.html',
                            controller: 'DashCtrl'
                        },
                        'nav@': {
                            templateUrl: 'path/to/nav.html',
                            controller: 'NavCtrl'
                        },
                    }
                }).
                state('/inventory/', {
                    url: '/',
                    views: {
                        '': {
                            templateUrl: 'templates/dash.html',
                            controller: 'DashCtrl'
                        },
                        'nav@': {
                            templateUrl: 'path/to/nav.html',
                            controller: 'NavCtrl'
                        },
                    }
                }).
                // ...

在你的 index.html

<div ui-view="nav"></div>
<div ui-view ></div>

仔细查看 UI 路由器的文档，您可以使用它做更多的事情！

将导航与 ng-view 分开

Separate nav from ng-view

angularjs

angularjs-directive

angularjs-routing

angularjs-module