The title should be self-explanitory, but just in case. I am trying to build an angular application which will be hosted on azure. Currently I am having some issues with using kestrel, so I would like to build the application in visual studio but without using any .net code (so no startup.cs or program.cs).
If the answer is plainly no, then I guess I will need to find another IDE that will do what I require.
Yep. Just create a website project instead of a web application project.
https://msdn.microsoft.com/en-us/library/dd547590.aspx
Scenarios in which Web site projects are the preferred choice include the following:
You do not want to have to explicitly compile the project in order to deploy it.
Yes it is very much possible with visual studio to develop a SPA in angular without using .net framework. Below are the steps you can follow to getting started with a SPA in angular using visual studio.
Goto: File > New > Project
From the below screen selecet ASP.NET Web Application
Provide Name, Location, Solution click OK will get the below popup
From the above Popup select Empty and Press OK to create your project.
Now add an html file say index.html to the project. Write the below code in index.html
<head>
<title></title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.min.js"></script>
</head>
<body>
<div ng-app>
Message:<input type="text" ng-model="message" />
<hr>
<div>Entered Message:{{message}}</div>
</div>
</body>
</html>
And you are good to go. Right click on index.html and select View In Browser you will see the output in your browser something like this.
Now You can can create a directory structure accordingly. Below are few link that can help you with the directory structure.
Directory Structure Angular
Angular Folder Structure
Angular App Structure Guideliines
Or you can follow the steps as stated on official Angular website for getting started with an angular project in Visual Studio
VISUAL STUDIO 2015 QUICKSTART ANGULAR
Hope this Helps :)
Yes you can develop a SPA application without .net code in visual studio. Visual studio code is another IDE for cross platform development.
Check out the example at pluralsight
My Assumption here: You are ok to work on your website offline without actually firing it off thru the Azure hosted location.
I will try to address how to have a website opened up in Visual Studio which has nothing to do with project based on .NET Framework.
Steps to follow:
a. Create a physical folder on your drive and keep your SPA related files in it or let's say keep a simple "HelloWorld.html" file which just display some plain text.
b. Go to VS > File > Open > Website (Four or more options will be present)
- choose the simplest "File System" and point to the folder created in step a.
VS will open the folder as website and add a solution file to it but no other .NET Code is associated to it. This way you can use the IDE as I think you intend to use.
If you using node toolings to build you project you may want to try Node.js Tools for Visual Studio
It does have support for gulp/grunt tasks as well as it has integration with azure. The support is provided via custom project types.
Related
We need to create the index.html for the mobilewebapp on Mobile Frist project dynamically on server side.
It's possible to use javascript or java to create index.html ?
Or the only way it's to load a html fragment calling an Adpter ?
In MobileFirst Platform Foundation 7.1 the index.html file is generate when you create the project in MobileFirst Studio. The feature you want is not available built-in.
You could build this feature yourself to create the file and place it in the in the project programmatically and then invoking the build and deploy steps programmatically as well.
In v8.0 you create the HTML file yourself (there are no projects anymore). Here it is simpler to create this file and handle it as there is no deployment required other than registering the app - once.
I suggest that you will look into v8.0.
I'd like to add Angular app with pure JavaScript/Less/Node files to Visual Studio solution as UI layer, but without creating even basic default infrastracture, that VS doing even for empty project.
How Can do it?
the easiest way to add an (existing) Angular Project, you can do the following:
Create a blank solution.
Open solution in VS2019
Right mouse click on the Solution
Click Add
Click existing website
Browse to the path of the existing angular project and select the folder.
I hope this helps.
I created a Angular project outside the VS2019 by using the ng new command,
then I can add the angular proj into the VS2910 exsiting solution by
1. righ click the Solution from the VS2019, choose add existing Website, then select the folder which has all files and subfolder for this Angular prj,
Now you can see newly added Angular project as well as the existing other projs in the VS2019.
For Visual Studio 2017 and Angular 5 for me worked the next approach:
Add a new project: HTML Application with TypeScript
Repeat almost the same steps from this nice 7min tutorial: Angular 5 with ASP.NET MVC, Web API in Visual Studio 2017. The only difference is - copy the whole index.html file and remove unnecessary app.ts and app.css files.
I hope this is considered part of setting up a project from an Angular folder!
Fabio if you find the node_modules folder in windows explorer, right click on it and then select 'properties'. Then tick the 'hidden' property and say just for this folder so it doesn't iterate through the whole lot!
Then because it is hidden Visual Studio won't load it and searching will be magical again!
The folder is still there so this doesn't break any links, you just don't see it.
I'm working on an ASP.NET MVC application with an AngularJS front-end and it's working great when running from visual studio/iis express, but not so great when I try to publish it so it's accessible to other users (e.g. navigating to http://server/application in a browser). I have IIS configured on server so that http://server/application points to an "application" folder that is structured as:
application
app
areas
foundation
main
layout
layout.html
bin
Content
fonts
Scripts
Templates
Views
Shared
_Layout.cshtml
Index.cshtml
Logs
Global.asax
web.config
The initial page, Index.cshtml (under Views/Shared/), gets loaded but includes this:
<div ng-include="'app/main/layout/layout.html'"></div>
which returns a 500.24 - Internal Server Error.
If I change the ng-include to:
<div ng-include="'application/app/main/layout/layout.html'"></div>
then the published application works but running it from visual studio/iis express returns a 404.0 - Not Found response when trying to load that layout.html file, I'm assuming because there's no parent "application" folder when it's running using iisexpress.
I did manage to get the published application working at one point by copying the contents of the published application folder to server's C:\inetpub\wwwroot folder but that doesn't seem like a proper solution, so what's the best way to inform Angular to look in the correct location for this ng-include?
What I ended up doing is adding an application path variable in my web.config file and prefixing all my ng-include or other urls with the application path, so they looked like
<div ng-include="'application/app/main/layout/layout.html'"></div>
and then updating my project Web properties to the following:
so that whether I publish it or run it through Visual Studio, it's running under the 'application' folder and looking for the html files in the appropriate location.
I would like to create a Visual Studio 2012 (Premium) solution, initially containing a project for an AngularJS client. Later on, at least one ASP.NET MVC 4 project will be added defining the server the AngularJS client talks to. We would like to keep these things in one solution.
The problem is that I cannot find a fitting project template (installed or online) or a way to manually define such a project. No matter which project template I choose there is always too much cruft being added, as all project templates are based on some programming language / environment irrelevant to the AngularJS project. I would be happy with a blank project template to which only the relevant html, js, css,... files would be added.
One could of course define the ASP.NET MVC 4 project and then add the client parts to some folders in that project, we had already done such things in the past, but things get very cluttered.
Do you know how to naturally define such a web client project in VS 2012 or if VS 2013 does handle this better?
We came up with the following solution: In Visual Studio, select "Add New Web Site" -> "ASP.NET Empty Web Site". This approach fits the bill since it does not add much to our AngularJS project and hosting the application is also taken care of.
I would suggest create a new ASP.NET Web API project. File - > New Project-> ASP.NET MVC4 Web Application . In the next screen, select "Web API". Since you are doing the client only using HTML,CSS and JS , your server side becomes a bunch of APIs for which you need to create a Web API project only and not a full MVC 4 app. Even Web API project also comes with some MVC4 files and folders, which you can remove easily.
I m trying to learn Angular.js framework, getting examples on internet "CustomerManager angularjs by DanWahlin" demo seemed comprehensive and downloaded the code from Github "https://github.com/DanWahlin/CustomerManager" .
But when I try to open the index.html, it doesn't show anything. am I doing some mistake??
other examples that I downloaded like TODO using angular work fine.
Also if anyone can share some real time examples as to how the code is generally organized in PROD then it will be very helpful.
Thanks.
It is because the files are not supposed to be opened in a browser directly from the file-system.
(Many src, href etc attributes break.)
You have to follow the instructions on the Readme.md file. E.g. on Windows:
The following is required to support the backend services:
Visual Studio 2012 Web Express (free version) or higher - http://www.microsoft.com/visualstudio/eng/products/visual-studio-express-products#product-express-summary
ASP.NET MVC and Web API are used for the back-end services along with Entity Framework for database access (included if you have VS 2012 express installed)
To get started, double-click the CustomerManager.sln file located at the root of the CustomerManager repository. Once the solution loads press F5 to run the project.