Are AngularJS and WebApi suitable for handling large, complex systems effectively? That is the question at hand

In the process of updating our asp.net webforms web application to improve its appearance and speed, I am considering different options for redevelopment. Originally, I thought about creating a webApi and switching the website to asp mvc. However, after experimenting with AngularJS, I found it to be very impressive and now I am contemplating rebuilding our site using AngularJs along with a webApi.

I'm questioning if combining AngularJS with ASP MVC is redundant since they serve similar purposes (one being clientside and one being serverside).

Additionally, I have a few inquiries regarding implementing angularJS on our website:

  1. In mobile apps where I have utilized AngularJS, I've used the routeProvider and stateProvider to navigate between pages, resulting in adding #/SOMETHING to the URL. Does this method impact search engine optimization, particularly with Google?

  2. Should the entire web application be a single app within Angular, or is it advisable to break it down into separate app modules even though it functions as one website? I am concerned about performance implications, especially if each module consists of multiple pages. For example, if the website focuses on companies, contacts, and projects, each with numerous pages, can Angular effectively handle such complexity with over 20 modules each containing multiple pages?

  3. Is this approach worth considering, or would ASP MVC + webApi be a more practical solution?

I am open to all views and opinions before making a decision on how to proceed with development. Your input is highly valued.

Thank you in advance.

javascriptasp.net-mvcangularjsasp.net-web-apiangular-ui

Answer №1

Allow me to address some of the issues you've raised.

Even if you opt to use AngularJS and WebAPI, ASP.Net Partial views can still play a valuable role. Having server-side views offers benefits, such as ensuring elements accessible only to authorized users in specific roles are not sent from the server rather than being hidden on the client side with AngularJS.

While I haven't delved into mobile development with AngularJS, I cannot provide an answer for your first bullet point. However, every client-side framework faces SEO challenges, so researching SEO techniques specifically tailored for Angular may yield some insights.

As for your second bullet point, it ultimately depends on the situation. Multiple SPAs can be developed if the functionalities are separate but related. For instance, the user-facing portion and admin-facing portion could be distinct SPAs or combined into one. There's no definitive rule; it all hinges on the context.

In response to bullet 3, this is quite a broad question. I can affirm that AngularJS is a robust framework capable of achieving everything MVC+WebApi can accomplish. While there is a learning curve and transitioning to the Angular way of doing things takes time, the rewards make the effort worthwhile.

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

The combination of Material UI custom TextField and Yup does not seem to be functioning properly

I am facing an issue with integrating my custom TextField into my RegisterForm along with Yup validation. Whenever I use the custom TextField, I encounter a message "⚠ Champ obligatoire" after clicking on Submit, which is not the case when using a simple ...

javascriptreactjsmaterial-uitextfieldyup

Script and Ajax loading repeatedly, causing multiple instances of script and Ajax loading

I recently encountered some unexpected issues while debugging and playing around with the code on my website, . Let me walk you through the scenario to understand the problem better. When you click on the "art" tab, two logs appear in the console - one sho ...

javascriptjqueryhtmlcssajax

Issue with Snackbar slide transition not functioning properly in mui 5

Transitioning from material-ui 4 to mui 5 has presented me with a challenge. Whenever I try to display my snackbar, an error pops up in the console. After some investigation, I realized that the issue lies within the Slide component that I'm using as ...

javascriptreactjsmaterial-ui

Styling Angular Datatables with CSS

i have data on the front end https://i.stack.imgur.com/2xq7a.jpg i need all check marks to be displayed in green color. Below is the code snippet: $scope.dtColumnsCal= [ DTColumnBuilder.newColumn('name').withTitle('Name') ...

cssangularjsdatatables

Using Rails version 4 along with bootstrap 3 modal, you can easily hide contents by simply doing nothing inside

