Imperative vs Declarative

Imperative and declarative are two general approaches to programming that you may see outside of DOM manipulation, so keep that in mind while I try to give a good explanation. Also, these examples are contrived and not necessarily best practice.

Imperative programming is what you are already familiar with in JavaScript as it's all we're taught in the beginning. Let's say you have an array full of employee objects:

var employees = [
    {name: 'Grace Hopper', title:'Programmer'},
    {name: 'Mark Dean', title:'Programmer'},
    {...}
];

These need to be output, somehow, to a webpage. Take a moment to think about how you would do this in JavaScript.

With vanilla JavaScript, I might do something like this:

var employeeList = document.getElementById('employee-list');

employees.forEach(function(e){
    var employeeEntry = document.createElement('li'),
        employeeName = document.createElement('span'),
        employeeTitle = document.createElement('span');

        employeeName.innerHTML = e.name;
        employeeTitle.innerHTML = e.title;

        employeeEntry.appendChild(employeeName);
        employeeEntry.appendChild(employeeTitle);

        employeeList.appendChild(employeeEntry);
});

This is imperative because I'm telling the computer all of the steps I want it to follow in order to complete a task I have in mind. What other options do we have? Angular.js has a lot of functions that are already built-in which enable us to perform these actions with very little input.

<div ng-controller="WorkplaceController as workplaceCrtl">
    <div ng-repeat="employee in workplaceCrtl.employees">
                 <!--Angular copies from here...-->
        Name: <span class="name">{{employee.name}}</span>
        Title: <span class="title">{{employee.title}}</span>
                <!--...to here                               -->
    </div>
</div>

Depending on how much Angular you know, this may or may not make sense to you. Basically, we're access a collection of objects with ng-repeat, and Angular is copying that middle bit and automagically filling in the information we want - the employee's name and title. This is declarative because I'm not telling the computer what steps to perform in order to do this. I'm just telling Angular what I want done, and where I want it done. Angular takes care of all the rest.

Hope this helps!