Angular JS using a DB Project and EF - javascript

I have a MVC project where the web portion is in Angular JS. It was asked of me to create a DB project which I did. We are now concerned with the Angular JS fetching data. Currently there exists a couple of project in the solution representing EF, and in the web project a Web API that interacts with EF, however it is incomplete. However I was considering using an Angular JS Module, Controller, and Service that will communicate with a MVC controller returning a JsonResult as shown here:
Angular JS with MVC Example
Since I created the DB project, I don't really feel the need for EF, but maybe this is a bad practice.If there are any suggestions on what is the standard practice to best fetch data for Angular JS I would love to know as I'm having a hard time pinning what approach is best for my scenario. Thanks.

Related

Is it possible to use Angular JS for JAMstack architecture?

I am in need to implement a static SPA with JAMstack architecture. I know we can user ReactJS/VueJS for JAM based implementation. But I want to know is it possible to use Angular for JAMstack approach?
https://dev.to/leomeloxp/what-is-jam-stack-2957
As JAMstack stands for JavaScript, API, and Markup, the only part which is a bit less straightforward to do Angular as a JAMstack is the markup.
It is possible to pre-render Angular on the server with Angular Universal: this would be the Markup part of the JAMstack. To make it a JAMstack application you would have to use build time pre-rendering instead of server-side rendering.
Angular is JavaScript obviously, so that is pretty straightforward.
And your Angular app probably already is talking to APIs, so that is easy too.
The main thing would be to build your Angular app in such a way that it works as a standalone website and serving it as static files via a CDN. Any content that needs to be dynamically updated you call via an API.
So yes, in my opinion it is possible to use Angular for JAMstack.
I'm not sure if you are talking about Angular(2+) or AngularJs(1), but anyways there is no tool that use any of those frameworks, but, here you can see all the current tools you can choose to build an app with the JAMStack
https://www.staticgen.com/
You can find some that use Jade, Handlebars for generate the templates. Maybe Angular is not present because is too big, a complete framework, and in these cases you most of all need a template helper.
So, good luck.
Things move fast in the web world, there now (since December 2019) is a Static Site Generator built in Angular: https://www.netlify.com/blog/2019/12/16/introducing-scully-the-angular-static-site-generator/
The Scully code (currently version 0.0.1 so probably not stable/production ready): https://github.com/scullyio/scully/
An explanation of JAMstack "through Angular-colored glasses": https://www.netlify.com/blog/2019/10/30/whats-angular-in-the-jamstack-it-sounds-delicious/
As i understand. JAM stand for :
Javascript : to handling pre-generated content on client , fetch updates via API
API : response for request from client , sent the markup out
Markup : the pre-generated content (i'm sure it's called Serverside Rendering also)
So you can obviously build JAM with Angularjs.
Here are a few references that I know of, might enough to create JAM with AngularJS
J : AngularJS famework it self. Use $http service for API requesting
A : Express module - NodeJS
M : https://github.com/runvnc/angular-on-server or https://github.com/ng-consult/ng1-server (didn't test any of these)

Spring Boot with Javascript for Single Page Application

I am new to MVC. Please bear with me.
I know Thymeleaf is the preferred way of developing MVC application with spring. In this way, you have the index.html inside of src/main/resources/templates.
I want a similar experience but with a javascript framework. Is that possible? (what is that even called).
I have been looking into vue.js as Angular 4 looks very "bloated" and heavy.
Any help or suggestion is greatly appreciated.
You can use spring boot with Angular or any other SPA frameworks. There are more than just one approach, but I think the most common is creating RESTFul services using spring boot and these services will be consumed by an Angular or other JavaScript app.
I use to create React Apps that talks with services created in Java (using Spring Boot). All data transfer between back and front end is handle by JSON files.
Hope it helps to clarify your ideas.

Web : What is the best way to build the back-end/front-end relation?

I'm starting a PHP/JS Web project using Laravel for the back end and Angular 2 for the front end.
But I'm wondering how I should relate these two frameworks.
The two solutions I found was :
1 - Writing the whole Angular project in laravel's public folder and launch it from a app.blade.php in a Laravel view. Which makes it easy to pass the Laravel Auth data to Angular, but makes the public folder quite huge and probably too messy.
2 - Having two separate projects. And call the Laravel's api routes using JWT (I don't know a lot about that but read that it was a nice option).
So my question is, which of these 2 solutions is the best and why ?
Thanks
Hello I'm gonna give you a third option, which is the one I use for my projects with Laravel + AngularJS
So I use Laravel for 2 things:
*Retriving views
*Managing an API
For example if you request something like project.com/users Laravel will manage this and return the users.blade.php view
Then in this view I use angular to ask for data to the API (In laravel) and retrive it and load it on the HTML.
With this I take advantage of Sessions with Laravel (By retriving the views) and I take advantage of AngularJS with controllers and data-binding.
Also the directory structure is ordered because all views are in resources/views and for the controllers of angular I put them on public/js/controllers.
Hope this help you

