CODEWITHSUNDEEP
javascriptangularjs
Chris W
Chris W

Reputation: 1802

Angularjs one page application

I've recently started to use angularjs and have found it great so far. I've decided to use it on a new project and would like to have a one page application.

My idea was to have a controller per "page", using a menuController to show/hide the controllers, so only one is ever visible at a time.

With a bit of experimentation, I've coded this:

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>

It uses a service to maintain page show/hide state and the observer pattern to push notifications to a variable in each page controller to change a show bool.

Is there anything fundamentally wrong with doing it this way? As I'm new to angular, I might be missing something.

Is there an easier way to do this?

I want to check everything is ok before pushing ahead and using such a pattern in production.

Upvotes: 0

Views: 265

Answers (1)

Ramesh Rajendran
Ramesh Rajendran

Reputation: 38683

You can do this by 

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

More details

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

Upvotes: 2

Related Questions