Is the Utilization of Inline JavaScript in HTML Attributes by Angular considered a "good practice"?

Question

Is the Utilization of Inline JavaScript in HTML Attributes by Angular considered a "good practice"?

While going through the Angular tutorials, I found a lot to like. However, I couldn't help but wonder if "ng-click" is not essentially just an inline onClick function. My understanding was that the JavaScript community frowned upon using inline JavaScript event handlers in HTML as it was considered a "bad practice."

<img ng-src="{{img}}" ng-click="setImage(img)">

I am curious to know why this approach is now acceptable when working with Angular.

Source: http://docs.angularjs.org/tutorial/step_10

javascript angularjs

Answer 1

Answer №1

Ultimately, the key point is that your view code needs to be connected to your application logic in some way. AngularJS best practices recommend creating your own models - objects that represent your business domain - and attaching them to the scope. Consider this example:

<img ng-src="{{img}}" ng-click="myProfile.setMainImage(img)">

myApp.controller("ProfileController", function($scope, myProfile) {
  $scope.myProfile = myProfile;
});

In this scenario, the view instructs that when the image is clicked, it should call setMainImage() on myProfile. The actual business logic resides within myProfile, enabling it to be tested and managed separately. The view simply serves as a bridge.

In a more conventional jQuery setup, you would need to write something like the following:

$("#someId img").on('click', function() {
  var img = $(this).attr('src');
  myProfile.setMainImage(img); // How does myProfile get accessed here?
                               // How does it update the view?
});

The JavaScript community generally agrees that managing large applications using this approach is not practical, mainly due to the disconnection between views and model objects (as evident from the comments in the code sample), which is why frameworks like Angular exist.

While the traditional jQuery code may not be ideal, there are still uncertainties about the ngClick approach. Let's compare it with another popular MV* architecture framework, Backbone. A user raised concerns about AngularJS in relation to Backbone in a RailsCasts episode:

Is AngularJS really a good idea? The use of ng-show, ng-repeat, ng-class reminds me of old frameworks like Java's JSF. It also enforces obtrusive JS with ng-submit and ng-click.

The concern is that your view could become cluttered and overly reliant on these directives. Other frameworks like Backbone prioritize separation of concerns between presentation and behavior, resulting in a structured client-side application (MVVM).

A similar response was provided...

In a Backbone environment, event handlers are set up on elements within a view object to interact with model functions. Callbacks are also established on model events to trigger updates in the view. In contrast, Angular treats the DOM itself as the view by setting up event handlers through directives like ng-click, ng-submit that delegate to model objects or respond to model changes affecting the view.

The main difference lies in how declarative Angular views describe what the view represents compared to imperative approaches like Backbone, where the focus is on defining what actions the view performs. Although Angular sets up callbacks automatically, it ultimately simplifies the process without introducing additional dependencies.

So, using
<a ng-click="model.set({selected: true})">
doesn't impose more dependencies than...
events: {
  'click a': 'select'
},

select: function() {
  this.model.set({selected: true});
}
...but it significantly reduces the amount of code required. ;)

(Note: Ideally, the Angular version should utilize

<a ng-click="select()">

, where the select method on the scope mirrors the functionality of the view's select method in the Backbone example.)

If the presence of event hooks in your markup is a genuine concern, Angular's declarative nature offers a more streamlined approach where markup defines the view's characteristics and facilitates two-way binding between events and views. This results in less boilerplate code for event handling and improves overall view comprehension.

Answer 2

Ultimately, the key point is that your view code needs to be connected to your application logic in some way. AngularJS best practices recommend creating your own models - objects that represent your business domain - and attaching them to the scope. Consider this example:

<img ng-src="{{img}}" ng-click="myProfile.setMainImage(img)">

myApp.controller("ProfileController", function($scope, myProfile) {
  $scope.myProfile = myProfile;
});

In this scenario, the view instructs that when the image is clicked, it should call setMainImage() on myProfile. The actual business logic resides within myProfile, enabling it to be tested and managed separately. The view simply serves as a bridge.

In a more conventional jQuery setup, you would need to write something like the following:

$("#someId img").on('click', function() {
  var img = $(this).attr('src');
  myProfile.setMainImage(img); // How does myProfile get accessed here?
                               // How does it update the view?
});

The JavaScript community generally agrees that managing large applications using this approach is not practical, mainly due to the disconnection between views and model objects (as evident from the comments in the code sample), which is why frameworks like Angular exist.

While the traditional jQuery code may not be ideal, there are still uncertainties about the ngClick approach. Let's compare it with another popular MV* architecture framework, Backbone. A user raised concerns about AngularJS in relation to Backbone in a RailsCasts episode:

Is AngularJS really a good idea? The use of ng-show, ng-repeat, ng-class reminds me of old frameworks like Java's JSF. It also enforces obtrusive JS with ng-submit and ng-click.

The concern is that your view could become cluttered and overly reliant on these directives. Other frameworks like Backbone prioritize separation of concerns between presentation and behavior, resulting in a structured client-side application (MVVM).

A similar response was provided...

In a Backbone environment, event handlers are set up on elements within a view object to interact with model functions. Callbacks are also established on model events to trigger updates in the view. In contrast, Angular treats the DOM itself as the view by setting up event handlers through directives like ng-click, ng-submit that delegate to model objects or respond to model changes affecting the view.

The main difference lies in how declarative Angular views describe what the view represents compared to imperative approaches like Backbone, where the focus is on defining what actions the view performs. Although Angular sets up callbacks automatically, it ultimately simplifies the process without introducing additional dependencies.

So, using
<a ng-click="model.set({selected: true})">
doesn't impose more dependencies than...
events: {
  'click a': 'select'
},

select: function() {
  this.model.set({selected: true});
}
...but it significantly reduces the amount of code required. ;)

(Note: Ideally, the Angular version should utilize

<a ng-click="select()">

, where the select method on the scope mirrors the functionality of the view's select method in the Backbone example.)

If the presence of event hooks in your markup is a genuine concern, Angular's declarative nature offers a more streamlined approach where markup defines the view's characteristics and facilitates two-way binding between events and views. This results in less boilerplate code for event handling and improves overall view comprehension.

Is the Utilization of Inline JavaScript in HTML Attributes by Angular considered a "good practice"?

Answer №1

Similar questions

What could be causing my Vue application to not launch after executing `npm run serve`?

Exploring Facebook Graph API response with Angular 2 Mapping

Trying to incorporate a PHP echo statement into the innerHTML of a button is ineffective

Error: StalePageException occurred in the wicket framework

What is the best way to sort through this complex array of nested objects in Typescript/Angular?

Webpack does not support d3-tip in its current configuration

Adjusting SVG size based on the position of the cursor for transforming origin

Is it possible to use a Backbone Model for an unconventional HTTP POST request that isn't

What will occur if I invoke response.end in Node.js while asynchronous I/O operations and callbacks are still executing?

Align content distributed evenly will not display a division

Controlling multiple bx-sliders with a single pager using only JavaScript

Develop a personalized API using Strapi that involves integrating data from two distinct tables

Is there a way to append the current path to a link that leads to another URL?

Ways to retrieve the specified data in Javascript in string format

Strategies for filtering fields in LoopBack based on the included model

Tips for calculating the difference between timestamps and incorporating it into the response using Mongoose

What purpose does the div tagged with the class selection_bubble_root serve in Nextjs react?

Occasionally, the function XMLHttpRequest() performs as expected while other times it may

Swapping out a subarray within an array containing objects with a fresh array consisting of objects

Is there a way to keep track of changes in multiple dropdowns without having to create a separate JavaScript function for each one