Create a new AngulaJS controller

Controllers are the heart and most important component of an AngularJS Application. AngularJS controllers are not always clearly defined in some JavaScript client side frameworks, and that tends to confuse programmers who have good experience in MVC. So this never happens with AngulaJS, AngularJS always defines controllers.

Everything in an AngularJS application passes through a controller. Dependency injection is used to add the needed dependencies. See given example.

This tells how to create a new controller:

/* Comment */

Screen Shot 2016-05-03 at 2.13.47 AM

  • In above code first I created a new model : addonsController (Using call to module method of angulaJS)
  • Then I created a new controller: addonsCtrl (By Calling the controller of above module)
  • So we created all controllers which will be added in addonsControllers module.
  • Here we have used JSON.stringify method. This line log the JSON that’s returned from the web service to the JavaScript console. We can simply access the JS console to troubleshoot REST service issue by seeing the JSON logged in success call back function.

This controller plays an important role in the Application. It represents many dependencies. It also has some primary responsibilities, which will explore in next article.

So this is the simple method by which we can create a new controller in AngularJS.

Which one is the Best, Python OR PHP ?

We read Java, .Net, HTML5 and many other programming languages a lot; now let’s work with PHP and Python. I don’t know more about both, Just started my Reading. Sharing my first Study with you, find out which one is suitable for you OR which one is better for you.
Both languages have different purposes and history, and it is not fair to compare. I am writing the things I like about both of them.

Python:

·         Syntax and standard library: I LOVE the readability of Python syntax. The standard Python library ships with a great set of tools and utilities.
·         General purpose: Python can be run on the servers, to build applications and in many other places.
·         Elegant: Python has an elegant language design which makes it much easier to write great code.
·         Unicode support: Python has great support for Unicode.
·         Modular and definitive: Python is less quirky compared to PHP.
PHP:

·         Forgiving: PHP is one of the most ‘freeform’ languages I have used, probably comparable only to Javascript.
·         Easier learning curve: You can quickly start coding in PHP with a basic understanding or experience of programming. This was the main purpose PHP was created to serve. This also helps in faster development.
·         Hobbyist-compliant: The code doesn’t need to be elegant for it to work. I think this is the biggest reason for it to have become the most popular web development language. You can cook up some code in a hurry, and it works.
·         Open source and communities: There is a huge community and open source projects that use PHP. Makes it easy to get support if you run into a roadblock.
·         De-facto language for the web: Majority of the popular web frameworks (WordPress, Drupal, Joomla, Zend, CodeIgniter, OSCommerce) are built on PHP. Which also makes it very easy to find a web developer who knows PHP.
·         Hosting support: Because of popularity, PHP hosting is supported by almost every provider out there.
·         PHP 5 is actually a huge improvement over the versions before in terms of language design etc.
And my Conclusion says PHP is relatively easier to learn, especially for someone who is not a good programmer. For web development, PHP has many more libraries – the community is (probably) larger. Anything you want to do in the area of web development, there is a good chance that there will be an existing library for it in PHP. For anything new in the area of web development, the first library will show up in PHP and the others (Ruby, Python, Java) will follow later.
(Via Net Solution India)


A Developer Says: “I was a PHP dev for 7 years and now Ruby for 2 and I still say: PYTHON
And My suggestion is if you are from JAVA background please go with Python, otherwise PHP will make you nerdrage.
So After Reading above Points I love Python but fresher will choose PHP, Simple and Smiley Easier.

Keep Reading, Keep Writing , Keep Developing, 
   

Best framework for creating mobile applications with HTML, CSS, and JavaScript…

Let’s assume you are trying to create a location-based mobile application for Android. What framework will you prefer? Phonegap… ???
OR any better option?
As per my study, we can use PhoneGap to wrap HTML/CSS/JS mobile web apps to create native apps for iOS, Android, Blackberry, etc. There are many other Frameworks, Tools, and Libraries for Creating Mobile Applications. And from My experience I would be very careful with HTML Mobile Framework. They tend to be heavy and require lot of CSS/HTML elements.
I will suggest to use jQuery and target webkit (iOS and Android) and try to optimize your DOM and UI component as much as possible. Then, you can degrade for other browsers.

