CustomerManager angularjs by DanWahlin - angularjs

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.

Related

Problems with making Silverlight project out of browser

I have a task to make large Silverlight project run out of browser.
Fortunatelly I don't have to rewrite it to some other technology. Unfortunatelly I can not understand how to make it work OOB. I tried everything that's in guides :
enabling OOB option, installing and tryiung to debug installed app, but main thing is that when I run this app OOB I can't reach any services (no matter how I try HTML Bridge is disabled in OOB).
Is there a way to reach those services (like https://localhost/WCFRest/GetUserInfo?login=somelogin&password=somepassword) from OOB enviroment?
What should I do to reach them?
I'm sorry if this is noob quetion but I can't ask anyone else.
I assume you have a Web project in your solution. I think you changed the startup project to the silverlight project. You need to start up the Web project too.
Do the following:
Right click on the solution in the Solution Explorer and select Properties.
Select "Multiple startup projects" and set the action to "Start" (on the web project)
Or just simply right click on a HTML or ASPX file in the web project and select "View in Browser".

Is it possible to build a SPA without using .net framework in visual studio?

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.

IntelliJ IDEA run AngularJS project

How can I run my AngularJS Application in the IntelliJ IDEA? I use the last version of the IntelliJ IDEA and I installed the AngularJS support with the IntelliJ IDEA AngularJS Plugin. I wonder, that I cannot define some Server Run/Debug Configuration (like Tomcat) to run my application.
Is there a way to do this?
EDIT: Or there is some other way to deploy the application? I cannot find any suitable Run/Debug Configuration to somehow deploy my project locally.
Well, you need an application server to run the application. I'm using IntelliJ Idea with a local JBoss.
Build your modules and deploy them on the JBoss. You can even use an automated front-end build process with bower and gulp.
If you are only using javascript you don't even need a local server running, js is executed in the the browser. A JBoss, Tomcat or other application server is used for your server logic (e.g. Java code).
A 'lisa p' says:
You need an application server to run it locally on, such as JBoss.
Unless it's a static application (i.e. no dynamic content) in which case, just open your index.html file in a web-browser.
Ideally, if you wanted to continue to develop more pure AngularJS projects, then use Jetbrains' WebStorm IDE instead of their IntelliJ IDEA IDE.
IntelliJ is for Java Development, WebStorm is for Web and JavaScript Development.
To run Angular application without Tomcat/JBoss, we need to create a "JavaScript Debug" configuration. To do this, follow the instructions below.
In intellij menu bar, Choose Run --> Edit Configurations
Click green plus (+) sign and choose "JavaScript Debug"
For the value in URL box, navigate to the index.html file by clicking the little button[...] next to URL field
For the rest of the values in the form, follow the screenshot below

Running AngularJS app in WebStorm

Its been about a month since I started using AngularJS. I used to write my codes in SublimeText2 but i wanted to use WebStorm since it claimed to be more AngularJS friendly. I wrote a simple Hello World app and tried to run it but i couldn't get any hint of how to do it. I also don't have any knowledge about Node.js.Do i need Node.js to run app on WebStorm? Is Node.js a server? I tried going through tutorials on WebStorm page and also read few articles on Node.js but couldn't understand it. Can anyone explain it in a simple and understandable way?
You can open your HTML+JS application in the selected browser in WebStorm by clicking on the browser icon on the top right corner of the editor tab with index.html file opened (or any other html file you'd like to open in browser).
The same action could be done from the file context menu: Open in - Browser.
WebStorm will automatically start built-in web server for your convenience.
Note that you still can go to your project folder and execute your particular HTML file from there, the same way you would do it with the text editor.
Read more on working with AngularJS in WebStorm in this blog post.
If you have back-end in Node.js for your app, then you, of course, need Node.js installed. To run your node web app you need to create Node.js run configuration. More on it here.

Adding an AngularJS project to a Visual Studio 2012 solution

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.

Resources