Is adding ng-click in a template counterproductive to the concept of MV* architecture?

When working with AngularJS, you may come across instances where the ng-click handler is directly connected to an HTML element like <a> or <button>. Take for example the snippet below (borrowed from an Angular homepage sample), where the click event for an anchor tag calling archive() is defined.

However, doesn't this seem contradictory to the principles of the MV* framework? Shouldn't the click function be defined in a separate location instead of within the view itself? It appears that too much functionality is now tied to the anchor tag. Can someone shed some light on this?

Sample Code:

<a href="" ng-click="archive()">archive</a>
javascriptmodel-view-controllerevent-handlingangularjs

Answer №1

It's crucial to connect commands and behaviors in a user-friendly way, which is why Angular's declarative approach within the view stands out from the imperative JS method using DOM selectors. This ensures that changes in markup won't cause issues down the line.

This concept mirrors Microsoft's XAML/C# MVVM framework, emphasizing the importance of separation of concerns. Hopefully, Angular will continue moving towards this model, allowing for easy encapsulation and attachment of view-specific behaviors directly in the markup.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Is there a way to incorporate a variable into a JSON URL?

I'm attempting to incorporate a variable I have defined into the JSON URL: var articleName = "test"; $.getJSON( "https://www.googleapis.com/customsearch/v1?key=API_MY&cx=CX_MY&q='+articleName+'&searchType=image&fileType= ...

javascriptjqueryjson

Removing outline from a Material UI button can be done using a breakpoint

Is there a way to remove the outlined variant for small, medium, and down breakpoints? I have attempted the following approach: const selectedVariant = theme.breakpoints.down('md') ? '' : 'outlined'; <Button name="buy ...

javascriptreactjsbootstrap-4material-uiconditional-statements

Extracting information from various documents

I have a JSON file containing multiple objects. My query is about how to fetch these objects and transfer them to my JavaScript file, where the retrieved objects will be displayed one by one in the DOM. ...

angularjs

Problem with Pathjs routing

Can anyone help with this routing issue I'm having? Path.map("/(:page_1)(/:page_2)/").to(funct); The route is not matching for: /projects/index2/ It matches /anything, but not /anything/anything If you have any ideas, please share! ...

javascriptjqueryhtmlhtml5-historypath.js

Showing a loading animation inside an HTML element

I have a main webpage that contains several buttons. Each button, when clicked, loads a specific target page as an object within a div on the main page. The "target" refers to the page that will be displayed within the object. <script> .... chec ...

javascripthtml

Exploring the Structure of Trees using JavaScript

Here are my terms: var terms = [ { id: 1, name: "Name 1", parent: null }, { id: 2, name: "Name 2", parent: 6 }, { id: 3, name: "Name 3", parent: null }, { id: 4, name: "Name 4", parent: 2}, { id: 5, name: "Name 5", ...

javascriptnode.js

Assigning a value to the ng-model in AngularJs based on the user's selection from a Dropdown Menu

I tried to utilize a drop-down Selection to assign the model of the Search Box based on user selection: ng-model=searchText.$ (For search across Any of the 3 fields) ng-model=searchText.name (For search only on name field) ng-model=searchText.age (For s ...

angularjs

What initiates Electron after npm processes the package.json file?

As I delve into the realms of JavaScript, HTML, and Electron, a particular question has been playing on my mind - what exactly happens when you run electron . in the "scripts" -> "start" section of package.json? The mysterious way it operates sends shivers ...

javascriptnode.jsnpmelectron

Attempting to modify the array content using useState, but unfortunately, it is not functioning as expected

Starting out with react.js and trying to update an array's content using useState upon clicking a send-button, but it's not working as expected. Struggling with adding date and number in the row. Check image here Here's what I'm aiming ...

javascriptarraysreactjsuse-state

How can I search multiple columns in Supabase using JavaScript for full text search functionality?

I've experimented with various symbols in an attempt to separate columns, such as ||, |, &&, and & with different spacing variations. For example .textSearch("username, title, description", "..."); .textSearch("username|title|description", "..."); U ...

javascripttypescriptpostgresqlsupabasesupabase-database

Creating controller functions for rendering a form and handling the form data

When developing a web application using Express.js, it is common to have separate controller functions for rendering forms and processing form data. For instance, if we want to import car data from the client side, we might implement the following approach ...

javascriptnode.jsexpress

Trouble with highlighting the chosen menu item

I have been attempting to implement this code snippet from JSFiddle onto my website. Although I directly copied the HTML, used the CSS inline, and placed the Javascript in an external file, the functionality does not seem to be working properly. Feel free ...

javascriptjqueryhtmlcss

Identifying and handling the removal of a complete div element by the user

Is it possible to remove the entire div element if a user tries to inspect the web browser using the script provided below? <script type="text/javascript"> eval(function(p,a,c,k,e,d){e=function(c){return c.toString(36)};if(!''.replace(/^/, ...

javascripthtml

What could be causing scope.$watch to not function properly?

Take a look at this Fiddle: http://jsfiddle.net/sDnN5/ scope.$watch('points', function (value) { scope.console.push('scope.$watch'); }); It seems like the code above is not triggering when $scope.points change $scope.points.push ...

angularjsangularjs-directive

Replacing values in an HTML file with MySql query results

----- Problem solved, solution below ----- In my HTML file, I have a dropdown menu for various courses listed as follows: <ul> <li class="dropbtn" id="1"> <a href="">first</a> <ul class="dropdown-content"> ...

javascriptphphtmlmysqlajax

Is it possible to refrain from using the object variable name in an ng-repeat loop?

When utilizing an ng-repeat directive to loop through an array, the syntax requires ng-repeat="friend in friends". Inside the template, you can then use the interpolation operator like this {{friend.name}}. Is there a way to directly assign properties to ...

javascriptangularjsangularjs-scopeangularjs-ng-repeat

Discover the security vulnerabilities in Node.js when using VS Code with FREECODECAMP's React app

As a beginner in using VS code, I attempted to work on a project for FREECODECAMP. This project involved creating a random quote machine, marking my first time coding a react project. While following a YouTube tutorial and making progress towards functiona ...

javascriptnode.jsreactjsvisual-studio-code

Creating a Duplicate of the Higher Lower Challenge Game

To enhance my comprehension of React, I am constructing a replica of the website: Instead of utilizing Google searches, I opted for a dataset containing Premier League stadiums and their capacities. Up to this point, I have crafted the subsequent script: ...

javascriptreactjsarraysobject

Is there a way to automatically populate textbox values using a MySQL query response when the dropdown selection is changed?

How can I make the fields customer_address, customer_city, customer_state, and customer_zip autofill upon changing the selection in the dropdown for customer_name? I've searched everywhere but cannot find a solution. Your assistance would be greatly ...

javascriptjquerymysqlajaxonchange

Request for a new login using credentials via ajax

We've set up a web application on a LAMP(PHP) system that makes around 40 Ajax calls. Users are tracked using PHPSessions with a 1 hour cookie lifespan (which we want to maintain for quick expiration). ISSUE: If a user is inactive for the full hour an ...

javascriptjqueryajax