#SP24 : #angularJS. Why not #knockoutJS?

+Jeremy Thake in #SP24S058 showed AngularJS basic for SharePoint 2013.

Meanwhile, I have asked people in the web conference room:

Why Angular over Knockout?

and here is the response:

angular is more than a data binding engine, which is what knockout is

 Angular has a different structure and appears to have more features ... at the moment knockout seems easier but like getting used to javascript its just a case of ... getting used to it 

the chart showing the "interest" in Angular exponentially bigger than the other frameworks ...

AngularJS is favored, due to the support of the community. Doing a few searches even around "leaks" shows the community support! 

off the bat, the concepts for service, factory and provider are not in knockout but mostly because there are other ways to do those things ... but that feels more like hacking than using out of box bits :  more directives and customizable directives/tags ... the syntax is different but seems cleaner ...   knockout focuses on purely data binding. angularjs provides a larger framework. either way, leveraging one over the other depends on the reqiurements, right?   if I am just binding, I am fine with Knockout ... but this framework potentially eliminates a lot of the JQUERY lines that I have to support the rest of the app  and here is another thing over knockout ... unless I missed something I can only have one "model" in applyBindings at a time ... this implies I can have many (multiple controllers) ... but I might have missed something advanced in Knockout ... 

What's your take on that? Is that true? Do you prefer knockout? if so, why?
I would love to hear your opinion.

 Back to @jthake main topic: AngularJs bacis
AngularJS facts:

•  has concept: App, Directives, Service, Factory, Providers.
•  comes from Google

AngularJs & SP2013?

• to add  - <div ng-app="myApp">

You can't use templateUrl

• Instead use JSRequest:

• use Bootstrap UI

Resources:
SHAREPOINT 2013 APPS WITH ANGULARJS FROM BUILD CONFERENCE 2014

http://jsfiddle.net/ -to develop and collaborate on JS code.

http://blog.nebithi.com/knockoutjs-vs-angularjs/

SharePoint UX: Styling and Branding. Design implementation

Previous related posts:

SharePoint UX: Styling and Branding. Design strategy

SharePoint UX: Styling and Branding . Do it right

Other important course on general UX: Daily UX Crash course (free and simple) 31 days in a row

Last day Kyle Schaeffer in his Styling and Branding class dove deeper into jQuery and how to use it to enhance User Experience in SharePoint portal.

Kyle said it clearly and easy to remember:


CSS is all about presentation

HTML is all about structure

JavaScript is all about behavior. (Jquery should enhance the interface but your basic structure should be functional even without jQuery)

Remember this and you design will be easy to manage.

This post is all about sharing resources that will get you started with such customization:

What to learn:

Fun resource to learn javascript, web fundamentals, jQuery

A free and recommended by Kyle book on html5

Recommended by Kyle a book to buy if a free book is not enough for you

What to do:

Pure design:

Image generator lorempixel

Text generator lipsum

Design site palette easy

Google Web Fonts

Web coding:

SharePoint blank master page starter

An example of quick jQuery magic - WP Tabify: transform a SharePoint web part zone into tabs

jQueryui - animation, advanced effects and high-level, themeable widgets, built on top of the jQuery JavaScript Library

SPservices - jQuery library which abstracts SharePoint's Web Services and makes them easier to use


Do you want implement slide Image Carousel into your page?
Refer to: jQuery Cycle Plugin

The quick signposts to implement it in SharePoint:
Picture Library -> Content Query WP -> Item Style -> jQuery Script with jQuery Cycle Plugin

P.S. Item style is to change the presentation of the data

P.S.S. Not from Kyle but worth to know: Top 10 Mistakes in SharePoint 2010 Branding and UI Design

HTML5/jQuery Webinar Week: Building a Real World HTML5&jQuery line of busines App with Infragistics &KnockoutJs

Infragistics organized HTML5/jQuery Webinar Week on 06/19-06/21.http://www.infragistics.com/resources/webinars.aspx

Here are quick notes on the June 21, 2012 - Building a Real World HTML5&jQuery line of busines App with Infragistics &KnockoutJs (Advanced  level)

All demo materials will be posted on  http://blogs.infragistics.com/blogs/jason_beres 
The webinar was totally focused on Infragistics product - netAdvantage for jQuery (based on jQuery, all-in-the-web , no plugin is needed).

In demo material you will see demonstration of CRUD, multiple controls and their interaction.


The whole set of the demonstrated controls aims one goal: Data Visualization

The demonstrated Grid and Chart are developed using:
 - ASP.Net MVC 3
- Infragistics jQuery Grid, Map and Loader
- KnockoutJS

The library also includes controls for line of business: Tree, Players, Upload.

For me the whole series of the Infragistics webinar were useful.
I have been out from web development for almost 2 years.
So, it was a good start for my web development self-education.

Here are the links can be useful in case I have decided to spice my web project up:

http://samples.infragistics.com/jquery
You can click through controls, the feature list is intergactive. So you can check possibilities of the Infragistics controls.

http://community.infragistics.com

http://blogs.infragistics.com
http://forums.infragistics.com

HTML5/jQuery Webinar Week: Getting Data into Your HTML5 & jQuery Apps with the igDataSource Control

Infragistics organized HTML5/jQuery Webinar Week on 06/19-06/21.
http://www.infragistics.com/resources/webinars.aspx


