将 nav 与 ng-view 分开

Question

我是 Angularjs 的新手，正在尝试建立一个新站点，但我对设置感到困惑。我有一个模块，并且正在使用 $route 成功导航，但我不知道如何处理我的导航。当我加载模块时，我想读取我的数据库以获取允许用户访问的链接列表，然后在导航中将它们吐出。我不想在每个视图中都重复这一点，因为我不需要。所以我试图弄清楚如何运行一次 ajax 调用，然后继续更改视图（我还想添加一个类 .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 Router 的文档，您可以使用它做更多事情！