Getting Started

Standard

What is AngularJs  ?

AngularJS is an open-source structural framework for dynamic web application. It lets you use HTML as your template language and lets you extend HTML’s syntax to express your application’s components. Angular is a perfect to create SPAs (Single Page Applications), which consist of one HTML page with CSS, and JavaScript on the client side. Its goal is to simplify both development and testing of web applications by providing client-side model–view–controller (MVC).

AngularJS works by first reading the HTML page(template), which has embedded into it additional custom tag attributes. Those attributes are interpreted as directives telling angular to bind input or output parts of the page to a model that is represented by standard JavaScript variables. The values of those JavaScript variables can be manually set within the code, or retrieved from static or dynamic JSON resources.

AngularJs vs jQuery

One of the most commonly question comes in mind that why AngularJs when coming from a jQuery background like me. What is the advantage of AngularJS over jQuery ? .

I am trying to explain it here.

– jQuery is a javascript libery where as AngularJS is a framework.

– jQuery is an imperative wrapper around DOM manipulation, not a tool for building web apps where as AngularJS is a declarative programming JavaScript framework used for development of rich user interfaces and writing components.

– jQuery, library for the dom, tell it what do, looking on html isn’t enough where as AngularJS, framework to build applications, we extend it after it’s law and principles.

– jQuery is Tight coupling(Our JavaScript is written to specifically correspond to our HTML. Such high cohesion often necessitates a lot more work on our part to keep our JavaScript in sync with our HTML), Code disorganization(no clearly organization for our web app functionality; it’s up to us to determine how we’ll organize it).
When we write Angular apps, we don’t separate how we write our page and our interaction; instead, we define the functionality inside our HTML. Angular very clearly lays out a strategy of building applications using the data to drive the functionality.

– AngularJS is built in lots of cool features like Routing (handling updates to the URL hash fragment), Templating ( dynamically creating and updating HTML based on templates and models ) , Data binding ( synchronize the model and user interface ) and many more.

Main Features of Angular JS

Main features of Angular JS are given below:

1) Controller

It is the business logic behind views. The Controller is responsible for construction of the model and connects it to the view (HTML). And is responsible for setting initial state and augmenting $scope with methods to control behavior. The scope be seated between the controller and the view. Controllers should be frank and simply contain the business logic wanted for a view.

2) Model

It is the data shown to the user in the view and with which the user interacts. The model is simply the data in the application or a JavaScript object.

3) View

The View is grounded on DOM objects, not on strings. The view is the HTML. HTML is declarative – well suited for UI design. The View might not contain any functional behavior. The flexibility here is to allow for multiple views per Controller. This division creates a solid base to architect your application. The $scope has a reference to the data, the controller defines behavior, and the view handles the layout and handing off collaboration to the controller to respond accordingly.

4) Services

The Services in AngularJS are singletons that accomplish common tasks for web applications. If you want to share common functionality between Controllers, then use Services. Built-in AngularJS, Services start with a $. There are several ways to build a service: Service API, $provide API, or the Factory API.

5) Data Binding

Data Binding in AngularJS is a two-way binding between the View and the Model. Automatic synchronizing between views and data models makes this easy (and straightforward) to use. Updating the model is imitated in View without any explicit JavaScript code to bind them together, or to add event listeners to reflect data changes.

Two-way binding in AngularJS

data.jpg

6) Directives

Directives are my personal favorite feature of AngularJS .It permits you to use Directives to transform the DOM or to make new behavior. A directive allows you to extend the HTML vocabulary in a declarative fashion. The ‘ng’ prefix stands for built-in AngularJS directives. The Model (ng-model), the Controller (ng-controller), App (ng-app), etc. are built into the framework. AngularJS allows for building your own directives. Building directives is not difficult, but not easy either. There are different things that can be done with them. It is also probably the most challenging aspect of AngularJS

7) Validation

AngularJS has several built in validation around HTML5 input variables (text, number, radio, checkbox, URL, email) and some directives (required, pattern, min, max, minlength, maxlength). If you need to generate your own validation, it is just as simple as creating a directive to make your validation.

8) Reusable Components

Angular JS uses directives to create reusable code so hide CSS, DOM and its behavior, so you can focus on your look and feel of your application.

9) Localization

This feature allows to Angular JS to multiple locales with the help of stemming and directive.

10) Embeddable

You can embed Angular JS in your application little or more as per your requirements. It does not require complete framework to work with Angular JS. Angular JS is capable to run multiple apps without iframe, you can view source control and can also look around it.

11) Injectable

This does not require any Main() method or start up, you can start from anywhere as per your esteemed requirements. If you don’t need feature or need to reduce can perform seamlessly with Angular JS.

12) Testable

It is designed from starting to test up across the network. It supports fully behavior-view separation and pre bundled with mocks , moreover it comes under end-to-end scenarios which helps to understand its core part.

Advertisements

Maximum colspan a TD can take

Standard

We often user “colspan”  attribute to  defines the number of columns a cell should span according to our requirement.

But is there any limitation to this ? What should be the Maximum number columns a cell can merge ?

The answer is yes . You can give Maximum “colspan” to a td is 1000. If the colspan > 1000 , it will take it as 1(one).

Now obviously there will be question that is there any situation where you can use a huge colspan >1000.

Yes there may be situation where you need more than 1000 colspan for your application. Like my client have a requirement to create a program schedule table for whole day, and the table heading should be 30 min each( ex 12:00 am, 12:30 am, 1:00 am … and so on). Now i have to fetch all the program from the database and show them in the table. The duration of a program is dynamically fetched which need to show in the table. So i converted the program duration to minutes and plotted them by adding colspan attribute to the td, as each td is 1 mins. Lets say one program runs whole day, means 24*60 = 1440 colspan.  But it is rendering in the browser as colspan=”1″.

Then i found that you can give maximum colspan to a “td” is 1000.

So here is my solution to over come this situation.

Make a check if your colspan count is greater than 1000. Then create two “td” instead of one.

if ( colspan_count > 1000 )

            <td colspan=”1000″ ></td>

           <td colspan=”colspan_count – 1000″></td>

 

Hope this will help for some one.