Stop Struggling With jQuery

I love jQuery. But if you are trying to manipulate the DOM in very complex ways, for example, trying to have a lot of repeated divs and sorting them and dragging them around, jQuery doesn't help much. Using jQuery you can try setting a bunch of id's dynamically and then keeping track of them. You can make it happen but it's difficult. It becomes almost an impossible task if you want to actually save that state and reload it later. There is a better way.

AngularJS is that way. Instead of worrying about all these div id's and classes you tell AngularJS to use a Javascript array as a reference and then build the div tags from the array. AngularJS will track the array and if you rearrange the array, the divs will rearrange themselves almost by magic.

Take a look at this example code from the documentation for ngBind:

<script>
  function Ctrl($scope) {
    $scope.name = 'Richard';
  }
</script>
<div ng-controller="Ctrl">
  Enter name: <input type="text" ng-model="name"><br>
  Hello <span ng-bind="name"></span>!
</div>

Pay special attention to the input tag with the ng-model attribute and the span tag with the ng-bind attribute. The ng-model and ng-bind attributes are set to "name" and that "name" actually corresponds to the $scope.name variable in the Javascript we declared at the top. When the page is rendered, the input text will show "Richard" and the output below will show "Hello Richard!". Now, when the input text is changed to something like "Alice", the Javascript variable will automatically be updated and in turn the output will change to read "Hello Alice!". Using ng-model and ng-bind, we have created a two-way binding between the Javascript variable and the input/span tags.

This is neat but it's not too much better than how you could accomplish the same thing with jQuery. The real power of AngularJS shows when using another directive called ng-repeat. Take a look at this example code:

<script>
  function Ctrl($scope) {
    $scope.items = ['a', 'b', 'c'];
  }
</script>
<div ng-repeat="item in items">
  {{ item }}
</div>

This will result in three div tags containing the text "a", "b" and "c" respectively. If the array is reordered as:

$scope.items = ['a', 'c', 'b'];

Then the three div tags will also reorder, automatically! Creating a sortable list of div's is nowhere near as easy using just jQuery. The real power in AngularJS comes from not having to keep track of div tags using id's or classes. In fact, one of the main code smells when using AngularJS is having to put an id on a div tag.

Now, AngularJS can be a little difficult to understand at first but the documentation is really good and there are several starter projects you can use to get up and running faster.

I recommend https://github.com/angular/angular-seed as a very good starting place. However, if you are also using PHP as a backend, I would recommend my own project which is: https://github.com/rmcdaniel/angular-codeigniter-seed