angularjs - Angular StartUp project MVC skeleton

I'm willing to start an web app and I want to use for client-side angular.js, bootstrap and further add DeployD.

But I have a problem regarding the angular project: I don't find any startup project with basic MVC skeleton.

(Someone asked this but with no answer specifically: Angularjs MVC skeleton project with user management)

Btw, I am a beginner related to angular and using package controllers. I found some git-sources with angular but there is no MVC or there are too many stuff that I hope that I won't use.

Help?

2 Answers

  1. Michael- Reply

    2019-11-16

    I suggest you take a look at Yeoman to help you build your project. Basically, it's a tool built on top of NodeJS, that lets you create your projects boilerplate using different generators. There are tons of generators written for all sorts of libraries. Since you are using AngularJS, I suggest you take a look at this AngularJS Generator.

    After you install Yeoman and the generator bootstrapping your app could be as simple as running

    mkdir my-new-project && cd $_
    yo angular [app-name]
    

    There are also other generators that will also add Twitter Bootstrap or other libraries, but you can easily solve that using Bower.

    Now, I don't fully understand what you mean by an MVC skeleton. AngularJS doesn't really behave as an MVC framework. It has its own way of doing things, and you should really try to follow their way if you really want to get the best from the library. For example, the concept of a Model to hold your data, doesn't exist as a core component.

    That said, you could implement things in a way that AngularJS behaves similar to an MVC or at least MV* app. For example, AngularJS has a component called a factory, which is basically a singleton object that you can inject on other components of you app to share behaviours. If you need more information on factories you can check this StackOverflow thread. Using a factory you could construct you own Model. Better yet, you could make use of AngularJS $resource service if you want your model to communicate with a RESTful api.

    Here is a basic example on how to accomplish this:

    // We are assuimng that our AngularJS app resides on an "App" global var
    
    App.factory('Model', ['$resource', function($resource){     
        var Model = function(attributes, options){
            this.attributes = attributes;
            this.options    = options;
        };
    
        Model.prototype.save(key, val, options){
            // Save code goes here
        }
    
        Model.prototype.set(key, val, options){
            // Set code goes here
        }
    
        Model.prototype.fetch(options){
            // fetch code goes here
        }
    
        Model.prototype.destroy(options){
            // destroy code goes here
        }
    
        var restRoutes =       {
          'create':  { method: 'POST' },
          'index':   { method: 'GET', isArray: true },
          'show':    { method: 'GET', isArray: false },
          'update':  { method: 'PUT' },
          'patch':   { method: 'PATCH' },
          'destroy': { method: 'DELETE' }
        };
    
        Model.prototype.sync = $resource('/[your_backend_api]/:id',{id: '@_id'}, restRoutes)
    
        /*
        ** Return
        */
        return Model;
      }]
    );
    

    Also, you should check this library out to glue everything together: Ui-Router. This library uses States to control how your app reacts. On each state you could define the template which would represent the view, the controller, and a resolve object that can manage the data from your server and feed it to your controller.

    Hope this helps!

  2. Mike- Reply

    2019-11-16

    I have created an angular app skeleton using bootstrap, jade, gulp and font-awesome which is also following MVC. It may help you. Follow the instruction to run the app.
    Angular app skeleton

Leave a Reply

Your email address will not be published. Required fields are marked *

You can use these HTML tags and attributes <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>