If you are building an offline application, you can use a MVC. Anyway, the rule is that the less framework you use the better you are. So, pick carefully, and make sure they are not kitchen sink.

And here is the List of Top 10 Frameworks To Build Mobile Application With HTML, CSS & JavaScript: 

1. JQuery Mobile
jQueryMobile is a robust mobile development framework to build cross-mobile-platform app. 

2. Cordova / PhoneGap
PhoneGap is essentially based on Cordova. Cordova/Phonegap provides a set JavaScript APIs that connect to the device’s native functions such as Camera, Compass, Contacts, and Geolocation. Cordova/Phonegap lets us build a mobile application without the native programming language; instead we can use a framework like jQuery Mobile. 

3. Sencha Touch
Sencha Touch is a mobile framework powered by HTML5 and CSS3, providing APIs, animations, and components that are compatible with the current mobile platforms and browsers. 

4. Ratchet
Ratchet was originally used by Twitter as an internal tool to create their mobile app prototype which is then released publicly as an open source project. 

5. Ionic
If you are concerned with your app performance, Ionic is the right framework for you. Ionic is an HTML5 mobile framework with focus on performance, by leveraging hardware acceleration, and it requires no third-party JS library. 

6. Lungo
Lungo is a lightweight mobile framework based on HTML5 and CSS3. 

7. JQT
jQT is a Zepto plugin for mobile framework primarily designed for Webkit browsers. 

8. Junior
Junior is also a Zepto plugin for building a mobile app similar to jQT. 

9. Jo
Jo supports a wide variety of mobile platforms including Tizen and Chrome OS. Jo also comes with a starter, that is powered by CSS3, so it makes it easy for web developers at any level of experience to grasp and start styling their apps. 

10. Famo.Us
A new kid on the mobile framework block, Famo.us
 promises to eliminate HTML5 performance issue on mobile devices with its lightweight JavaScript engine (only 64k). 

Recommended CMS for a static HTML5 blog

Normally I use WordPress for blogging but I don’t like it very much. I would prefer making my blog static offline, then deploy to Amazon S3 or any other platform to distribute my blog.  But I am not good in coding, so I am finding some cool CMS for my HTML5 website.
I googled many times, I read many Books then find some solutions. They are all similar, simple and flexible. Once you’ve understood the basics, they all kill wordpress for what you want to do. It will help enormously to understand a minimal amount of code. You need to get past the initial stage of everything looking like moon language though. Once you’re there, it’s a hell of a lot faster to go from install to something that matches what you envisaged. Everything ends up a lot cleaner as well.
Here are different Solutions with different technologies:

PHP:  Staceyapp.com  is a good platform for PHP users. Stacey is a lightweight content management system. No database setup or installation files, simply drop the application on a server and it runs. Your content is managed by creating folders and editing text files. No login screens, no admin interface.
It provides a good, simple structure. Kirby is also good, but it costs a minimal fee for the license. Because you’ll be generating a static site locally, you lose the great benefit PHP has over Ruby, Python, JS etc (easy deployment on basic hosting).
Node: Docpad.org is excellent, good set of plugins as well.  DocPad removes limitations and closes the gap between experts and beginners. Designers and developers can create websites faster than ever before. Harp markets itself as a web server that processes whatever you chuck at it and turns it into HTML/CSS/etc. It does the same as the above, and does it well. Winter smith has been getting some good press, but I haven’t used it.
Ruby: Jekyll.com is the most popular, and has a huge ecosystem. You have to remember that it’s just a parsing engine. The core of it doesn’t come with anything resembling a blogging engine or templates, you need to make them. That said, everything you’re likely need is available as plugins. Octopress is a fork of Jekyll built to quickly generate blogs. Middleman is more complete out-of-the-box than Jekyll, smaller and more focussed, but it’s great.
Above is the list of Static Site Generators. Ordering by stars will give you the most joy. You also want projects under constant maintainance, so check how long they’ve existed, and when the last update was.

You can use more Top Open-Source Static Site Generators like: Middleman, Hugo, Metalsmith, Roots, Hyde… Etc.

How to use CSS in a HTML document