Within my action.js.erb file, I have the following code: <%= render 'smthng' %> Inside the _smthng.js.erb file: ... $("#modal").modal("hide") ... When I trigger the action, the modal window does not hide. However, if I include $("#m ...

javascriptruby-on-railsajaxtwitter-bootstrap

Tips for successfully transferring a JSON object from jQuery to a JavaScript function

Can you help me with accessing data in a JavaScript function after populating it dynamically on an HTML page through an Ajax call? Issue: I am trying to invoke a JavaScript function when clicking on a button after populating the data. However, I am facing ...

javascriptjqueryjson

Node.js attempting to achieve synchronous behavior by executing shell scripts

I'm new to working with node.js and I've set it up as a server to handle http.get requests from browsers. My goal is to process these requests, scrape a website using phantom.js/casper.js, and then send the result back to the browser. To achieve ...

javascriptnode.jsshell

Unable to interpret JSON data in D3visualization

While attempting to read a JSON file using the D3 library, I encountered an issue where I received an alert indicating null values. Here is the code snippet I am using: <!doctype html> <html lang="en"> <head> <meta charset="utf-8" ...

javascriptjqueryhtmljsond3.js

Angular js encountered an issue with an unrecognized provider: $scopeProvider

I've encountered an error while working on my Ionic project. I'm trying to call a factory method from a controller, but it seems to be throwing an unknown provider error. Error: [$injector:unpr] Unknown provider: $scopeProvider <- $scope < ...

angularjsionic-framework

Using VueJS to dynamically filter table data based on the URL ID

I am looking to retrieve data from a JSON API based on the id in the URL of the page. First, I have the code for my table which contains links based on a URL id that leads to the template of the second table: <table class="table table-condensed"> ...

javascriptjsonfilterhtml-tablevue.js

Sending data from jQuery modal to the final input field

In my latest project, I have developed a modal window that features a table with rows of input boxes and buttons: <table class="datatable tablesort selectable paginate full" width="100%"> <tbody> ...

javascriptphpjqueryajaxtwitter-bootstrap

What could be causing the issue of webpack not recognizing the Dynamic require(expression) function?

I am attempting to implement lazy loading for my routes state using the code below: //router.js //usage $stateProvider .state('async', { url: '/async', templateUrl: require('!!file-loader?name=templates/[name].[ext]!./.. ...

angularjsnode.jswebpackrequire

Begin a SeleniumWebDriver session after Google Chrome has been launched beforehand

I am looking to create an automation using SeleniumWebDriver and Node.js, but I am facing an issue where I cannot start the automation if Google Chrome is already open and in use by the user. Currently, my workaround is to close all instances of Chrome be ...

javascriptnode.jsgoogle-chromeselenium-webdriver

What does the curly braces {} signify in the JavaScript programming language

While delving into sample code, I came across a line that left me puzzled. var foo = {}; From my observations, it seems like this is being used as a type of array where the index is a string provided by the user instead of traditional numerical indexes. ...

javascriptarrays

A comprehensive guide on properly obtaining user details in React with Redux and OIDC

Although I've dabbled in OIDC before, I wouldn't consider myself an expert. Currently, I'm trying to integrate OIDC into a react app using oidc-client-js and redux-oidc libraries, following the redux-oidc-example as a guide. Encountering th ...

javascriptreactjsreduxopenid-connect

Combining all code in Electron using Typescript

I am currently working on developing a web application using Electron written in Typescript and I am facing some challenges during the building process. Specifically, I am unsure of how to properly combine the commands tsc (used to convert my .ts file to ...

javascripttypescriptnpmelectron

Leveraging Javascript within MVC3, either on a master page or child page

I'm currently developing a web application utilizing MVC3 and I am curious about the best practices for incorporating JavaScript. Specifically, I am uncertain about whether to include JavaScript in the master page as well as in individual child pages. ...

javascripthtmlasp.net-mvc-3

Verify that the zip code provided in the input matches a record in the JSON data and extract the

I need to create a feature where users can input their zip code, check if it matches any of the zones in a JSON element, and then display the corresponding zone: var zones = [{ "zone": "one", "zipcodes": ["69122", "69125", "69128", "69129"] }, ...

javascriptjqueryjson

Trouble with Material-UI's useMediaQuery not identifying the accurate breakpoint right away

While utilizing the MUI useMediaQuery hook in my React app, I encountered a bug that resulted in errors being thrown due to the initial failure of the hook to recognize the correct breakpoint. Eventually, the page re-renders and displays the correct value. ...

javascriptreactjsmaterial-ui

Truncating decimal points in JavaScript

In this scenario, if the number after the decimal point is 0, then the zero should be removed. Otherwise, the number should be displayed as it is. Here are some examples of what I am aiming for in vue: 100.023 => 100.023 1230.0 => 1230 ...

javascriptvue.js