CRUD Operation (Node.js + Express + MongoDB) with UI integration (Angular.js )

In previous post CRUD Operations in Node.js Application (Expresss Framework) using mongodb, we have CRUD Operation on REST Console. In this article, we will develop FrontEnd using Angular.js. Before that we will reorganize our structure.

+ client
 + assets
 + modules (there can be multiple modules)
   + app
     + config
     + app.client.routes.js
     + controllers
       + app.client.controller.js
     + views
       + app.client.view.js (can be add multiple views)
     + app.client.module.js
 + application.js
 + config.js
 + index.html
+ server
 + company(there can be multilple other modules like company)
    + company.server.controller.js
    + company.server.model.js
    + company.server.route.js
 + config
    + config.js
    + db.js
 + routes.js
+ app.js
+ package.json
+ bower.json
+ README.md

There will be some changes in server code like we need to load frontend directory in server side etc. Have a look at repository for new changes in server code. Before going to start development in Angular.js, first have a look to ui-router. Let’s start FrontEnd Side code, First we need to add bower.json file in root folder with defined specific dependencies which will require in our code. For installation of packages, we have two options:

1. Need to add one line in scripts (package.json file) and only run npm install.

“scripts”: {
   “postinstall”: “bower install”
 },

2. You can directly run bower install but in this case you will run npm install command as well.

In client folder, create on application.js file and add below code in that file. This file have configuration of application.

Now create config.js file in client folder, this file add module dependency and register new modules.

In applicationModuleVendorDependencies, you can add more modules, according to your need. Now create index.html file, and add all bower_components, modules and all stylesheets and javascripts file here.

Create app folder in client/modules location. Create app.client.module.js file, which just register module.

ApplicationConfiguration.registerModule(‘app’);

Create ui-routes in app.client.routes.js file in client/modules/app/config folder.

angular.module(‘app’).config([‘$stateProvider’, ‘$urlRouterProvider’, 
   function($stateProvider, $urlRouterProvider) {
    // Home state routing
     $urlRouterProvider.otherwise(‘/’);
     $stateProvider
          .state(‘app’, {
               url: ‘/’,
               templateUrl: ‘modules/app/views/app.client.view.html’
           });
 }
]);

In this route, we will add more routes.

Create controller in app.client.controller.js file in client/modules/app /controllers folder. Here, we will add functionality.

angular.module(‘app’).controller(‘AppController’, [‘$scope’,
   function($scope) {
     $scope.function = function(){
     }
   }
]);

Create view in app.client.view.html file in client/modules/app/views folder. Here, we will add UI-view. You can create multiple modules as per your requirements, but remember everytime register module, controller name, service name should be unique. Have a look to running application in below image:

Feel free to download the full code for this post to see the full picture of how everything works together and customize it for your own needs. Have a look to repository for complete working code.

We will come with more about MongoDB and Node.js in future posts.

You can ask any query about article and you can share this with everyone in the comments section below.

Oh, and if you liked this, click the 💚 below. Follow me for more articles on technology.

Thanks!
Happy Coding!!