Creating a dynamic web page using AngularJS, WCF Service and SQL Server

I want to create a web application and I am exploring how I could do this. So I came across AngularJS. I want to use WCF Service and SQL Server in my application also. I am trying to find what AngularJS, WCF Service, SQL Server can do for me because I do not want change technologies in the middle of my project after discovering that AngularJS cannot do things which I want my application to do.
So, my question is can AngularJS help me create Static web pages and Dynamic web pages?
I can start my project in ASP.NET MVC but I want to explore AngularJS and want to find out what it is.
My project is about
Sending E-mails
Displaying content from database (in any manner using Ajax)
Voice chat, Video chat, Text chat
Can contain Javascript, jQuery, CSS, HTML5
Tell me something about it. Any suggestions?
Thanks
Your question is vague, but I'd suggest using Microsoft WebAPI instead of WCF or even ASP MVC, due to the from the ground up RESTful design of WebAPI and much easier configuration.
Using this approach, you'll still be able to query SQL Server in C# using WebAPI, so you won't need to switch your database.
There's very little documentation by comparison for querying non-RESTful web services, so you'll gain a huge advantage in terms of tutorials, blogs, etc. by going this route.
Please see below for your questions:
Can AngularJS help me create Static web pages and Dynamic web pages?
Yes certainly it can. Check it out at the official website
2.Sending E-mails
This should be the server side responsibility using an e-mail client, for instance SMTP client
3.Displaying content from database (in any manner using Ajax)
Yes, it certainly can.
4.Voice chat, Video chat, Text chat
Try WebRTC first to see if it's sufficient for your tasks
5.Can contain Javascript, jQuery, CSS, HTML5
Yes, you can use whatever you want as long as you are sure about what you are doing.
I hope following guidelines will help you.
When you create the project select WebApi template.
Then include angularjs files in the scripts folder.
Use cshtml files,but do as you in html file.
Use angular client side mvc features to build your app fast and performance.
Use the angular http service to call webapi methods.
All the c# specfic features build in the webapi.

How to Implement Separate Projects for ASP.NET MVC 4 and ASP.NET Web API

I'm working on a large ASP.NET MVC/Web API project and wanted to separate out the controllers into their own project (as described in this article http://msdn.microsoft.com/en-us/magazine/jj190803.aspx). The difference is that I'm needing to separate out the ASP.NET Web API controllers, not “normal” MVC controllers.
In my solution, I have two separate projects:
One ASP.NET MVC 4 project for serving up HTML/CSS/JavaScript (note
I'm not using any standard MVC controllers, this project is all
client/browser-side code that makes jQuery/Ajax calls to the Web API)
One ASP.NET Web API project (this project is only the
ApiController(s), no views, HTML, etc., I'm still wanting the Web API
project to be hosted in IIS, not self-hosted)
Anyway, I’ve seen other posts and such that haven’t really explained my exact situation, and I'm having trouble getting this solution working.
How can I break out my Web API controllers into their own separate project and use them from my HTML/JavaScript code in my separate MVC project? And, how do I call the API’s endpoints from my JavaScript/jQuery code in the separate MVC project?
Thanks.
Since your Web Api and MVC are in different projects and probably they will run in different domains making the communication little difficult from client-side beause of cross-domain issue.
Though you can try JSONP or CORS but they are not going to be much useful (one is a hack and the other is not widely supported in browsers) and so you have to create wrapper MVC controllers in your MVC project that will talk to the Web Api through HttpClient class.
Your javascript will make calls to your MVC controllers and this way you can avoid the cross domain issues.
You can separate your API controllers into another project, that's fine. Just assure that you have all required assemblies referenced. I suggest take a look at Nuget packages to assure you have them all.
For api and web separation, use proper routing that's all I guess. Check "WebApiConfig.cs" in App_Start folder at your MVC project. API routing has basically "API/..." at the beginning, so it wont make a mess with your mvc site.
So at the end you will get something like this:
http://localhost/products
http://localhost/api/products
First process request at mvc site, second at WebApi.

Categories