We are much aware what is CSS, and it’s uses in previous blogs, Now Let’s try to understand How to use CSS or Style sheet in a HTML document. CSS present the good presentation in a document and Web page or App.
We can use Style sheet using three methods:
·        We can use an external style sheet, either by importing it or by linking to it.(External Style Sheet)
·        Directly embed a document-wide style in the head element of the document. (Document – Wide Style)
·        Set an inline style rule using the style attribute directly on an element. (Inline Style)
Each of these style sheet approaches has its own pros and cons, as listed below:

   Now let’s some work using all three method

1.       External Style Sheet: An external style sheet is simply a plain text file containing CSS style   
Rules. The common file extension .css indicates that the document provides style sheet information. As an example, the following CSS rules can be found in a file called sitestyle.css, which defines a style sheet used site-wide:
After above sheet we will work with HTML doc…
So now we are done with both files Let’s see the Output:
CSS is, at least theoretically, not the only style technology we could use, though as it stands, by default, most browsers assume that CSS is being used. We set type to be specific but that may get a bit redundant. The HTML specification suggests you can set a default style sheet language in the head element of the document by using the <meta> tag, as
shown here,
<meta http-equiv=”Content-Style-Type” content=”text/css”>
by outputting this value in the HTTP headers delivered to a site. Interestingly, many sites
set the <meta> tag and use the type attribute, which is particularly appropriate as of this
edition’s publication as the specification dictates that the type attribute must be set and
thus the W3C validator will complain if the attribute is not set regardless of the appearance
of the <meta> tag.
2.      Embedding Style Sheets: The second way to include a style sheet is to embed it. When you embed a style sheet, you generally write the style rules directly within the document with a <style> tag found within the <head> </head> of the document.
The basic syntax of the <style> tag is as follows:
<style type=”text/css” media=”all | print | screen” >
* Style Rules….*
</style>
Now let’s do an Example:



You can have multiple occurrences of the style element within the head of the document, and you can even import some styles with these elements.
OutPut for the above code:

While this technique is common practice and used for script masking as well, there are some subtle issues, particularly when including non-comment-friendly content like multiple dashes or trying to address XML strictness. (McGraw-Hill CSS)
3.      Inline Styles:  Instead of using a style sheet for a whole page, you can add style information directly within a single element. Suppose you want to set one particular <h1> tag to render in extra-large, green, Arial font. You could quickly apply the style to only the tag in question using its style attribute, which is a core attribute common to nearly any HTML element.
As an example, the following markup shows an inline style applied to a heading:
<h1 style=”font-size: xx-large; font-family: Arial; color: green;”>
This sort of style information doesn’t need to be hidden from a browser that isn’t style sheet-aware, because browsers ignore any attributes that they don’t understand.
Although using inline styles seems to be an easy route to using CSS, it does have a number of drawbacks. The largest problem is that inline rules are bound very closely to a tag. If you want to affect more than one <h1> tag, you have to copy and paste the style attribute into every other heading of interest. The separation of markup from CSS presentation is not optimal with an inline style. However, for quick and dirty application of CSS rules, this might be appropriate, particularly for testing things out.
The second and lesser-known concern with inline CSS rules is that you simply cannot perform every task with them. For example, if you want to change the look of various link states, this is easily accomplished in a document-wide or linked style sheet with pseudo-class rules like
a:link {color: blue; text-decoration: none;}
a:visited {color: red; text-decoration: none;}
a:hover {color: red; text-decoration: underline;}
a:active {color: red; text-decoration: none;}
However, if you attempt to put such rules in an <a> tag, how are other states indicated? The simple example here would appear to set the color to blue for any state:
<a href=”http://www.w3.org” style=”color: blue;”>Inline Link Styles?</a>
Similarly, in order to change the first letter of a paragraph to large, red text, you might use a pseudo-element rule like
 p:first-letter {color: red; font-size: xx-large;}
