angular-hint-dom
Advanced tools
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.
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.
FAQs
hints for Angular best practices of manipulating the DOM
The npm package angular-hint-dom receives a total of 5 weekly downloads. As such, angular-hint-dom popularity was classified as not popular.
We found that angular-hint-dom demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 3 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Ransomware payment rates hit an all-time low in 2024 as law enforcement crackdowns, stronger defenses, and shifting policies make attacks riskier and less profitable.
Security News
require(esm) backported to Node.js 20, easing the transition to ESM-only packages and reducing complexity for developers as Node 18 nears end-of-life.
Security News
PyPI now supports iOS and Android wheels, making it easier for Python developers to distribute mobile packages.