3
\$\begingroup\$

I'm writing and app in AngularJS and am learning about writing RESTful services. I also want to make sure that I'm understanding the MVC pattern correctly. In my code, this is my take on how I'm implementing MVC.

I have two services that get JSON data from the server. The JSONController then calls these services, and in turn, populates the model to be used in the HTML template. Angular works its magic in the HTML template, which creates the view(?). So, is the view just what the user sees?

Also, is this a good way to implement MVC in Angular?

app.js

(function() {

    angular.module('myapp', ['ui.bootstrap', 'ngRoute', 'ngResource']);
})();

services.js

(function() {

    angular
        .module('myapp')
        .factory('Instance', ['$resource', function($resource) {

            return $resource('assets/json/flat.json', {}, {
                query: {method:'GET', params:{}, isArray:false}
            });
        }]);

    angular
        .module('myapp')
        .factory('InstanceStatus', ['$resource', function($resource) {

            return $resource('assets/json/inst_status.json', {}, {
                query: {method:'GET', params:{}, isArray:false}
            });
        }]);
})();

controllers.js

(function() {

    angular
        .module('myapp')
        .controller('JsonController', ['$scope', 'Instance', 
           'InstanceStatus', function($scope, Instance, InstanceStatus) {       

                $scope.flats = Instance.query();        
                $scope.status = InstanceStatus.query();
        }]);
})();

template.html

<html>
<head>
...
</head>
<body ng-app="myapp">
    <div ng-controller="JSONController">
        <div ng-repeat="(barKey, barValue) in flats.foo.bar">
            {{barKey}} - {{barValue.name}}
            <div ng-repeat="...">
                Other good Angular stuff
            </div>
        </div>
    </div>
</body>
</html>

The code for my app is much more extensive than this, but I wanted to provide a readable example for what I'm trying to understand.

\$\endgroup\$

2 Answers 2

Reset to default
5
\$\begingroup\$

Angular is not exactly a MVC framework, it's a MVW - Model-View-Whatever. You can find an explanation here.

The application has a good structure:

  • Services to retrieve data from server
  • Controller to access the services and provide the view model
  • Html for presentation

A good solution to work with Restful in angular is Restangular.

I would recommend you some good practices:

  • Add 'use strict'
  • Use controller as syntax instead of put everything into $scope
\$\endgroup\$
1
\$\begingroup\$

  1. Model is separately object(there isn't Model your code, you just read from API as a object. it isn't good for large projcet). it is easy to manage. There is many properties and methods(your model hasn't method) . Sometimes, variables of API change. But, model's properties don't change. You just replace some keys of response data from reading mehtod of Model(resultData.readFromJSON(response)).

  2. Angular have factory and service. Usually, I use factory for exchanging data among controllers. Services for working with API.

  3. Helpers has a many snippets (checking, validation, setting, getting, ...).

The following codes useful, dynimac, I think.

Model: 

function ResultData() {
    var _name,
        _id,
        _count = 0,
        _list = [];

    Object.defineProperties(this, {
        name: {
            get: function () {
                return _name;
            },
            set: function (val) {
                _name = val;
            },
            enumerable: true
        },
        id: {
            get: function () {
                return _id;
            },
            set: function (val) {
                _id = val;
            },
            enumerable: true
        },
        list: {
            get: function () {
                return _list;
            },
            set: function (val) {
                Helper.setArray(_list, val);
            },
            enumerable: true
        }
    });
    this.readFromJSON = function (json) {
        if(!Helper.isEmpty(json){
           this.id = json.objectId;
           this.name = json.objectName;
           this.list = json.list;
        }
    };
}

Helper:

var Helper = {
    isEmpty: function (obj) {
        return !obj || obj === null || obj === undefined || Array.isArray(obj) && obj.length === 0;
    },
    clearArray: function (arr) {
        if (arr && Array.isArray(arr)) {
            arr.length = 0;
        }
    },
    pushArray: function (arr1, arr2) {
        if (arr1 && arr2 && Array.isArray(arr1)) {
            arr1.push.apply(arr1, Array.isArray(arr2) ? arr2 : [arr2]);
        }
    },
    setArray: function (arr1, arr2) {
        this.clearArray(arr1);
        this.pushArray(arr1, arr2);
    },

};

Controller:

angular
        .module('myapp')
        .controller('JsonController', ['$scope', 'Instance', 
           'InstanceStatus', function($scope, Instance, InstanceStatus) {       

                $scope.resultData = new ResultData();    
                $scope.resultData.readFromJSON(Instance.query());        
                Helper.pushArray($scope.infinityList, InstanceStatus.query());

        }]);
\$\endgroup\$
0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.