angular-hint-dom
v0.5.10
Published
hints for Angular best practices of manipulating the DOM
Readme
Angular Hint DOM 
This hinting module is part of the overall tool AngularHint that provides advice about AngularJS best practices. Loading this module will provide warnings specific to how AngularJS applications should manipulate the DOM.
See the AngularHintDOM NPM Module.
##Usage
Install the AngularHint NPM module
and use ng-hint or ng-hint-include='dom' to
enable AngularHintDOM. Further installation information is available on the
main AngularHint repository.
##Features
AngularJS provides a framework for separating the implementation of a web application into logical components. This separation of concerns is important for code development, maintenance and especially testing. With modular code, it is easy to implement unit tests.
However, how an application should be split into these components is not always obvious. For example, many applications built without AngularJS rely on javascript for manipulation of the DOM including dynamically adding and removing elements from the page. Naturally, an AngularJS developer might try to implement such javascript manipulation in their AngularJS controllers. As the controllers provide the logic for the views, this could seem to be a correct usage. However, AngularJS allows all such manipulation to occur through AngularJS directives in the views themselves. In fact, manipulation of DOM APIs from the controller violates the modularity between the controller and view and is against AngularJS best practices.
To help users recognize the violation of this best practice, AngularHintDOM gives warnings when DOM APIs are manipulated in AngularJS controllers.
For example, an application might seek to add items to the page based on some changing list of items:
//Application view
<!doctype html>
<html ng-app='sample' ng-hint>
...
<div id='list'></div>
<script src="../../bower_components/angular/angular.js"></script>
<script src="../../dist/hint.js"></script>
...
</html>//Application controller
angular.module('sample').controller(function(){
//Accessing the DOM API `document.getElementById()` triggers an AngularHintDOM warning
var list = document.getElementById('list');
var newListItem = document.createElement('div');
newListItem.innerHTML = 'Item 1';
list.appendChild(newListItem);
});This approach using document.getElementById() to access and change the DOM from within the
controller is against AngularJS best practices. The correct approach would be to use the ng-repeat
directive to automatically update the list in the view based on the contents of whatever data is
in the list.
##Contributing
Want to improve AngularHintDOM or other facets of AngularHint? We'd love to get your help! See the Contributing Guidelines.
License
Copyright 2014 Google, Inc. http://angularjs.org
Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License.