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
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
pnpm 10 blocks lifecycle scripts by default to improve security, addressing supply chain attack risks but sparking debate over compatibility and workflow changes.
Product
Socket now supports uv.lock files to ensure consistent, secure dependency resolution for Python projects and enhance supply chain security.
Research
Security News
Socket researchers have discovered multiple malicious npm packages targeting Solana private keys, abusing Gmail to exfiltrate the data and drain Solana wallets.