Here are quick notes on the June 20, 2012 - Getting Data into Your HTML5 & jQuery Apps with the igDataSource Control (Intermediate  level)
All demo materials are posted on Webinar Followup: Working with Data in jQuery & HTML with igDataSource. 


Today's webinar was totally focused on Infragistics controls:
 - igDataSource;

 - igGrid 

 - igChart;

 - igLoader

These controls,a jQuery component, a simplify data access and management.

igDataSouce can work with:

On the Server side : Data (web services), REST GET, WCF REST (JSON&XML), JSONP Service, any Rest Service


On the Client side : binding with:JSON, XML, JavaScrip Object Arrays,Strings of XML or JSON,
JavaScript functions returning data in any of the formats above
 - Existing HTML structures (such as a HTML table filled with data)
-  Mashup scenarios

igGrid:
Supported features:
Local and remote data Paging
Sorting
Filtering
Data schema support: translate data from many
sources into a consistent format
multitouch, can be used in the tablet development;



igLoader:

Minifies the amount of the jscript to load.
You can load only that you need.

If you are interested to try the product, go to http://www.infragistics.com/downloads/default.aspx
and download:
NetAdvantage Reporting 2012 Vol. 1 Product And Samples

HTML5/jQuery Webinar Week: HTML5&jQuery - the Fundamentals. HTML5 Cheat Sheet

Infragistics organized HTML5/jQuery Webinar Week on 06/19-06/21.
http://www.infragistics.com/resources/webinars.aspx

Here are quick notes on the June 19, 2012 - Getting Started with HTML5 / jQuery webinar.
It's been announced that all demo materials are posted on jQuery & HTML5 Fundamentals Webinar Followup

What's HTML5 anyway?


HTML5 is "to be standard-based" and plug-in free web experience:
- html tags;
- JavaScript API's
- CSS (CSS3)

HTML5 should be standardized , but still it's in a draft version in W3C


So that means, Not every HTML5 tag is supported by every browser.

The standardization of HTML5 is driven by Microsoft, Apple, Google, which is a really good sign to make it a widespread technology.

Competitors:
 - Adobe Flash;
 - Microsoft Silverlight

HTML4 vs HTML5

Generic tags replaced with semantic tags

<object> = <video>
<div> = <footer>
<span> = <nav>

HTML5 Cheat Sheet tags is a great info  to have when you are coding in HTML5.
You want to escape old tags of old HTML, since they are depreciated.

HTML5 Cheat Sheet By InMotion Hosting - A Dedicated Server Provider

HTML5 Canvas Cheat Sheet

It's claimed that HTML5 is SEO friendly.
Here is a good attitude toward this claim in Is HTML5 Good for SEO?

Syntax of HTML5 controls visual attribute of the elements, has a syntax of animation similar to Silverlight

A few Javascript enhancement in HTML5:
 - Geo location
 -  Local storage - like isolated storage in .Net

jQuery - an open source js library,
VS suppports jQuery intellisense. VS2010\2012 shipped jQuery by default.

jQuery libraries: UI, Core and Mobile

jQuery can :
-Get\Post;
-call WebServices;
- work with oData

UI jQuery library can be downloaded with specific theme via ThemeRoller on jqueryui.com

One of the basics in the jQuery - use of selectors ("$").
You can select element by:
 - controlid  - $("controlid");
-  element type and if necessary select the specific id in those preselected elements - $("element"#"id")

And as a last note on  new element <video> :
<video>
<source 1>
<source 2>
</video>
Since not all codecs are supported by every browser , you can specify multiple elements of <source> to cover major browsers. It will check the right encoded video for the specific browser.

HTML5, here I come!

Asp:Hyperlink : javascript: window.open and Target=_Blank

The forgotten basic of web development: "To open link in the new window do I need to use Target element in asp:hyperlink or should I use JavaScript ?"

Page1.aspx

<asp:HyperLink runat="server" ID="l1" Text="l1" Target="_blank"/>
 <asp:HyperLink runat="server" ID="l2" Text="l1" Target="_blank"/>
The result: Click on the first link will open the new window. Click on the second link  will open the url  in the previous opened window.

Page2.aspx

 <asp:HyperLink runat="server" ID="l1" Text="l1" onclick="javascript:window.open(this.href);return false;"/>
 <asp:HyperLink runat="server" ID="l2" Text="l1" onclick="javascript:window.open(this.href);return false;"/>
The result: Click on the first link will open a new window. Click on the second link will open the second new window. Every click will open a new window.

 P.S.

     One more basic -  Why we need set "return false;? - JavaScript Onclick Return False  - Anywhere you put an onclick event with a javascript call, if you add return false then the default behavior (what would have happened without the onclick event) will be disregarded.

   ...and don't forget to put ; in the end.

    

javascript: how to make Input non editable

Do you want dynamically set the input non-editable?
Here we go:

var setNonEditable=true;

var input =document.getElementById("InputId");

//#1 In this case - the value won't be save in the input field event it presents there

if(setNonEditable)

 {

    input .style.visibility = 'hidden';

 }

else

 {

   input .style.visibility = 'visible';

  }

//#2 The value will be saved even the input is not editable but value is in there

if(setNonEditable)

 {

   input .disabled = true;

 }

else

 {

     input .disabled = false;

  }

Happy easy coding!

Javascript refresh page: To display the webpage again, Internet Explorer needs to resend

To display the webpage again, Internet Explorer needs to resend
the information you've previously submitted

you can use
window.location=window.location; to refresh the page
instead of
location.reload(true);

Javascript refresh page explanation