However, when you attempt to do this inline, you are forced to introduce an element to hold the first letter:
<p><span style=”color: red; font-size: xx-large;”>T</span>his is a test.</p>
While these examples indicate why these selectors were given the names pseudo-class and pseudo-element, they don’t really show us how to use such inline styles.
<a href=”http://www.w3.org/”
style=”{text-decoration: none;}
:link {color: blue;}
:visited {color: red;}
:hover {color: red; text-decoration: underline;}
:active {color: red;}”>Inline Link Styles?</a>
To set the first letter on paragraphs, we would use:
<p style=”{text-indent: 1em;
text-align: justify;
line-height: 150%;}
:first-letter {color: red; font-size: xx-large;}”>
This is the set of <p></p>
The emerging specification even suggested the importation of style sheets directly inline:
<div id=”navbar” style=”@import url(navigationstyles.css);”>just an example</div>
While all these ideas are quite interesting, more than seven years after the working draft was authored, not a single browser supports this syntax at the time this edition is being completed. So, besides being too closely bound to tags, understand that unless this situation has changed by the time you read this edition, only using inline styles is going to limit your application of some of the more useful CSS selectors. (Reference McGrill CSS)
These were some methods for using CSS, there are many other methods for using CSS but includes above three parent methods.  So for more Stay tune for next blogs mean while keep doing your coding work with different examples.
Do more exercises and ping back your problems.

Let’s know about CSS Error Handling

