AngularJS uses two-way client side data binding (from AngularJS Developers guide):
Has anyone consider using mix of server side templating engine with AngularJS two-way client side data binding. Something like this:
I am thinking about using AngularJS just for parts(components) of the page? Would it be good idea?
I would like to hear if you already had experiences with similar approach and what were drawbacks and advantages...
Angular is a complete UI rendering client framework. You can feed data into it, and it will render the proper html. On it's own Angular is a templating solution completely de-coupled from any server.
What you're attempting to do, is re-couple your Angular application to your server. It will be more work, there will be very few benefits, and you'll lose your ability to switch server technologies but keep your angular application untouched.
In essence, you don't want to do this for the same reason you wouldn't want to have your server rendering JavaScript for you... it's just less obvious because of all of the years we've been rendering all of our HTML at the server.
The end result is what's important. That the UI works properly and the application is easy to maintain. If you find your solution to be easier to maintain, then you should do it. I have a hard time imagining much being easier to maintain than straight HTML and JavaScript with a server that does nothing but host JSON.
I had the same dilemma as you have, I come from a background of using SMARTY as a server side template engine and we recently started using AngularJS.
I think mixing both solution would be appropriate in the the essence of total separation. i.e don't mix part of your page with both technologies but use both technologies separately.
For instance if you have a listing page where users will not interact with it at all, you may use server side template perfectly.
But if a page involve lots of manipulation and user side interaction in this case Angular is what you should use.
If you are using SPA (single page application) don't use server side template at all.
In a cordova app we recently made, we used a kind of a mix. Fix content like forms, lists, headers and menues we did in the angular way, some parts like content from an RTE or often changing templates we added with the directive ngBindHtml. The idea behind is to be flexible in the content pages of the app if the client want to change layout or want to put currently unknown content to it.
But i would suggest: if you can easy maintain the app (no long deployment/approval process) you should do it the angular way (but with no SEO in mind;).
Related
I am confused by the term Angular JS being a front end web development framework and (Spring MVC or Node Js) being a back end or simply web development framework.
My question is:
Can I built a full fledged web application which interacts with an application server like Tomcat and MySQL using just Angular JS?
If answer is "no" to 1(above), then my understanding is that I learn Angular JS for front end and (Spring Boot or Node JS) for back end. If that is the case what role does Angular JS play, which HTML, CSS and JavaScript already does not play?
If I use Angular JS, how does HTML, CSS and Javascript which were used traditionally fit in the picture?
I know there are lot of resources in the web but I am still not very clear.
Thank you in advance for your help!
No, you cannot build a full fledged web app in AngularJs. AngularJs is a JavaScript framework that runs in the browser (front end), not on the server (back end). Unless your application is very simple, your AngularJs application will interact with service(s) to get and set data.
Before even talking about AnglarJs' features, one aspect that a framework gives you is a pattern and guidelines that help with organising your code. If you start writing code without any framework, you have to invest more effort in thinking about how to structure your code. While you still have to do that with a framework, there are usually guidelines that are established by the community that will help you as the code base grows. Now, AngularJs is a Single Page Application (SPA) framework. That means that one of the features that AngularJs gives you is client-side (browser) routing. That allows you to only change the sections of the page that actually need to change instead of refreshing the whole page, resulting in a nicer user experience. AngularJs also gives you two-way data binding. Two-way data binding will automatically reflect JavaScript model changes in your DOM, and vise-versa. In vanilla JavaScript, if a values changes and you want to show that value in the DOM, then you need to write code that will actually apply that change in the DOM. With AngularJs' two-way data binding, that is taken care for you. AngularJs has many more features (dependency injection, components, directives, filters, etc.) that you can all find on the web, but hopefully the two examples I gave you give you an idea.
From my answer to question 2, you may realise now that you will still use HTML, CSS, and JavaScript. AngularJs is not a language, but a framework built on top of those languages.
By the way, at this stage I would not recommend building a new app with AngularJs. Use Angular instead. Angular is the successor of AngularJs.
I've been working with ASP.NET MVC for about a year now. I enjoy the ability to create SPA's especially by using the following tools:
Partial views(via html.action() and renderPartial())
Ajax helpers (Ajax.Actionlink() and Ajax.beginform())
My question is, Is it safe to just continue without a JavaScript frameworks or am i seriously missing out on something by not utilising a Javascript framework like Angular JS.
This depends a lot of the type of application you are building, but in general you don't necessarily have to choose between ASP.NET MVC and Angular, you can use both in a project.
For example, if you have a page with a grid where the user will add rows and you have to calculate sums etc you could use angular on that page (and it will speed up the development process).
But if you have pages with static content you can just serve an html file there using ASP.NET MVC.
And you can even use both of them. For something like a blog post, you can use a static html file for the post content and then implement the comments are with angular.
Since ASP.NET is a server side framework, it can only go that far as AJAX insertions. Angular JS is a client side Framework, designed for SPA in mind. If you are going for a light SPA, ASP.NET will do nicely, but I think you should use the right tools for the right job. Don't hesitate to mix them in order to find the right place between server side rendering and client side dynamism.
You are definitely missing some things.
The purpose of frameworks such as angular is not just to handle your bootstrap tab switches or whatever to display just parts of the UI rather than everything. Sure, you can create small and simple SPAs by utilizing such logic but once you come to create real-world apps that approach will become unusable. The reasons to this are:
Your site will be highly unmaintainable
Frameworks like angular provide much more than just templating (more on that in a moment) but features such as routing, which allows on-demand content loading. That is, instead of sending the whole page to the client, much of which (s)he maybe will not even take a look at, you can load fragments of HTML on-demand, which reduces network usage. Imagine you had to download everything (posts, images, videos, chat messages etc) on Facebook and hide them until you actually want to see them.
Back to templating, this is a very powerful feature. Again, in the case of simple apps you can use custom JS code - that is, concatenate strings to create fragments of HTML and then insert them into the DOM. But even with simple apps this is a smelly thing to do. Imagine you had to write custom JS to concatenate your chat messages in an app like Facebook then insert them into the DOM. With angular2, for example, you can do something like this:
<ul>
<li *ngFor="let msg of messages">{{msg.Sender}} said: {{msg.Content}}</li>
</ul>
This way, Angular2 will do all the parsing and DOM handling for you. That is, you write declarative markup rather than imperative logic for what you want to display.
All in all, they help you to decouple the logic from the UI so you should definitely dig into any of the popular frameworks and get a taste of their capabilities if you want to create rich apps. You will not regret it.
I've built a REST API backend using Django and am now at the stage of designing a client facing frontend. Though, I can't seem to understand how this client frontend should be structured and which languages it should use.
PHP is server-side, and is usually used as the language for building backends. When coupled with a framework such as Codeigniter, it can also be used to play around with sessions, route URLs, and decide which templates to use. Though, I don't believe it can be used to call my REST API to fetch resources (might be wrong here, correct me please if I am).
Javascript is client facing but is used only once the webpage has been fetched from the server. AngularJS is great, but from what I've read, it seems it only helps add very dynamic functionality into already rendered static pages.
I am really open to any ideas, suggestions, and advice based on your experiences creating client frontends. So, back to my original question, how does one structure a REST client frontend, which language is best for this goal, and if which frameworks should one consider to use?
Update 1
Someone asked whether this client frontend will be run in a browser -- the answer is yes, it will. I am trying to build a Twitter-like web client frontend that interacts with a Twitter-like REST API backend. Basically, everything you see there when you go on Twitter's website.
Since it is a browser frontend I would go with HTML/JavaScript only. No need to use PHP or any server side language IMHO. This has the advantage of being extremely portable.
I would also use a JS framework for that purpose ( the trend nowadays seems to be angular).
REST really, really isn't new. It's been a part of HTTP at least as far back as HTTP 1.1
Have a look at this question: Backbone.js frontend with RESTful Rails backend? the top answer lists 20 possible frameworks for building a front end.
Thanks for your help, everyone. Found exactly what I was looking for here:
http://docs.python-requests.org/en/latest/
A nice little library for Python that allows me to basically make calls to a REST backend from within a Django application, which serves as my frontend.
AngularJS will also be used for to make the static pages that Django returns more dynamic. Why? Because AngularJS by itself can be the complete solution only if your whole site consists of one page. If you have multiple pages where each one has it's own set of dynamic elements, you need a combination of Django and AngularJS.
Apparently REST is still quite new and it seems there aren't many people that have stumbled upon this very fundamental question like I have.
Once again, thanks!
I have been trying to learn Node.js for a few days now, but there is one thing I am confused about.
What is the difference between a client-side templating solution like JQuery templates and a server-side solution like Jade for Node.js?
What are the uses for each? Where are they used? Can they be used together? Is there an exampe of both of them being used together if so?
I just can't get my head around this. Would be nice to have an overview of things from somebody around here...
The biggest thing that should be considered about client-side vs server-side templating is that client-side templating will not work if JavaScript is disabled on the client for whatever reasons.
Otherwise it's not such a big difference. It's mostly up to whether you want to generate your markup on the server, or on the client.
A typical reason to use client-side templates is if you have an application which loads more data from the server using ajax, websockets or such. In such a case you might want to have a client-side template for rendering the newly loaded data.
For example:
In an application I wrote, I used ejs templates on server to generate the basic markup: The head, body, footer, etc. - content which doesn't change.
The application uses socket.io, which sends the client some events and data from the server. To display this data, I used Knockoutjs' client-side templating.
So in my case it's kind of a hybrid approach. The reason I did it like this is because the markup I generate on the server will immediately show once the page loads. The data which comes from socket.io could have also been rendered into HTML on the server, but that would require more bandwidth to send than sending simple JSON objects or such, so I opted to render them on the client.
Obviously I could have used a client-side template for the entire site, but I saw no benefit in rendering the static parts on the client. It would have just made the client-side code of my application more complicated.
We use MVC2 to build up our web app. There are some complicated pages in our project. They have plenty of user interactivities, realtime stock data and charts, requiring no page refresh.
I am new to front end development and ASP.NET MVC2. After using it for a while I think it's a form-based framework for presentation layer(I maybe wrong). If most UI actions are excuted inside one web page, using ajax and javascript to render data and run UI logic seems better.
Then I find there're two way to rendering UI in our app: binding UI model to View using MVC2 and filling the view using javascript. This seems not so elegant or may possibly mess if more and more views are implemented.
It seems MVC2 controller is good at being RESTful UI model data provider. So I think make the solution as Controller(model data)->HTML layouts + javascript(ui logic) could be a good way to implement such a rich client web app. Is it a good practice to do? Or what's your advice on this kind of project? Are there any web resources(articles or sample projects) for reference?
Thanks a lot.
It's not a bad practice to make your actions return just data, you could make your actions return JSon objects since they are lightweight and use JSonP to make ajax request across different domains.
You can try the new template JQuery PlugIn to render your views.
My suggestion would be to build up your application such that it works without JavaScript. Then use JQuery (a JavaScript library) and Ajax to improve the user experience.
Be aware that it is entirely possible that your RIA needs go beyond what one can do with Jquery. In these scenarios one might consider another solution (HTML5, SilverLight, Flash, etc.). Or you could tone down your RIA needs.