Question

我最近开始使用angularjs，到目前为止发现它很棒。我决定在一个新项目中使用它，并希望有一个单页应用程序。

我的想法是每个“页面”都有一个控制器，使用menuController来显示/隐藏控制器，因此一次只能看到一个。

通过一些实验，我编写了这个代码：

var StoresAdminModule = angular.module("StoresAdminModule", []);

StoresAdminModule.service("pageStateService", function () {

    var observerCallbacks = [];

    //register an observer
    this.registerObserverCallback = function (callback) {
        observerCallbacks.push(callback);
    };

    //call this when you know 'foo' has been changed
    this.notifyObservers = function () {
        angular.forEach(observerCallbacks, function (callback) {
            callback();
        });
    };

    var pageState = {};

    pageState.Pages = [];
    pageState.Pages["HomeController"] = true;
    pageState.Pages["CategoryController"] = false;

    this.showPage = function (controller) {

        for (var key in pageState.Pages) {
            pageState.Pages[key] = false;
        }

        pageState.Pages[controller] = true;
        return false;
    };

    this.getState = function (controller) {

        return pageState.Pages[controller];
    };
});

StoresAdminModule.controller("HomeController", function ($scope, pageStateService) {
    var message = {};
    message.Welcome = "Just Testing Home!";
    $scope.message = message;

    var updateFoo = function() {
        $scope.show = pageStateService.getState("HomeController");
    };


    pageStateService.registerObserverCallback(updateFoo);
});

StoresAdminModule.controller("CategoryController", function ($scope, pageStateService) {

    var message = {};
    message.Welcome = "Just Testing Category!";
    $scope.message = message;

    var updateFoo = function () {
        $scope.show = pageStateService.getState("CategoryController");
    };

    pageStateService.registerObserverCallback(updateFoo);
});


StoresAdminModule.controller("MenuController", function ($scope, pageStateService) {

    $scope.doStuff = function(page)
    {
        pageStateService.showPage(page);
        pageStateService.notifyObservers();
    };
});

<div ng-app="StoresAdminModule">
    <div ng-controller="MenuController">
        <button ng-click="doStuff('HomeController')">Home</button> <button ng-click="doStuff('CategoryController')">Categorys</button>
    </div>
    <div ng-controller="HomeController" ng-show="show">
        <p ng-bind="message.Welcome"></p>
    </div>
    <div ng-controller="CategoryController" ng-show="show">
        <p ng-bind="message.Welcome"></p>
    </div>
</div>

它使用服务来维护页面显示/隐藏状态，观察者模式将通知推送到每个页面控制器中的变量以更改show bool。

这样做有什么根本的错误吗？由于我是角色的新手，我可能会遗漏一些东西。

有更简单的方法吗？

我想在推进并在生产中使用这样的模式之前检查一切正常。

Answer 1

您可以通过

执行此操作

angular.module('StoresAdminModule', [])
    .config(['$routeProvider', '$httpProvider', function ($routeProvider, $httpProvider) {
        $routeProvider
            .when('/menulink', { templateUrl: 'YourPage.html', controller: 'HomeController' })
            .when('/menulink1', { templateUrl: 'YourPage.html', controller: 'CategoryController' })
            .otherwise({ redirectTo: '/' });

        //initialize get if not there      
    }])

更多详情

http://scotch.io/tutorials/javascript/single-page-apps-with-angularjs-routing-and-templating

http://www.codeproject.com/Articles/686880/AngularJS-Single-Page-Application-with-WebAPI-and

Angularjs一页应用程序

1 个答案: