My company have an existing swagger UI page.
The Swagger page
This page maintain all the public and the internals api's of the company. My task is to create a new page exactly like this that keeps only the public api's. I have 0 knowledge about swagger and how to create\modify pages so any general explanation/articles of how to resolve my task will be very helpful.
Related
I am working on a project with ASP.NET MVC, Web API and Angular JS.
I am considering changing the project structure from classic MVC (folder wrap files of the same type - controllers, etc) to feature folders:
So these folders can be described has follows:
Assets: images, fonts, ...
Features: list of features (blog, home, shared, ...)
Shared hold common files to all features; A feature might contain:
A) Angular controllers and services;
B) ASP.MVC controllers, models, model validators;
C) Specific CSS styles used in feature.
Handlers: service layer handlers that handle messages (commands, etc);
Helpers: infrastructure files;
Messages: service layer messages (commands, etc);
Scripts: vendor scripts (Angular, Jquery, etc);
Styles: global styles (reset.css, etc);
PROBLEMS
On Blog feature I will show a list of posts.
BlogController calls PostService(?) that gets posts from the API?
Each returned post has a title, a body and tags to display.
On Home I display recent posts but only the titles.
So HomeController calls HomeService or a PostService inside Post feature?
Imagine on blog feature I editing a new post.
In Blog controller I call the PostService to get that post.
But I need to fill a select list with the Tags.
So I need a TagsService and a TagsController in Blog feature?
These 2 questions might seem strange but they help me to resolve a lot of doubts I have with this way of organizing an application.
Any suggestions?
Feature folders are great, especially in the long run.
I suggest to keep together everything related to a certain feature, including handlers.
Rethink the Services. In most cases they are not needed (unless you're exposing services for clients).
Rename Helpers to Infrastructure.
Checkout MediatR
I am new to the Asp.Net MVC. I am doing asp.net web application. I have data layer which I want to be exposed from the MVC Web api only. For web api project i used entity framework as a model and for mvc application i am using entity classes. I am calling the web api from the view with jquery and perform all the operations.
Is that right approach or need to use some jquery framework. Or is there any projects available which uses asp.net web api's only. I warm up google for so many times but didn't find essential. Please assist me here.
You can use jQuery or any javascript framework you please to retrieve data from your API. You could even use raw javascript if you really wanted to. However, if most of your logic is going to live on the client, you'll probably want to look into some MVC/MVVM/MVP javascript library/framework to keep things organized.
A good place to start is the Single Page Application template that is built into Visual Studio 2013 and available for 2012. It uses .NET MVC to load up the HTML markup, styles, and scripts, and then uses Knockout.js to structure the application and send & retrieve data from a Web API controller located in the same app. It's also worth noting that you can grab templates that use other popular javascript frameworks like Ember, Angular, Backbone, Durandal, and more. If you'd prefer one of those frameworks over Knockout then download one of those templates and look through the code.
Without seeing any code, it sounds like you have the right idea. You can use any client side framework of your choice to interact with your Api Controllers (Knockout, Angular, Ember, Backbone) or you can use straight up jQuery.
Since you are new to ASP.NET Mvc, a little clarification on the differences between the traditional Mvc Controller and the new Api Controller seems in order. In traditional MVC the controllers works to select which view (UI) to display married to data (the model):
public ActionResult Index()
{
var theData = serviceLayer.GetData();
return View("Index", theData);
}
You can also return pure JSON data from a controller:
public JsonResult GetMyData()
{
var theData = serviceLayer.GetData();
return new JsonResult()
{
Data = theData
};
}
This had the problem of making it difficult to determine the names of the endpoints that retrieve UI vs the endpoints that retrieve data. The Web Api is Microsoft's implementation of a RESTful framework. Instead of a controller with many different methods (Index(), GetSingle(), GetMany(), List(), DoSomethingElse(), DoAnotherThing(), etc.), the Api controllers usually contain only methods that correspond to the HTTP Verbs: GET, POST, PUT, and DELETE. The same endpoint can then be called differing only by the verb you are using. Take the following endpoint for example:
http://mydomain.com/api/customer/1234
Calling this endpoint will do the following for Customer with id=1234:
GET will return the data
PUT will update the data
DELETE will delete the data
In addition to making it clearer for your own development team, the Api also makes it easier for you to expose your data to third parties. You would need to provide a root URL and a list of your objects and any developer would be able to use it. There are other things you would need to do such as implementing security tokens but I wanted to demonstrate the benefits of using an easily understood framework.
I'm a complete beginner with AngularJS so this may be something completely trivial. I'm building an Asp.net MVC application (really juts delivering insignificant parts) with Web API backend (including login/logout capabilities).
I'd like to use AngularJS in my application. But I have a bit of a dilemma how to slice my page into several sections that somewhat work independently. Let's say this is a simplified skeleton of my page.
Questions
How should I structure my AngularJS parts on my page?
Should I have a single ng-app for the whole page or have several non-nested ones for each individual component on my page?
In case of a single ng-app I expect to have one ng-view that would include Context and Content components.
How about client-side routing with each individual option (single/multi ng-app)?
Is this a viable approach or should I think of Angular differently and structure it differently?
I should likely have separate controllers for each individual component and a single authentication service (communicating with Web API on the server) to provide user authorized items.
What would you recommend?
Bare in mind I'm a complete beginner in AngularJS but am very versed in server side part (MVC and API).
Let me try to address some concerns
Should I have a single ng-app for the whole page or have several
non-nested ones for each individual component on my page?
There can be only 1 ng-app per SPA, so you cannot have ng-app per component. You can have module per component which can be tied into the ng-app related module.
In case of a single ng-app I expect to have one ng-view that would
include Context and Content components.
ng-view would only contain the content of the active view. It does not require to have any menus. There can be something like RootController which is container for overall app. The html would consist of the obvious ng-view and number of ng-include.
Something like
<div ng-controller='RootController'>
<div id="contextMenu"><ng-include src='contextMenuTemplate'></div>
<div id="primaryMenu" ><ng-include src='primaryMenuTemplate'></div>
<div id="secondarMenu" ><ng-include src='secondaryMenuTemplate'></div>
<div ng-view/>
</div>
In your RootController you would have some logic like
if ($route.path) {
$scope.contextMenuTemplate="path1"; //path corresponding to the route
}
Or else you can also create a object map and use that for selecting the templates
var viewTemplates= [{
path:"/home",
contextMenuTemplate:"path1",
primaryMenuTemplate:"path2",
secondaryMenuTemplate:"path3"
}]
This can now be used for selecting templates in ng-include.
How about client-side routing with each individual option (single/multi ng-app)?
Routing happens on the ng-view part only. You select other templates to load based on the primary view. You can also look at ui-router for advance routing stuff.
Update
When authentication and authorization comes into picture both the server and client play their part. Server authenticates and then can use that information for service different templates if the user is authenticated or not, and may on the same url. For example /home/leftnav can server different content based on the authenticated user. Same can be done on Angular side but this behavior can be by-passed as it is just javascript. Same holds true for api calls (using webapi) where server can decided what to send back.
On client side user state can be tracked using a service\factory. A service like UserService with methods\properties like CurrentUser can provide details on the current logged in user and can be injected into any directive, filter, controller which as to make decision based whether and what user is logged in..
I have a asp.net mvc4 web application which for example allows me to manage members and member resources to the site.
On the member's home page there are several different sections of details about their profile. I want to use angular.js and webapi(entityframework) to allow them to edit their address details in place and save them without a page postback. I imagine the best place to start is to have a partialview which displays these address details as part of the main page view.
Are there any examples of such a setup?
You can definitely do this. First, for switching the details based on which section the user selects you have two options:
1) Create a module and setup routes. The routes will allow you to have a base HTML page with an area where you can switch partial HTML 'views' in and out based on the URL that you are clicking on in the application. The AngularJS site has a tutorial where they do something similar. Pay notice to the ng-view explanation.
2) You can create custom directives and fetch an external HTML partial page. In the directive you 'compile' the HTML partial which allows you to use any directives that are on that page (ng-click, ng-class, etc) and then render it where the div is declared in the original page. This is a bit more advanced, so look at the ng-view example first.
For sending the data back to the mvc application, all you need to do in angular is declare a resource with the url back to the mvc app where you post the data and then send it some data. Something like this:
$resource('api/updateUserData',
{userName: userNameVar, userEmail: userEmailVar},
function(data){
//callback code where you do something with the returned data if any
}
);
There is a nice github project called angular-app that has a basic CRUD setup, shows you how to layout the angular app itself, how to use tests, how best to structure the angular files, etc. This may also be a bit more than you need for this small project, but it can at least give you some ideas on how to move forward if your app grows.
I recently came across a requirement in creating an API for an existing web portal. The current web UI will remain as it is and the API will provide the extra functionality for any clients that would like to build apps on top of the core app.
The web ui is pretty complex and consists of several step-by-step forms to achieve the desired functionality. For instance, some domain object is split into a set of form views (my viewmodel) in a wizard-like fashion. The validation in terms of whether the value entered is an int, whether the email given is valid etc happens on the viewmodel.
I was planning to re-use the viewmodel classes to represent the user input in the api.
e.g. WebUI: public ActionResult Save(FormOne form){...}
API: public ActionResult Save(String apiKey, FormOne form){...}
But this is so difficult i.e. have a perfect mapping between the WebUI viewmodel and the API viewmodel.
What constitutes a good design in this case?
a) Create a new viewmodel for the API?
b) Use the existing viewmodel when possible - create new classes where appropriate
c) Something else?
Thanks,
Y
A ViewModel should only be used by one View.
Don't reuse them, it is only a source of problems.
Sometimes, we want to violate DRY in order to reduce coupling. This is one of those times.
Make new ViewModels to serve your API.