I am working on an web application/site and I want to do it with AngularJS, ASP.NET and Typescript.
I read about the Single Page Application concept, but I still have some question about this whole concept:
Why should I prefer a SPA (Single Page Application) before multiple pages.
I also have some questions about integrating it with ASP.NET:
In ASP.NET it standard generate a nice bootstrap layout with about 3 pages at the top. So I think that it means that I need to combine all these pages to one page. But how can I get it to work together with the routing of ASP.NET. Because you will use the routing of AngularJS, and I want to keep the login from ASP.NET (Can you maybe give an example so I can see how it works).
If I got it correctly Typescript in this concept will replace the JSON webservice. Is this correct or do I got this all wrong?
If you could answer one of my questions I would be very thankful.
SPA's are a trend, they are mostly useful to move the load on your server to the clients. Only data requests will be made to the server, rendering is done on the client machine.
There are still other benefits, but I guess this is the most relevant.
As to your questions regarding integration into ASP.NET.
Building an SPA does not mean all has to fit in one page. Look at AngularJS, it will fetch views as separate requests (see templateUrl in routingprovider). That being said, you can use ASP.NET MVC and serve ASP.NET Views as Angular Templates. This allows for a neat separation of Model, View and Controller parts.
Typescript is Microsoft's JavaScript dialect. It will not replace JSON and you will probably want to use JSON to exchange data with your server. You could use XML, but that is a little bit oldfashioned (and way more bulky).
I have no experience with TypeScript so I would not consider doing that (coffee might be a better alternative), but there are also some quicks in JavaScript you need to be aware of. I would suggest to search Douglas Crockford and Javascript on Youtube. The guy has great talks that can make you a JavaScript pro.
Related
Im very new to programming and I'm wondering if someone can point me in the direction of how to make a website show 3 images that represent products and instead of redirecting me to another page but instead stay on the current page and show information about that product which can lead to a purchase.
I'd like to be able to build a SPA, but I'm in the early stages of learning HTML, Css and Javascript. What are the best framework to start using if i want to create a information website with just contact info, about me sections and so on.
The term what you are searching is Single-Page Applications (SPAs) which are Web apps that load a single HTML page and dynamically update that page as the user interacts with the app.
To have smooth scroll and other animation effects, you need to write JavaScript that can run be executed in the client side. I strongly recommend you to use a framework which is specifically designed to develop client side web applications such as Angular, Jquery. There are lot of options and I can't just specify all of them nor recommend specific one without knowing your actual requirements.
Do a basic research on Single-Page Applications, client side web applications in Internet, you will find lot of frameworks and tutorials.
The simplest way to use single page application nowadays is using frameworks like bootstrap. You could use their ready functionalities.
I am currently a front end developer. I know HTML and CSS pretty well, I'm OK with jQuery and know some Vanilla JS. I have an idea for a website I want to create where I will be storing data for products (data that I will be grabbing from various websites around the web). It's basically a help me choose application where the user will go through some steps and be given some choices based on their selections. This site is nothing new, but it's more for learning purposes/portfolio work.
Most of my co-workers use ASP.NET and I've seen that you can setup a website like this using ASP.NET and the provided server controls along with C#, however, I want to take another route that allows me to do the same thing NOT using ASP.NET (C# is OK and preferred if that is possible) in that I can grab data, store data, and bind data to my page.
In addition to this, I would like to do this on the Mac.
Here's a list of things I have looked at:
MongoDB (I was really confused by the setup and didn't read anywhere that this would definitely be the solution).
AngularJS
EmberJS
BackboneJS
Several other JS frameworks
Ruby on Rails
Note about the above: Some of the above might be the solution, but I don't want to start spending time learning them only to realize a week in that this is not going to help me get to my goal.
If this post would be better suited for another stack site please let me know. Thank you.
To create a basic website with a persistence you'll need to deal with three parts the front-end (client), back-end (server) and the persistence (database). Of the things that you've listed Angular, Ember and Backbone are all front-end frameworks. They each have their own way of approaching the issue but they all work in the client facing part of the project so views, interaction and dispatching data to the backend. Rails is the only thing that you've listed that's a back-end framework, another option for the back-end if you're more familiar with JS might be Node and Express. Node allows you to build a server in JS and Express is one of the more popular Node frameworks. That section will be responsible for getting the calls for data and calls with data from the front-end and dispatching the appropriate response. Rails typically works with with a SQL database like MySQL or PostGres out of the box because Rails' active record is meant to work with SQL. Mongo is a NoSQL database and I think people are getting it working with Rails but I don't know that it's highly common. Mongo's shell is pretty much javascript and it stores data as JSON (not technically but close enough) so it's been a comfortable choice for JS developers learning back-end. Either Rails or Node can get a server up and running locally on your machine so you can work with the full architecture. So what it comes down to really is picking one of each from those sections and making them play nicely together. For your purposes I would think that the way to go would be either a basic Rails app (probably with MySQL) and using jQuery ajax calls to manage some calls from the front-end or building something with the so-called MEAN stack (Mongo, Express, Angular, Node) which is all JS and using Angulars built in http functionality to handle those calls. Hope this at least narrowed the field of research a bit. Really thats a pretty open question and there are a lot of options.
What is your webhosting site? I suggestPhpmyadmin Or Mysqldatabase You can create tables and strings where you can put the websites you wanna "grab" data from and put a little javascript in there to tell your website if blahblahnlah =blahblahblah then get id="website1"
Some clarifications:
At first, you need to distinguish between a server side language (used to program the functionality) and a database (used to store data).
C# is a language of the .net framework. Regarding websites, there's no C# without ASP.net.
There are two major groups for realizing back end solutions: PHP (market share ~ 40%) and ASP (~ 25%). PHP is a programming language, ASP.net incorporates several programming languages (mainly C# and VB.net).
Both worlds are able to connect to databases: For PHP, this is mainly MySQL, for ASP.net it is mostly Microsoft SQL server.
First time asp.net webAPI + angular project. From many examples I've seen online I've found there are basically two ways for handling the views.
The first (which I have seen in many tutorials and courses) - use APIcontrollers only, so that the view are generated by angular. That means my project structure would have a folder 'app' and it will contain the html files (probably inside a 'view' folder). The routing will be done using angular routes. I will only have APIControllers in the project (without the regular Controller object).
Example project: https://github.com/DanWahlin/CustomerManagerStandard
The second - using Controllers to generate the views, using Razor (cshtml files), and angular incorporated into those (i.e ng-click inside the cshtml). There's no special 'app' folder for angular etc.
example project : https://github.com/Wintellect/Angular-MVC-Cookbook/tree/master/CRUDOperations
So, I'm wondering what are the pros and cons for each method, and when shall I use which one. Examples projects would be great as well.
I can only assume that the first method is more modular and differentiate server and client. However, using it means I'm loosing razor (Do I even need it?)
Thanks!
I actually had to make this decision a few months back myself.
This comes down to what you feel is more comfortable. I chose to do angular and WebAPI controls only. It makes me think in terms of true separation of concerns just easier, angular is your presentation layer and webapi is your services. This also gives you the freedom to do the compression/formatting of the actual html pages(instead of the cshtml pages which you really have no control over).
One more pro for WebAPI only is scalability, you would really only need one webserver for the webpages but you can scale out your WebAPI, this will allow you WebAPI to be your api as well as your clients as well.
Razor is just a view engine and in my experience angular does a good job of templating and directives to bear the cost of losing razor. You'll probably end up writing pure HTML in your razor files anyways once you get a hang of directives which means you'll have more of an issue adding a new view. Who wants to create a new controller, new action and a new view, and then have to do that in angular. It just ends up being easier and less complex to let server serve the html files, and let angular do all your routing and logic for you.
I believe too that the html files get cached too so you will see less round trips as you navigate page to page in angular.
As a person who works at a Microsoft shop and loves AngularJS for nearly all my front-end, the sooner you get away from mixing Razor and AngularJS, the better, especially if you are going for a SPA.
The only time I would recommend using Razor at all would be to generate the landing page (and possibly login page/admin area). It does give a nice way to provide authentication to access the app and then use Web Api Authorization attributes to do the rest of the authentication.
I have to develop an application which takes XML reports stored in File System parse it and put it into database and display the reports by querying the database in various MIME types(XML,JSON,RSS and HTML). So what I have done till now is parsed the XML reports in the file system ,setup schema for database in MongoDB,put data in database using Spring-data and also managed to have a web service which shows rough draft of reports in XML,JSON and RSS feed.Now I want to display the reports in HTML as well and my supervisor suggested me to use Backbone.js to dispaly it in HTML format by calling the web service.Kindly advice me to choose b/w Backbone.js or write another Spring MVC web service which generates reports in HTML.
Thanks in advance
Swaraj
What you are asking are two different things and choosing between them.
You have to know what your overall objective is with the webapp is and what framework is best for it.
Short answer, Spring MVC integrates with Dojo.js right out of the box, which might do what you need to do, but since your supervisor is suggesting otherwise your options are:
Use Spring MVC to construct and display the data in the HTML using what ever render of your choice.
Or
Build out your Spring MVC wepapp API so that you can use a JavaScript MVC framework, such as Backbone.js or one of the many others (see TODOMVC for samples), to interact with your spring controllers.
Option 1 might be easy enough, used in conjunction with JavaScript or jQuery and plugins
Option 2 would be good if your webapp is complex and will be mostly a SPA (single page app) that utilizes a lot of JavaScript and you want a way to organize your js code better. See JavaScript MVC diagram for an example of how it works.
I have to develop a phone application on every platform so I thought of using phonegap. Seems pretty nice.
I have a web application coded in classic Asp and it's this webApplication that I need to strip down to be a phone app.
At first I thought it will be simple, my classic Asp render some html so phonegap is able to put it as an app.
But it's not that simple, because in my asp I have some code that is rendered server side, I've talked to some who tell me that some html could call the asp pages and this html could be used in phonegap. Don't think it's possible ...
Well if someone could help me here, maybe i've said something wrong in my little text don't hesitate to correct me :)
My solution (I think) : code some webServices in asp.net that will use the same database as my asp classic web application. And some html and jquery will call the webservices and those html and jquery will go trough phoneGap
What is the best way to transfer and asp classic web app to a multiplatform phone app ?
EDIT : After looking everywhere, effectively phonegap can't use asp pages. So I'm questionning myself should I do a mobile website or a mobile app with webservices?
EDIT 2: I'm going for an asp.net mobile website, someone have a great way to do this, I've seen the answer proposing mvc... more details?
You are on the correct path in wanting to use PhoneGap to create a multi-platform phone app via HTML5, and some mobile framework like jQuery Mobile.
Yes, you can leverage the power of ASP.NET to serve up your data but I wouldn't create an asmx web service. A SOAP-based service serving up XML may be too fat/overkill for your mobile web app. Instead, you may want to investigate using JSON which is more lightweight (remember, bandwidth is a concern with mobile apps). One can rapidly create an API to serve up your JSON data via the new ASP.NET Web API. With your API exposed, you can make an ajax call from your html page to retrieve the JSON and bind it using jQuery.
The bonus to using the ASP.NET Web API would be when it's time to upgrade that classic ASP web site you have there, you could leverage the API you already created.
I'd really consider rewriting the website using Mvc.Net. You may want to consider using the iUI for the views.
It will be much cheaper long-term to use modern technology than trying to shoe-horn legacy code into new usage areas.
It looks like you've made up your mind to go with a webapp instead of native apps via PhoneGap. I would recommend that you pick up this book by Jonathan Stark. It's very short - shorter than it should be when it gets into using PhoneGap - and although it focuses on iPhone development, much of the content is applicable to most mobile devices. The first few chapters give a great introduction on developing attractive, responsive, highly usable web apps for mobile devices. If you familiarize yourself with jQuery and jQTouch you can get some really great looking apps with relatively little effort, regardless of the server side technology you go with.
So i'm questionning myself should I do a mobile website or a mobile app with webservices ?
The answer to that question is always mobile website... given an outdated website that the client is wanting duplicate functionality in an app.
Do the work to convert the website or at least the portions that you need to use ajax and webservices. Once you have that in place pulling the same data to place in a mobile app will be easy... you've already done it once.
So my approach would be to convert this dataview into two separate elements Data and View.
You can probably even keep the current asp pages without a lot of modification to the code since you can still call these web-service functions the same way as before in your asp code.
Well, if you really want to reuse your existing webpage you can do the following.
Create a index.html and the body.onload event, redirect to your webpage.
Then build this index.html with phonegapbuild, and you will get your "native" application that simply loads your existing webpage.
If you want to serve mobile users, you have 2 main options:
Create a mobile website. You can render html on the server all you want, no javascript programming needed. Maybe look into jQuery mobile, it can be a cheap and easy way to make the website better for mobile users.
Create a html web app (and package it inside PhoneGap if you want). This is basically a html page which loads just the data from the server in json format and updates the page contents dynamically with javascript. You need good js skills to implement this, you're server is just a REST api that server json - technology can be anything, at least asp.net mvc makes it easy. On the client side you'll want to use some good structuring frameworks, backbone.js ( http://documentcloud.github.com/backbone/ ) is a good option. Check out http://m.linkedin.com for an example of what a mobile web app can be.
3rd hidden option: just create a native app for each platform, that'll get you the best user experience.