Sorry writing this blog after very long time, Yet this is not my original I was reading about Error handling in google and find some important points, which are presented here, We know the use of syntactically correct markup is certainly not encouraged by permissive browser parsers that correct mistakes or guess intent when faced with malformed markup. The situation for CSS is a bit better, and the CSS 2.1 specification does describe what browsers should do in the case of various errors, but then again, making the assumption that browsers are not permissive and correctly implement all aspects of Web specifications is dangerous.
Unknown Properties
If an unknown property is encountered, a CSS-conforming user agent should ignore the declaration. Given
h1 {color: red; trouble: right-here;}
the property trouble would simply be ignored and the rule would simply set the color. It does not matter what the position of the bogus property declaration is, the result should be the same as long as the declaration is otherwise well formed.
h1 {trouble: right-here; color: red;}
The case is obviously different if the various separators are missing.
Malformed Rules
In the case where semicolons (;), colons (:), quotes (‘or”), or curly braces ( { } ) are misused, a browser should try to handle any unexpected characters and read the properties until a matching value can be found. As an example, consider the simple case of forgetting a semicolon:
h1 {color: red text-decoration: underline; font-style: italic;}
In this case, we should see the browser continue to parse the value of color as “red text decoration: underline” before it sees a closing semicolon. The font-style property that follows would then be used. Because the color property has an illegal value, it should be ignored.
Other cases are a bit more obvious. For example, here we see the colon missing in a style rule declaration:
h1 {color red; text-decoration: underline; font-style: italic;}
In this case, the color property is simply ignored and the text is underlined and italic.
The situation for quotes and braces is the same, with compliant browsers working to find a matching closing character for any open construct, potentially destroying anything in between. Consider this set of rules, where quite a large amount of style may be lost:
h1 {color: green; font-family: “Super Font;}
h2 {color: orange;}
h3 {color: blue; font-family: “Duper Font”;}
Be careful, though, because in this case you might assume that the rule closes off with a quote, but that may introduce more open construct errors later on in the style sheet.
Unclosed Structures and End of File :
A CSS browser should close all braces and quotes when it reaches the end of a style sheet. While quite permissive, this would suggest that
<style type=”text/css”>
h1 {color: green
</style>
should render properly, as the open rule would be closed automatically by the end of the style sheet. Open quotes would also be closed in a similar manner when the end of the style sheet is reached. Testing reveals this action is actually the case in browsers, but creating a syntactically correct style sheet is obviously far superior than understanding the expected failures of a conformant browser.
Illegal or Unknown Property Values
CSS-conforming browsers must ignore a declaration with an illegal value. For example,
h1 {font-size: microscopic; color: red;}
would simply not set the font-size value but h1 elements would be red. Usage of illegal characters can turn what would appear to be a correct value into an incorrect one. For example,
h1 {color: green;}
is incorrect not because green is an illegal color, but because it is not the same as the keyword green when it is quoted.
Do not assume that a CSS-compliant browser will fix such small oversights. For example, a browser given
h1 {color: green forest;}
should not use green but instead ignore the whole rule. Of course, what browser vendors actually do in the face of malformed Web documents varies.
Incorrect @ Keywords and Media Values:
When an @ media value or media type for a <style> tag is used, incorrect values should be ignored. For example, if you specify <style type=”text/css” media=”tri-corder”>, the browser is supposed to ignore the entire <style> block unless it understands such an odd type. Media types will be discussed in depth later, but for now understand that when faced with syntax problems, a CSS-compliant browser should simply ignore anything related to misunderstood values.
Ignoring Network Failures
When style sheets are linked rather than placed within the page, the browser must apply all
types it is able to fetch and simply ignore those it can’t. So if you had
<link rel=”stylesheet” href=”global.css” type=”text/css”>
<link rel=”stylesheet” href=”pagelevel.css” type=”text/css”>

and the first was fetched by the browser, but the second failed, it would simply apply the rules it had. Obviously, such transitory errors are hard to account for, but other considerations presented in this section should have been caught in the validation of markup and style, discussed next.

Let’s work with JavaScript Events

As we discussed in previous blog (Basics of  Events in JavaScript) about some event names, There are some many other events are in JavaScript ,
Some Events are used with Media Elements in HTML: 
  • ·         onabort
  • ·         oncanplay
  • ·         oncalplaythrough
  • ·         ondurationchange
  • ·         onended
  • ·         onerror
  • ·         onlodeddata
  • ·         onloadedmetadata
  • ·         onloadstart
  • ·         onpause
  • ·         onplay
  • ·         onplaying
  • ·         onprogress
  • ·         onratechange
  • ·         onreadystatechange
  • ·         onseeked
  • ·         onseeking
  • ·         onstalled
  • ·         onsuspended
  • ·         ontimeupdate
  • ·         onvalumechange
  • ·         onwaiting

Some Events which are very important for our Browser:
  • ·         onafterprint
  • ·         onbeforeprint
  • ·         onbeforeload
  • ·         onblur
  • ·         onerror
  • ·         onfocus
  • ·         onhaschange
  • ·         onload
  • ·         onmessage
  • ·         onoffline
  • ·         ononline
  • ·         onpagehide
  • ·         onpageshow
  • ·         onpopstate
  • ·         onredo
  • ·         onresize
  • ·         onstorage
  • ·         onundo
  • ·         onunload

So these are some important events which are used in JavaScript for making a webpage more interactive.
Now Let’s do some live work with these events, Yet we can’t discuss all events but some important event can be discussed.

onload   Event:  The online event triggers when a Website loads in a browser. This event is defined in the BODY element. Let’s write some HTML code

Here we have defined the onload event in the BODY element, which displays an alert box showing the text, Welcome to My World!, when a web page loads. The output for the above code will be:





So this was a little bit about the onload Event, do some more Exercise from yourself and put the problems.




onsubmit  Event:  The onsubmit event is used with the FORM element and triggered  when the form is submitted. Let’s create a form and understand the onsubmit event, HTML code :


The above code is for FORM, here we added some fields like Name, Phone, Address, Email id. Next we have defined the onsubmit event in the FORM element, which displays the some message.
After filling this form when we click on submit button then alert box appears and shows the Text message:





So these are the examples of JavaScript Events.

Note : Now do exercise from yourself and put the question in Comment.
 

Basics of Events in JavaScript

Events refer to the actions that are detected by a programming language when you perform a particular task.
Example: the onclick event detected by the programming language when you click the mouse button.
Events are generally used in combination with the function, implying that when an event occurs, it calls a specified function. An event commonly occurs when a user clicks the mouse button , web page is loaded, or from field is changed. Events are handled by a special function, known as event handler, which handles a particular event when the event is triggered.
How to Create an Event handler  :
In the above code OnEvent  refers to the name of an event  followed by an equal sign and the code that executes when the event is triggered.
Let’s do some Exercise :
Working with onclick Event :
The onclick event triggers when you click a particular control, such as button control. Let’s create a webpage to understand the onclick event  :
 Here we defined the onclick event that occurs when we click on ‘Click me ‘ button.
See Output.
Here this alert box appears because of onclick  event and this event occurs when we hit on ‘Click me’ button.
So this is a basic concept of Event,. There are so many Events which are used in JavaScript with HTML. Like some JavaScript  events used in HTML forms are given below :
Some Keyboard Events which are used in HTML:
·         onkeydown
·         onkeypass
·         onkeyup
Some JavaScript mouse events used in HTML
·         onclick
·         ondblclick
·         ondrag*
·         ondragend*
·         ondragenter*
·         ondragleave*
·         ondragover*
·         ondragstart*
·         ondrop
·         onmousedown
·         onmousemove
·         onmouseout
·         onmouseover
·         onmouseup
·         onmousewheel*
·         onscroll*

      *New in HTML5

Etc there are many other Events in JavaScript Which are used in Media elements of HTML and browser. Try with these events yourself. I will discuss these and many other events with working in my Next Post.

  I

  

Calling Function with Timer in JavaScript

In JavaScript timer is the most important feature, it allows us to execute JavaScript function after a specified period; thereby, making it possible to add a new dimensions, time, to our website. With the help of timer , we can run a command at the specified intervals, run loops repeatedly at a predefined time, and synchronize multiple events in a particular time span.

There are various methods for using it:


           1.      The setTimeout() method:  Executes code at a specified interval. Syntax for this : 
                                                           setTimeout(function, delayTime)
In the above syntax the setTimeout() method contains two parameters – function and delayTime. The function parameter specifies the method that the timer calls and the delayTime parameter specifies the number of milliseconds to wait before calling the method.

Example :Let’s try with an example, this method is useful when we want to delay the execution of a particular code.  Let’s write a code :

The setTimeout(“alert(‘Hi, Welcome! Ankur Here.’)”, 5000) method is used to create a timed alert box. The first parameter of the setTimeout() method is a string that contains a JavaScript statement, alert(‘Hi, Welcome! Ankur Here.’), and 2ndparameter , 5000 , specifies the time in milliseconds after which the first parameter will esecute.
So output of this code will be:



      2.      The clearTimeout() method:  Deactivates or cancels the timer that is set using the setTime() method.    Syntax for this :
clearTimeout(timer)

in the above syntax , timer is a variable that is created using the setTimeout() method.
      3.      The setInterval() method : Executes a function after specified time interval. The syntax for this :
setInterval(function, intervalTime)

In above syntax the setInterval() is the method contains two parameters- function and intervalTime. The function parameters specifies the method to be called; whereas, the intervalTime parameter specifies the time interval between the function calls.
Example :Let’s try with an example, this method is used to execute the code after every specified time intervals.  Let’s write a code:




In given code the setInterval() method is used to create a timer that calls the alert() method repeatedly. In the setInterval() method, the first parameter is a string that contains a JavScript statement, alert(‘Sorry ! 1 seconds.’). The second parameter specifies the time in milliseconds, 1000, after which the first parameter is displayed.

So the Output of this code will be :

      4.      The clearInterval() method: Deactivates or cancels the timer that is set using the setInterval() method.     The syntax for this :
clearInterval(timer)
The preceding syntax deactivates the inner timer variable that is created using the setInterval() method.

So Enjoy and work with Timer in JavaScript.

Function in JavaScript

All of us know function is a collection of statements that is executed when it is called at some point in a program. A function performs a specific task within a program independent of the rest code in the program. We can call the function from anywhere within a program. We can also define the parameters to be passed with function while calling the function. The parameters in a function are used to exchange information between a calling statement and function. We can define a function by using the function keyword.
Syntax for a function :

Above syntax has name of function, and parameters of a function.

JavaScript functions are divided into two categories:



Function without Parameters: Does not contain parameters. This code written in these function is static, implying that the values of members of these function cannot be changed at runtime.
Function with parameters:  Contains parameter in its parenthesis, such as integer and string. Unlike function without parameters, the values of members of these function can be changed at run time by passing different values of their parameters.

Now let’s understand the JavaScript function using a simple example:



We have created a function named simple under the head section.

The simple() function an alert message with Thank you.

The onload event handler under the BODY element calls simple() function when the document is loaded in the browser.
Output :