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>

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

mention a Vue.js component computed property that points to a specific DOM element

Is there a way to access the DOM element that initiated a method inside a Vue component computed property? For example: <template> <img :src="getUrl" class="image1"/> <img :src="getUrl" class="image2"/> </template> <scri ...

Tips for sending JSON data via an HTTP POST request

Hello there! I am relatively new to programming and Angular. Within my controller, I have the following data: temanService.create({ Userid: $scope.datateman.userid, Address: $scope.datateman.address, Employeeid: $scope.datateman.employeeid, ...

What are the steps for integrating Angularfire2 into an Angular application?

Trying to integrate Angularfire2 into a fresh Angular project, but encountered an issue while following the official documentation. This is the guide I followed Upon reaching step 7 - Inject AngularFirestore, console errors were displayed: If anyone has ...

The function inputLocalFont.addEventListener does not exist and cannot be executed

Help needed! I created a code to add images using PHP and JS, but I'm encountering an error in my JS that says: inputLocalFont.addEventListener is not a function Here's the code snippet: <div> <img src="<?php echo $img_path.& ...

Having trouble locating module '@mdx-js/mdx' in Gatsby forest

Since the most recent update today, I've been encountering this error. There is no MDX being used in my project at all.. When running npm run develop, this issue arises. Does anyone have any insights on this? internal/modules/cjs/loader.js:979 thro ...

Creating a custom data type with a specific value in GraphQL

I am new to graphQL and have some questions regarding it. After going through the documentation, I decided to build something of my own. Currently, my setup is quite simple. At the beginning of my application, I have the following code: const express = ...

The simple passport.js sign-up feature is not successful as it mistakenly believes that the username is already in

Currently, I am working on setting up a basic signup feature for my Node + Express + Sequelize application using passport.js. The database is empty at the moment, and I am utilizing the passport-local strategy to extract the user's email and password ...

What is the AngularJS alternative to $.ajaxPreFilter()?

Looking for help with implementing a similar function in Angular? Below is an example of how you can achieve the same functionality using Angular 1.x: $httpProvider.interceptors.push(function() { return { 'request': function(config) { ...

Disappear solely upon clicking on the menu

Currently, I am working on implementing navigation for menu items. The functionality I want to achieve is that when a user hovers over a menu item, it extends, and when they move the mouse away, it retracts. I have been able to make the menu stay in the ex ...

Watching the $scope variable using $watch will result in triggering even when ng-if directive is used, displaying

Encountering an unusual behavior in AngularJS that may appear to be a bug, but there could be a logical explanation. A certain value is being passed to a directive as an attribute. Within this directive, the parameter is being watched using $scope.$watch. ...

What is the best way to update the type = date values with my "SearchDate" parameter in a Python template?

I have the variable search_date in my view and I need to display this data in a template. How can I achieve this? In the object, the date is set as "2020-09-01". I tried to write the following code but it did not work as expected: {% extends 'bas ...

Is there a way to modify the value of a JavaScript object?

My React componentwillmount fetches data from an ExpressJS API using Axios and receives a JSON response, which is then converted to an object by Axios. [{"client_nick":"PlayTalk","connected_time_record":183710127},{"client_nick":"PlayTalk","connected_time ...

Creating a span element to replace the list item class in a JavaScript Modal Pop-up

I recently set up a portfolio website that showcases my projects. When you click on a project, a modal window opens with a carousel gallery inside. On my .html page, the projects are organized like this: <li class="Project" data-modal="myModal_1"> ...

Prioritize loading CMS content before mounting the React component

I am facing a challenge with importing my post from ButterCMS to React due to the async issue. import React, { useState } from "react" import Butter from "buttercms" import gradient from "../../images/TealLove.jpg" export default () => { const butt ...

PHP warning: Notice: Offset not defined

After creating an API to retrieve data from a database and display it as JSON in HTML, I encountered some PHP errors while trying to echo the data: Notice: Undefined offset: 80 in /opt/lampp/htdocs/ReadExchange/api.php on line 16 Notice: Undefined offse ...

The value of Yargs.argv is consistently displayed as [object Object]

In my Ubuntu 16.04 environment, I enrolled in a node.js course on Udemy. Following the instructor's guidance, I initially used the exact version mentioned and later updated to the latest version (11.0.0). Surprisingly, both versions yielded the same o ...

Use .load() to set an image as background in the div

There is a block of code that is supposed to display images in a div with the class "img", but it isn't functioning correctly. Can you provide some guidance on how to fix this issue? <div class="other"><a href="/index1.html">Link1</a&g ...

The performance of CasperJS when used with AngularJS is subpar

If I click on just one button in Casper, everything works perfectly. The code below passes the test. casper.then(function() { this.click('#loginB'); this.fill('#loginEmailField', { 'loginEmail': '<a ...

Managing incoming HTTP requests on LoopBack can be easily done by following these steps

I am currently working with loopback to create a login page. The client-side files contain the code for the login page $(document).ready(function(){ $('#login').click(function(){ var username = $('#usr').val(); var password = ...

Unable to utilize the forEach() function on an array-like object

While I generally know how to use forEach, I recently encountered a situation that left me puzzled. Even after searching online, I couldn't find any new information that could help. I recently started delving into TypeScript due to my work with Angul ...