Namaste UI
AngularJS scopes is a special object which joins controller with views. $scope object access model data in controller as it is the first argument to controller. $scope is specifically for controller so it can inherit its parent controller also. Basically, scope is an object which refers to the application model i.e. an execution context for […]
3 concepts in which KnockoutJS is build upon is:– Through observables dom elements and ViewModel exchange information– Bindings between UI and ViewModel– Templating web applications To make it observable declare as:this.property = ko.observable(‘value’); Let’s try below Observables example: <!DOCTYPE html> <head> <title>KnockoutJS – Observables</title> <script type=”text/javascript” src=”http://ajax.aspnetcdn.com/ajax/knockout/knockout-3.1.0.js”></script> </head> <body> <!– This is input box, used […]
Now a days everyone use a single page application i.e. all necessary information are gathered into a single page and KnockoutJS is no exception of this which uses MVVM Application Framework. This is a client side framework which very easily bind html to domain data with MVVM pattern. MVVM is an architectural design pattern for […]
For internationalization AngularJS uses three types of filters i.e. currency, date and numbers. We need to incorporate corresponding js depends on locale of the country. <script src=”https://code.angularjs.org/1.2.5/i18n/angular-locale_da-dk.js”></script>
To bind application data to attributes of HTML DOM Elements directives are used: ng-disabled, ng-show, ng-hide, ng-click. HTML DOM Elements directives: ng-disabled:It is used for disabling a given control. <input type=”checkbox” ng-model=”enableDisable”>Disable <button ng-disabled=”enableDisable”>Click Me</button> ng-show:It is used for showing a given control. <input type=”checkbox” ng-model=”showHide”>Show <button ng-show=”showHide”>Click Me</button> ng-hide:It is used for hiding a […]
In this tutorial you will get the basic knowledge of KnockoutJS and how to use on programming. Basically it is a JavaScript library based on MVVM pattern i.e. Model-View-View-Model by which developer build rich and responsive websites. It separates the application model, view and view model. It supports most of browsers i.e. Firefox 3.5+, IE […]
SlidesJS is a jQuery responsive slideshow plug-in for version 1.7.1+ with various features like responsive, CSS3 transition. It has the following features: Responsive CSS3 transitions Touch effect Easy setup Options width (number) & height (number) start (number) navigation (object) pagination (object) play (object) effect (object) callback (function) Here is a simple example: <!doctype html> <head> […]
In AngularJS, To bind application data to html expressions are used. It is written inside of double braces like {{expression}}. It uses same way as ng-bind. Following example will show all the expressions of AngularJS: <html> <title>My AngularJS Expressions</title> <body> <h1>AngularJS Expressions</h1> <div ng-app=”” ng-init=”quantity=2;cost=10; colleague={firstname:’Tim’,lastname:’Ererld’,salary:25000};Points=[10,20,30,40,50]”> <p>Welcome {{colleague.firstname + ” ” + colleague.lastname}}!</p> <p>Price(Rs) : […]
To extend html, AngularJS directives are used. Now We will discuss following directives: List of directives: ng-app : Directives of AngularJS that defines and links an AngularJS application to HTML. It defines the root element. <div ng-app=””> … </div> ng-init : To initializes application data. It is used to define values to the variables which […]
You can embed external HTML pages into AngularJS. The most common way, is to use an ajax request to fetch data from the server, and then put the data to the innerHTML of an HTML element. Basically, ng-include fetches then compiles and includes an external HTML fragment. <ng-include src=”string” [onload=”string”] [autoscroll=”string”]> …</ng-include> Directive Info:– This […]