Angularjs單頁應用程序

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

它使用服務來維持頁面顯示/隱藏狀態和觀察者模式推送通知中的變量每個頁面控制人變更一個節目布爾。

這樣做有什麼根本性的錯誤嗎？由於我是新角色，我可能會錯過一些東西。

有沒有更簡單的方法來做到這一點？

在推進和在生產中使用這種模式之前，我想檢查一切正常。

來源

2014-02-24 Chris W

做到這一點，我認爲你應該考慮使用ngRoute解決您的需求 - > HTTP：//文檔。 angularjs.org/api/ngRoute/service/$route – michael

看看角度ui路由器https://github.com/angular-ui/ui-router –

您可以通過

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://www.codeproject.com/Articles/686880/AngularJS-Single-Page-Application-with-WebAPI-and

來源

2014-02-24 13:27:09

感謝所有的答案。我應該先看看更多的研究！ –

Angularjs單頁應用程序

回答

相關問題