Category Archives AngularJs

Top AngularJS UI Frameworks to Get Your App Up and Running Quickly Time to get started on building your own web application with AngularJS. AngularJS made building a Javascript-based app more intuitive using directives, which works hand-in-hand with your HTML markups. If you feel building a web application from scratch seems overwhelming to you, not to worry. Some very generous developers…

How to Use ngDraggable in AngularJS? ngDraggable is drag and drop module for AngularJS, provided support for touch devices.   Usage Referenced scripts in head tag. [crayon-5a354a0f7d8ea693095404/] In dependencies of application use ngDraggable [crayon-5a354a0f7d8f9712760083/] Add directive attributes ng-drag ng-drag-data ng-drag-success ng-center-anchor to your HTML: [crayon-5a354a0f7d8ff564733836/] Now add Drop area: [crayon-5a354a0f7d903325809632/] Then create a controller: [crayon-5a354a0f7d906863288475/] Below is an example using Jquery UI:…

How to Use Templates in AngularJS? In AngularJS, specific elements and their attributes are written as templates with HTML. To render the dynamic view template AngularJS combines the template with information from the model and controller that is displayed for users in a browser. Below are the types of Angular elements and attributes which can used: Directive — An attribute…

What is Angular Modal Service? Modal service for AngularJS is a module which supports creating popups and modals through a service. Usage Minified script referenced in head: [crayon-5a354a0f7e364991234906/] In dependencies of application use the modal service: [crayon-5a354a0f7e36d785705683/] Now inject the modal service into preferred controller or service or directive where you need to show modal. [crayon-5a354a0f7e371876379365/]   References https://github.com/dwmkerr/angular-modal-service http://dwmkerr.github.io/angular-modal-service/  

How to Use Cookies in AngularJS? AngularJS framework provides cookie module ngCookies. It also provides cookieStore object with get(), put() and remove() methods. This cookie feature is available in angular-cookies.min.js file. Below demo shows how to read and write cookie.

Using UI Bootstrap Tabs in AngularJS AngularJS UI-Bootstrap Tab is Native AngularJS (Angular) directives for Bootstrap. uib-tabset settings active (Default: Index of first tab) - Active index of tab. Setting this to an existing tab index will make that tab active. justified $ (Default: false) - Whether tabs fill the container and have a consistent width. template-url (Default: uib/template/tabs/tabset.html) -…

What is a Controller in AngularJS? In AngularJS, everything is associated with scope. Scopes are organized hierarchically. $rootScope object, the parent of all the scopes of the AngularJS application, and scopes are available created by directives. The scope hierarchy is consistent with the DOM tree hierarchy. A new scope is created whenever a scope-creating directive is encountered in the DOM tree. Instead of defining…

How to Bind data in AngulaJS? Two way data binding will be available when a model variable is bound to a HTML element which can display and change the value of the variable. Same variable can be bound to multiple HTML elements. We use ng-model directive to bind a model variable to one or more HTML elements, which can display and also update the value. In below example,…

UI Bootstrap Accordion in AngularJS The accordion directive is built on top of the collapse directive which provides a list of items, with collapsible bodies which are collapsed or expanded by clicking on header of item. Each accordion group's body is transcluded into the body of the collapsible element. Accordion heading Instead of using heading attribute on the uib-accordion-group, you can also use an…

How to Setup AngularJS Application? Let us observe actual parts of a AngularJS application before we start creating HelloWorld application using AngularJS. An AngularJS application consists of following three important parts − ng-app − This is a directive which defines and links an AngularJS application to HTML. ng-model − This is a directive which binds the values of AngularJS application data…

Close