To Do list App with Angular JS (Learn basic concepts of Angular JS)

Hello All,

Angular JS is really awesome framework created by Google, I learn just basic concepts of Angular JS from codeschool and able to create this application. This small application is a To Do list to keep track of your tasks. I created this for only running session, there is no permanent storage of tasks information.

The HTML code used for Tasks App:

        

            Total Tasks: {{TaskCtrl.taskCounter}}
            Tasks Pending: {{TaskCtrl.taskPendingCounter}}
            Tasks Done: {{TaskCtrl.taskDoneCounter}}
            

                Task title:
                

                Task description:
                
                

                
Add Task
            
            

            
        
    

In Angular JS we can have any number of template file which can be included any where in HTML code using "ng-include" directive of Angular JS, Template file for task "TaskTemplate.html" is as shown below:

    {{task.title}}: 
    {{task.description}}
    
Done?
    
    

JavaScript file to create controller for Tasks App is as shown below:

(function () {
    var TaskApp = angular.module("TaskApp", []);
    var Tasks = {
        TasksDetail: [
            {
                id: 1,
                title: "Sample Task 1",
                description: "GO for Aadhar card on Saturday",
                isDone: true
            },
            {
                id: 2,
                title: "Sample Tasks 2",
                description: "Go to shopping in InOrbit on Sunday to buy jeans",
                isDone: false
            }
        ],
        TaskStarted: "Today"
    };

    TaskApp.controller("TaskController", function () {
        this.tasks = Tasks.TasksDetail;
        this.addTask = function (taskTitle, taskDetail) {
            if (!!taskTitle) {
                var task = {
                    id: this.tasks.length + 1,
                    title: taskTitle,
                    description: taskDetail,
                    isDone:false
                }
                this.tasks.push(task);
                this.updateCounter();
                this.taskTitle = "";
                this.taskDesc = "";
            } else {
                alert("Enter title");
            }
        };
        this.removeTask = function (taskId) {
            if (confirm("Task will be deleted..!")) {
                this.tasks.splice(this.getTasksIndex(taskId), 1);
                this.updateCounter();
            }
        };
        this.doneTask = function (taskId,bFlag) {
            this.tasks[this.getTasksIndex(taskId)].isDone = bFlag;
            this.updateCounter();
        };

        this.getTasksIndex = function (taskId) {
            var index = 0;
            for (index = 0; index < this.tasks.length; index++) {
                if (this.tasks[index].id == taskId) {
                    return index;
                }
            }
            return -1;
        };
        this.getTasksCounter = function (isDoneFlag) {
            var counter = 0, index = 0;
            for (index = 0; index < this.tasks.length; index++) {
                if (this.tasks[index].isDone === isDoneFlag) {
                    counter++;
                }
            }
            return counter;
        };
        this.updateCounter = function () {
            this.taskPendingCounter = this.getTasksCounter(false);
            this.taskDoneCounter = this.getTasksCounter(true);
            this.taskCounter = Tasks.TasksDetail.length;
        };
        this.updateCounter();
    });
})();

You can use the app which I have hosted here, you can try to add new tasks, try to complete the taks and delete the tasks:

Style on app is from customized CSS file, you can update CSS properties to update UI/UX. My CSS file is as shown below:

body {
    background-color: #1ec885;
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    color: white;
}

#TaskForm {
    color: white;
}

.Box {
    width: 150px;
    height: 20px;
    display: inline-block;
    margin-top: 5px;
}

.InputTextBox {
    width: 100%;
    border-radius: 4px;
}

.InputTextBoxDescription {
    height: 35px;
}

.Button {
    text-align: center;
    cursor: pointer;
}

.ImageButton {
    vertical-align: middle;
}

.AddButton {
    background-color: #ff6a00;
    width: 200px;
    height: 30px;
    padding-top: 10px;
}

.RemoveButton {
    background-color: #961616;
    width: 20px;
    display: inline-block;
    height: 17px;
}

.DoneButton {
    background-color: #ff6a00;
    width: 50px;
}

#TaskFormTable {
    width: 100%;
}

.TaskItem {
    margin: 5px;
}

.TaskTitle {
    font-weight: 900;
}

Shrink transaction Log using linked server 3 part naming

Many times transaction log space gets full on SQL servers. To truncate transaction log we can use below script:

 DECLARE @Query NVARCHAR(1000)
 SET @Query = N'DBCC SHRINKFILE(2,0,''TRUNCATEONLY'')'
 EXEC YourServerName.YourDBName.dbo.sp_executesql
 @statement = @Query

DBCC is database console command, 2 in SHRINKFILE signifies log file.

Object Oriented Programming in JavaScript (Class in JavaScript)

Hello All, I would like to explain OOPs concept here which are very useful while using JavaScript for a large project. Object oriented concept in JavaScript is very useful in case you are creating modules in your project. Before starting I would like to cover few basic things about JavaScript. Class in JavaScript is nothing but function. There are 2 ways to create object of a class in JavaScript:

• Using Object.create (Prototypal Model)
• Using new keyword (Classical Model)

Using Object.create (Prototypal Model)

var TilePrototype = {
   constructor: function(header,value) {
      this._header = header;
      this._value = value;
   },
   render: function(){
      // Your code here to create tile using header and value;
   }
}

var myTile = Object.create(TilePrototype); // Here you created object of TilePrototype
myTile.constructor("My first tile", "Some value"); // Initialize the value using constructor
myTile.render(); // Call render method to create tile

Now how to achieve inheritance using Object.create

   var AdvancedTilePrototype = Object.create(TilePrototype);
   AdvancedTilePrototype.render = function(){
      TilePrototype.render.call(this);
      // add some more advanced functionality here which will be extended including parent class method. 
   }
  // Now any one can create object of this child class
  var myAdvancedTile = Object.create(AdvancedTilePrototype);
  myAdvancedTile.constructor("My advanced tile","value");
  myAdvancedTile.render();

Using new keyword (Classical Model)

  function Tile(header,value){
    this._header = header;
    this._value = value;
  }
  Tile.prototype.render = function(){
    // Your code here to create tile using header and value;
  }
  var myTile = new Tile("My first tile", "some value"); // create new object of Class Tile
  myTile.render(); // Call render method to render tile

Now how to achieve inheritance in this classical model

  function AdvancedTile(header, value){
    Tile.call(this, header, value);
  }
  AdvancedTile.prototype = Object.create(Tile.prototype);
  AdvancedTile.prototype.constructor = AdvancedTile;
  AdvancedTile.prototype.render = function(){
    Tile.prototype.render.call(this);
    // add your advanced code
  }