I've come across a lot of posts on Stack Overflow about Express.js being used with Angular.js and how there are two MVC components to both the client and back-end sides of the web application, but I've just become confused now. What are the components of a web application, and what does each of these two serve? What are the MVC parts for each of the client and back-end sides exactly?
Thanks in advance for any response!
In most cases, it's pretty straight forward. In my applications, it generally works like this:
Express.js provides the backend REST API
Express.js serves up the static HTML, JavaScript, CSS and image assets.
The frontend HTML/Javascript bits are written using Angular.js.
I tend not to use any of Express.js' view capabilities (the stuff that provides functionality similar to ruby on rails or Django, with templating and all that), but instead serve up a single index.html and then let Angular.js do the rest. It's very possible/typical to make an Angular.js app which has only one main HTML file and therefore the "view" pieces of express are unneeded.
Angular.js itself is structured in an MVC fashion. You have view templates and controllers which provide data to them and handle events from user interaction. The data the controllers act on from comes from the model. The model is simply a layer providing access to the API provided by the Express.js backend. This is typically done using Angular.js resources.
RESTify is another alternative to express for apps stuctured in the way I describe.
As others have recommended, just go through the tutorials on each component's website. I also found a tutorial about integrating Anguar.js and Express.js here: http://technokayiti.blogspot.no/2013/06/lesson-5-angularjs-tutorial-backend.html
Related
I have nodejs + express server for API and I'm supposed to build SPA using latest Angular. The SPA should have a couple of static HTML pages which should be rendered using server side rendering and some templating engine - probably Nunjucks. My question is, is it possible to use that existing API server for server side rendering? SPA + static pages should be under one repository/directory, API server is under another. API server will be under separate domain. Is it possible to have them under separate projects or is it only possible if I combine server and SPA into a single project? The latter I assume being a pain to maintain.
Yes, You can definitely use your existing node and express server. #angular/universal is used for Server Side Rendering.
There will be separate Files for Server Configurations.
My Suggestion would be to make separate Repository for Angular app and let your existing one be as-is, that will help to maintain it better.
Please Follow "https://angular.io/guide/universal"
I'm thinking about making something with the MEAN stack. I need a way to edit the content of the site, like e.g. Wordpress offers (basically a CMS).
The confusing bit is how the CMS and Angular would work together. I've looked at a CMS named Keystone, and there you have to set up some routing etc. in Node. Won't this crash with the routing you set up in Angluar?
In other CMSs I've used, the creation of the views happens on the server side. In Angular, as far as I understand, you crate a HTML template, which you can populate with data in an angular controller. This also seems like something that could crash between CMSs and Angular. Is this the case?
Is there any other quirks or similar about Angular and content managment systems I should know about, or is it usually not much problems integrating the two?
meanjs.org has a pretty good approach to this. Install meanjs. It comes with a sigin/signup and even allows you to create articles from the vanilla install.
Put simply, when you are creating a web app with the MEAN stack, think of AngularJS as "THE" app, and node.js as the api.
If you approach building your web app as a javascript application (AngularJS), that happens to get its data from an server api (node.js), then you will begin to understand how to properly use the MEAN stack.
First: Angular will have the routes defined in the $routeProvider. Build the routing urls in AngularJS first. They are "THE" routes for your web app. A good way to look at it is to build the AngularJS portion with the ability to change your api server, even to another language (PHP, python, go, etc) if necessary.
Second: Build your AngularJS to communicate to the api with $resource. Essentially a $resource is an easy way to call out to an api using restful routing. This "restful routing" is now the routing that needs to be "mimicked/copied" into the routing for the node.js routes.
Often the AngularJS routes (the url) will match the $resource routing that matches the node.js routing.
Again, take a look at meanjs.org and you will have a better understanding on how to properly organize what "seems like" (and actually are) two separate apps.
Basically, you need three sets of routes (or two if you are doing it on the cheap).
Start out with a set of routes on the server that return regular webpages. Forget about JavaScript. Do not involve Angular at this stage.
Second, add another set of routes on the server which return data in a rawer form (such as JSON). This would typically be a RESTful API.
Third, add Angular to the client. When the view needs to be updated, update the URL in the browser and use Ajax to hit the RESTful API to get the data needed to populate it. (You want the URL you set the address bar to to match the URL of the page from the first set of routes that you are duplicating with JS and the data from the RESTful route).
If you are doing it on the cheap, like Gawker did, then you would skip the first set of routes and go direct to the JS+REST approach.
I think you need CMS on MEAN stack development environment.
there are some cms on mean stack you can try.
PancilBlue
Calipso
try this.
I was trying something similar, I found this link very useful AngularJsCMS It has told about free respond cms which is based on angularjs and have the ability to create pages like wordpress and manage contents.
We have been working on a project using angular and keystonejs. Simply serve the default template layout found in keystone and inject the data-ng-view tag within the body tag. Serve this template for all requests to '/'.
Then write your angular app normally to consume endpoints. These endpoints can be done in keystone using the api middleware. In the routes/index.js file add a key/value pair in the routes object with the name of your custom endpoint then import the folder containing your endpoint function definitions.
var routes = {
views: importRoutes('./views'),
api: importRoutes('./api')
};
exports = module.exports = function(app) {
app.get('/api/posts', keystone.middleware.api, routes.api.post.index);}
I recently migrated my blog over to MEANie - a lightweight custom MEAN Stack CMS that I developed.
I made it open source for anyone to use and posted details and setup instructions on my blog at http://jasonwatmore.com/meanie.
I want to create a web application and I am exploring how I could do this. So I came across AngularJS. I want to use WCF Service and SQL Server in my application also. I am trying to find what AngularJS, WCF Service, SQL Server can do for me because I do not want change technologies in the middle of my project after discovering that AngularJS cannot do things which I want my application to do.
So, my question is can AngularJS help me create Static web pages and Dynamic web pages?
I can start my project in ASP.NET MVC but I want to explore AngularJS and want to find out what it is.
My project is about
Sending E-mails
Displaying content from database (in any manner using Ajax)
Voice chat, Video chat, Text chat
Can contain Javascript, jQuery, CSS, HTML5
Tell me something about it. Any suggestions?
Thanks
Your question is vague, but I'd suggest using Microsoft WebAPI instead of WCF or even ASP MVC, due to the from the ground up RESTful design of WebAPI and much easier configuration.
Using this approach, you'll still be able to query SQL Server in C# using WebAPI, so you won't need to switch your database.
There's very little documentation by comparison for querying non-RESTful web services, so you'll gain a huge advantage in terms of tutorials, blogs, etc. by going this route.
Please see below for your questions:
Can AngularJS help me create Static web pages and Dynamic web pages?
Yes certainly it can. Check it out at the official website
2.Sending E-mails
This should be the server side responsibility using an e-mail client, for instance SMTP client
3.Displaying content from database (in any manner using Ajax)
Yes, it certainly can.
4.Voice chat, Video chat, Text chat
Try WebRTC first to see if it's sufficient for your tasks
5.Can contain Javascript, jQuery, CSS, HTML5
Yes, you can use whatever you want as long as you are sure about what you are doing.
I hope following guidelines will help you.
When you create the project select WebApi template.
Then include angularjs files in the scripts folder.
Use cshtml files,but do as you in html file.
Use angular client side mvc features to build your app fast and performance.
Use the angular http service to call webapi methods.
All the c# specfic features build in the webapi.
I'm working on a large ASP.NET MVC/Web API project and wanted to separate out the controllers into their own project (as described in this article http://msdn.microsoft.com/en-us/magazine/jj190803.aspx). The difference is that I'm needing to separate out the ASP.NET Web API controllers, not “normal” MVC controllers.
In my solution, I have two separate projects:
One ASP.NET MVC 4 project for serving up HTML/CSS/JavaScript (note
I'm not using any standard MVC controllers, this project is all
client/browser-side code that makes jQuery/Ajax calls to the Web API)
One ASP.NET Web API project (this project is only the
ApiController(s), no views, HTML, etc., I'm still wanting the Web API
project to be hosted in IIS, not self-hosted)
Anyway, I’ve seen other posts and such that haven’t really explained my exact situation, and I'm having trouble getting this solution working.
How can I break out my Web API controllers into their own separate project and use them from my HTML/JavaScript code in my separate MVC project? And, how do I call the API’s endpoints from my JavaScript/jQuery code in the separate MVC project?
Thanks.
Since your Web Api and MVC are in different projects and probably they will run in different domains making the communication little difficult from client-side beause of cross-domain issue.
Though you can try JSONP or CORS but they are not going to be much useful (one is a hack and the other is not widely supported in browsers) and so you have to create wrapper MVC controllers in your MVC project that will talk to the Web Api through HttpClient class.
Your javascript will make calls to your MVC controllers and this way you can avoid the cross domain issues.
You can separate your API controllers into another project, that's fine. Just assure that you have all required assemblies referenced. I suggest take a look at Nuget packages to assure you have them all.
For api and web separation, use proper routing that's all I guess. Check "WebApiConfig.cs" in App_Start folder at your MVC project. API routing has basically "API/..." at the beginning, so it wont make a mess with your mvc site.
So at the end you will get something like this:
http://localhost/products
http://localhost/api/products
First process request at mvc site, second at WebApi.
I recently installed a web app which use Symfony2 framework and Apache Thrift.
Now I would like to make backbone usable in Symfony2 framework.
My question is about Backbone.sync.
How can I override/use Backbone.sync in order to get data from the server in a web app using Symfony2 framework and/or Apache Thrift ?
Are there some tutorials on the web for do it? I just found this one Symfony + Backbone.js for highly dynamic apps, but it doesn't say nothing about how to get data from the server.
By default, Backbone.js and its sync method can work with REST APIs without any modification. So if you can create a web service with Symfony2 that can handle GET/POST/PUT/DELETE and return JSON, you should be good to go.
I'm not terribly familiar with Symfony, but for a basic REST API, you'll need to define your URL routes (e.g. "www.yourdomain.com/api/items"), and then create methods to perform actions based on those routes (e.g. return records in JSON encoded format).
Here's a quick tutorial on creating a REST API with Symfony2: Symfony2 REST
Also, check out Wine Cellar tutorial on the Backbone tutorial page. It uses PHP Slim framework, but the backbone.js concepts will be exactly the same, because as long as you are using a basic REST API, backbone is back-end agnostic.
Check this bundle https://github.com/gigo6000/DevtimeRafflerBundle it's a small simple app that includes some basic REST actions. This was created with https://github.com/gigo6000/DevtimeBackboneBundle