Javascript Angularjs单页应用程序

我最近开始使用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>

var StoresAdminModule=angular.module（“StoresAdminModule”，[]）；
StoresAdminModule.service（“pageStateService”，函数（）{
var observer回调=[]；
//登记观察员
this.registerObserverCallback=函数（回调）{
observerCallbacks.push（回调）；
};
//当您知道“foo”已更改时，请拨打此电话
this.notifyObservers=函数（）{
forEach（observer回调，函数（回调）{
回调（）；
});
};
var pageState={}；
pageState.Pages=[]；
pageState.Pages[“HomeController”]=true；
pageState.Pages[“CategoryController”]=false；
this.showPage=函数（控制器）{
for（pageState.Pages中的var键）{
pageState.Pages[key]=false；
}
pageState.Pages[控制器]=真；
返回false；
};
this.getState=函数（控制器）{
返回pageState.Pages[控制器]；
};
});
StoresAdminModule.controller（“HomeController”，函数（$scope，pageStateService）{
var message={}；
message.Welcome=“刚刚测试回家！”；
$scope.message=消息；
var updateFoo=函数（）{
$scope.show=pageStateService.getState（“HomeController”）；
};
registerObserverCallback（updateFoo）；
});
StoresAdminModule.controller（“CategoryController”，函数（$scope，pageStateService）{
var message={}；
message.Welcome=“仅测试类别！”；
$scope.message=消息；
var updateFoo=函数（）{
$scope.show=pageStateService.getState（“CategoryController”）；
};
registerObserverCallback（updateFoo）；
});
控制器（“MenuController”，函数（$scope，pageStateService）{
$scope.doStuff=函数（第页）
{
pageStateService.showPage（第页）；
pageStateService.notifyObservers（）；
};
});
家庭分类

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

这样做有什么根本性的错误吗？由于我是个新手，我可能会错过一些东西

有没有更简单的方法

在推进生产并在生产中使用这种模式之前，我想检查一切是否正常。

您可以通过

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

更多细节

---

我认为你应该考虑使用NGUNTE来解决你的需求。看来我应该先多做点研究！