AngularJS for dynamic application

In the previous blog, we’ve learnt that how to start with angular. Today I’ll discuss about further more about angular that how we can create dynamic application with the angular without using any other template javascript library like handlebar.

If you have not read the last blog, then please go through that because using any angular module is not explained in this section. Starting With AngularJS

We’ll be using some other directive of angular library-

1. ng-repeat
2. ng-change
3. ng-mouseover
4. ng-mouseout

We’ll also be learning that how to define and use the method within any controller of a particular module.

Here, I’m describing the dynamic populating element, that will be displayed without putting them on view/html file again and again. Example will take two input fields, on the basis of these filed’s value, grid will be auto initiated and arranged by as per values of above field.

Below is the code to define method for a controller-

To display and process this method, view file will be as below-

In above screenshot, we have used change directive to apply method on change of this field’s value. If value will be changed of particular field then processData method will be called rows and cols object will be initialized and reflect data on below screenshot code.

Above is using another directive of angular that is ng-repeat, which used to iterate any object just like looping of an object but it detects the object and if there is any change in used object then this complete view will be loaded again and will show grid according to the current value.

After using above snippets, the populated view will be like below screenshot.