I would like to be abel to run my angularjs app from the app directory from VS code without using VS2015 and without running iis express. This will make it possible to create new UI very fast specially combined with mocking the service layer.
It's a mvc5 + webapi2 application.
So I need to run /app/index.html from mvc. The index.html is a full html page not an angular template.
Create an action method that returns perticular HTML file. You can return File from controller action. have a look:
public ActionResult Index()
{
var result = new FilePathResult("~/Html/index.htm", "text/html");
return result;
}
Also check this Class: FileResult
Hope this helps!
You can simply call:
return Redirect("~/path/to/.html");
2 ways of doing so:
i. Simple replace the original index.html to your new index.html, all other libraries please place in side the corresponding folder.
ii. in web.config, you may change the maproute properties, you can map your view as default or add new map route.
Thank you.
Related
I have a web-app developed in Angular with Grails at the back serving REST service calls and the root page of the single page apps as well the template html files defined the ui-router. The application has html5mode set to be true. In order have the reload to wok, I add the mapping to UrlMappings.groovy:
"/app1/**"(view:"/app1/index")
/app1 is the base url of the app, /app1/index would be served by grails-app/view/app1/index.gsp, but this cause problem since all template Url's are coded in relative, which means they are also have the prefix /app1 in Url's as well.
Ideally I'd like to have a mapping for /app1/**.html which still maps all template Url to html files under web-app/app1. But I could not find information on how to achieve this. I tried to add
static excludes = ["/**.html"]
But it does not work either.
Anyway to get around this other than to restructure the dynamic Url's and template file Url's to force them to have entirely different prefix?
Your static resources are available for consumption via servlet context. So you could create a controller or a trait to mixin into existing controllers that maps to any of your static templates.
/**
* Render some static content for AngularJS consumption from public folder e.g. "/templates/home.html"
*/
def renderStatic(String fileName) {
try {
response.outputStream << getServletContext().getResourceAsStream(fileName)
response.outputStream.close()
} catch (e) {
render status: NOT_FOUND
}
}
This is an MVC 6/WebApi application. I'm attempting to use WebApi on the backend with AngularJS on the frontend.
I have two static files: index.html and login.html
(There will eventually be more static files.)
My Angular app is contained in the index.html while views (such as /login) are loaded from static files (i.e. login.html).
If I go to my root URL, index.html is loaded just fine. However, if I go to /login, I receive a 404 page not found.
Now, let it be said, I DO NOT want to bog down my application with a bunch of controllers and views as it's unnecessary to simply serve static files. That's overkill.
I have my routes setup to serve API calls (i.e. ~/api/whatever). How I get MVC 6 to ignore all other routes?
FYI, it also appears that MapPageRoute is deprecated in MVC 6?
EDIT:
One thing I've done to actually get it working is add my own middleware to intercept the request. The code below is added after all of my default middleware in the Configure method:
app.Use(next => async context =>
{
if (context.Request.Path.Value.StartsWith("/api"))
await next.Invoke(context);
else
await context.Response.WriteAsync(System.IO.File.ReadAllText("index.html"));
});
This seems a bit much and it's just a hack. All it does is allows any request that begins with "/api" to go through (which is then picked up by the MVC middleware), but any other call is served with the contents of the index.html. So, if my requested URL is "/login", the index.html file is served, then Angular looks at the route and loads the login.html file into view.
Any other suggestions?
Okay, so since something didn't exist in the MVC 6/ASP.NET 5 framework, I've created my own middleware that provides a lot more flexibility. It has been added to GitHub and is available through NuGet.
The project page is: https://github.com/a11smiles/AngularMiddleware
I was able do what you are asking here. Basically, I added a catch all route to my index action:
[Route("{*path}")]
meaning if no MVC action does not exist, call my Index action and angular routing will take from there
I am currently following this tutorial:
https://scotch.io/tutorials/build-a-real-time-scheduling-app-using-angularjs-and-firebase#connecting-to-and-using-firebase, but it is not working as I have it in Google Apps Script.
I am trying to use AngularJS in Apps Scripts. However, the documented fixes to make AngularJS work is documented to use the following line of code:
var ui = HtmlService.createHtmlOutputFromFile('myPage')
.setTitle('My Title');
ui.setSandboxMode(HtmlService.SandboxMode.IFRAME);
Source: Angular JS in Google Apps Script
But I am not sure where to put this in my Code.gs file? I have a function.doGet, so does it go in there?
Right now, my Code.gs is as follows:
function doGet() {
return HtmlService.createHtmlOutputFromFile('index')
.setSandboxMode(HtmlService.SandboxMode.IFRAME);
}
Thanks for your help!
HtmlService.createOutputFromFile(...) returns an instance of the HtmlOutput class, which has the setSandboxMode(..) method. Assuming that you have a file "index.html" in your Apps Script project, your code is correct:
function doGet() {
return HtmlService.createHtmlOutputFromFile('index')
.setSandboxMode(HtmlService.SandboxMode.IFRAME);
}
doGet is the method called by the Apps Script runtime when user navigates to your app's URL, and it should return the fully formed HTML that you want to render (which can include references to externally hosted js, css, etc.)
I created an empty Web API project and have this:
GlobalConfiguration.Configure(WebApiConfig.Register);
When I create a non-empty Web API project I have this
AreaRegistration.RegisterAllAreas();
GlobalConfiguration.Configure(WebApiConfig.Register);
FilterConfig.RegisterGlobalFilters(GlobalFilters.Filters);
BundleConfig.RegisterBundles(BundleTable.Bundles);
RouteConfig.RegisterRoutes(RouteTable.Routes);
I do not need MVC Areas.
I do not need MVC filters.
I do not need Bundling/Minification as this will be handled my client side libraries.
I DO NEED (at first sight) the RouteConfig because I need the MVC HomeController which renders the initial _Layout_cshtml HTML file.
I am doing a Single Page App (AngularJS) + Web API.
Because of the last point above I have to add MVC stuff to my Web API Project.
Is there any possibility (angularJS/other JS libraries) on client side when the browser starts to initially retrieve a html file and render this instead of calling the MVC RenderBody() Method?
For a SPA with WebApi, you should not let MVC or .NET do anything to the static side of the site. That will just slow everything down and it's completely unnecessary. The words ".Net controller" and SPA should not be used together :)
The setup I use, when I want to test end-to-end with WebApi, is to have a static site in IIS, say mydomain that contains the entire contents of your static site, at least index.html. Then I create a subfolder under that site called "api" that is a full application. This will be your WebApi. Since it's a subfolder under mydomain CORS is no problem, but as far as IIS is concerned the root is pure static, and the "api" folder is a full-blown .Net application.
Here's what it looks like in IIS...
You could just embed the HTML file as a project resource and return it directly?
public class HomeController : ApiController
{
[HttpGet]
[Route("/")]
public HttpResponseMessage Get()
{
var content = new StreamContent(this.GetType().Assembly.GetManifestResourceStream(this.GetType(),"home.html"));
content.Headers.ContentType = new MediaTypeHeaderValue("text/html");
return new HttpResponseMessage() { Content = content };
}
}
Really all you need to do is setup a static HTML file wherever you keep your other static resources (scripts, css, etc).
You can then just redirect to it from your root controller:
public class HomeController : ApiController
{
[HttpGet]
[Route("/")]
public RedirectResult Get()
{
return Redirect("/contents/myapp.html");
}
}
I am building an Asp Net website in Visual Studio that uses Razor developed HTML pages. I would like to be able to use some C# from the javascript on one of the web pages (this is not creating a plugin that would be displayed in the browser.) I have tried to create a simple Cs class that has a single method that returns a fixed string to test this. The following code is in the ManagedCsClass.cs file is in the App_Code folder in my project.
[System.Runtime.InteropServices.ComVisibleAttribute(true)]
public class ManagedCsClass
{
public ManagedCsClass()
{
//
// TODO: Add constructor logic here
//
}
public string ReturnText()
{
return "Text from ManagedCsClass";
}
}
What I am not clear on is where to create the object that would be used by the HTML page (in the same .cs file as the class, another .cs file, or from a call from the HTML browser page).
And what code do I need to use in the javascript to reference the object/method?
Thanks for any help or guidance you can provide.
Mark
You are trying to use "ActiveX" com objects, this requires the dll containing that class registered on the client and you will have a lot of security/deploy issues ( the client must trust your object and have the framework installed ). It is not the best way to create a web app today.