Various technical Articles to learn AngularJS with easy Examples

How to use restrict option in AngularJS Custom Directive?

Nibedita Panda — Sat, 03 Feb 2018 16:41:18 +0000

Among several advanced features of AngularJS, Directive is a major Chapter. Using Directive we can reuse our Codes like a widget. Directive comes with many Directive Definition Objects (DDO). From them restrict is one. Using restrict option inside a Custom Directive we can prevent the access level of Directive for Element(E), Attribute(A), Comment(M) or Class(C).

For an example if you want to use your Custom Directive only like a element in view () then while creating the Directive pass the restrict option E (restrict: “E”). Similarly if you want to restrict the use of directive like an Attribute then you can pass A in place of E or else if you want your directive to be used like an element or attribute you can pass AE together (restrict: “AE”).

To make your vision clear in below I am sharing an example using restrict option inside Custom Directives. In this demo app I created 3 Custom Directives. The first one is restricted to use like Element or Attribute. The second one “customColor” directive is restricted to use like Class and the third one “commentDirective” is a directive to use during Comments.

Notice Carefully, depending upon the restrict option, structure of each directive is different. The first on “elemAttrDirective” is restricted to use like an Element or Attribute. The cause it’s having template option. Using template here I am showing a line of text followed by H1 tag. Where in my second directive “customColor” I am finding the HTML Elements from DOM using link function and then applying CSS Style as this directive is restricted to use like a Class. Similarly in “commentDirective” I am using template and replace option to rewrite the Comment while using in view. Make a note while using a directive which is restricted to use in Comment block you have to put you directive name followed by “directive:”.

Using restrict option in AngularJS Custom Directive
















This is a Class based Custom Directive in AngularJS

The post How to use restrict option in AngularJS Custom Directive? appeared first on OneStop Shop.

Example to Call Webservice inside AngularJS Controller

Nibedita Panda — Sun, 15 May 2016 16:52:26 +0000

Webservice is nothing but the technique using which we can sale functionalities over web. Let’s talk about an Income Tax calculator. It is useful for many employees, organizations and banks. If we are developing the calculator repeatedly form different different organizations, it is nothing but the loss of productivity. How it is if we can use same service from a global space. This is what web service do. Webservice returns data in form of XML or JSON. In the below example look how to call Webservice inside AngularJS Controller.

booksController is the name of my Controller. Inside this I am executing $http.get() method. On Success which returns a response. To access response data from view I am assigning those data to $scope.data object. Inside html body using ng-repeat I am displaying authors name from Webservice.

Example-to-Call-Webservice.htm



Example to Call Webservice in AngularJS





{{bookDetails.author}}

The post Example to Call Webservice inside AngularJS Controller appeared first on OneStop Shop.

Angularjs $watch and Link Function Example to fetch value from View

Nibedita Panda — Sun, 15 May 2016 16:30:09 +0000

During you Create Dynamic Directives in AngularJS $watch method helps to Fetch value from View. In this example I am Creating a Dynamic Tab. The directive I named ng-tab. While declaring my directive in HTML body I am passing 2 things length and data. Data is nothing but the tab names in the shape of state and its cities. Now just you think how can we get these values in AngularJS Controller. The same $watch method do.

Look at my app.js file. In scope I am taking length & data as the key. Then in link function fetching those values using $watch method. The key thing you will notice the length is accepting ‘=’ when data is accepting ‘@’. This because of Data types. Generally for integer we take ‘=’ and ‘@’ for string characters.

Index.htm





Angularjs $watch and Link Function Example

my-tab.htm


{{ appDetails }}




{{ item }}




{{ item }}
Welcome to {{ item }}. Visit Us.
Cities :

app.js

/* ng-tab Module */
angular.module('tabModule', []).directive('ngTab', function() {
return {
restrict: 'E',
transclude: true,

scope: {
/* Accepting the number of Tab you want in your app */
"length": '=',
/* Accepting the data in JSON for Tab */
"data": '@'
},

link: function (scope, element) {
scope.$watch("length", function (arrlen) {
scope.$watch("data", function (value) {

var obj = JSON.parse(value);

var lenjson = obj.Country.length;

var arrTab = [];
var autoCompArray = [];

/* Assigning input JSON data to Array */
if (arrlen == lenjson) {
for(i=0; i<lenjson; i++) {
arrTab.push(obj.Country[i].state);
autoCompArray.push(obj.Country[i].cities)
}
} else {
alert('Please provide accurate data length.');
}

scope.tempArrTab = arrTab;
scope.tempCompArr = autoCompArray;
scope.appDetails = 'Create your own ng-tab using AngularJS';

}, false);

}, false);
},

controller: function($scope, $filter) {

$(function() {
$("#tabs").tabs();
});
},
templateUrl: 'my-tab.htm'
};
});

The post Angularjs $watch and Link Function Example to fetch value from View appeared first on OneStop Shop.

How to implement MVC Architecture in AngularJS?

Biswabhusan Panda — Sun, 15 May 2016 15:36:41 +0000

AngularJS was developed and maintained by Google. As a latest Technology AngularJS comes with many Advanced features. Depending upon its feature rich functionalities today it is one of the most popular JS Framework. It Supports MVVM, MVW and MVC Architecture. Among these Architectures MVC is the most popular one. Before Discuss more into MVC Architecture using AngularJS let us Start with what is design pattern. Design pattern is nothing but a structural approach to develop quality codes. Design pattern improves Code reuse-ability.

Model – Model is the layer using which we design data inside a Controller. In MVC Architecture model resides in lowest level. Let’s talk about an Employee Management System. Here we can Create various models like Employee Details, Manager Details or Salary Details. In side a controller we can create models depending upon our data requirement. Model not only helps to Organize data but also it is capable to handle business logics.

To represent model in view AngularJS provides $scope object. Any object assign to $scope it is accessible in view. Look at the below Example of model. Here I am storing some string value to a variable under $Scope object.

$scope.employees =  {
'Name':'Jimmy Jose',
'Address':'New Delhi, India',
'Email':'jimmy_jose@gmail.com'
}

Model was specially designed to plan structured data. Let’s take one more example where you want to show list of States depending upon the on change event of a Country dropdown. In this case while creating a data model we have to go like the below example.

$scope.countries =  {
'Country':'India',
'States': { 'Utar Pradesh', 'Andra Pradesh', 'Odhisha', 'Karnatak', 'New Delhi' }
}

View – View is nothing but what user watch. I mean the rendered HTML. AngularJS makes HTML enrich. In Controller AngularJS provides a $scope object. Which is responsible to inter-exchange data in between View and Controller. To display Controller data in view generally we use the following Syntax.

{{ variable from Controller }}

Controller – Controller is the unit which Controls application logic. Whether we do an operation in a variable or implement a function Controller handles all that. Controller receives input from view, validates it and performs business operations that modify the state of the data model. To create Controller in AngularJS we use the following Syntax.

CusFilterMod.controller('CusFilterCtrl', ['$scope', '$filter', function($scope, $filter)  ...... });

Example of MVC Architecture in AngularJS



Example to implement MVC Design Pattern using AngularJS




Displing model data in view through controller

{{ employees.Name }} 
{{ employees.Address }} 
{{ employees.Email }}

The post How to implement MVC Architecture in AngularJS? appeared first on OneStop Shop.

How to restrict AngularJS Search Filter to a Specific Column?

Biswabhusan Panda — Sun, 15 May 2016 15:29:37 +0000

Among many Advanced features of AngularJS Search Filter is One. Like JavaScript we don’t required to write a Search function. Simply by using the Keyword Filter with directives we can implement Search option in AngularJS.

Look at the below Example. Here I have JSON formatted data in employees object of $scope. For each employee record there are 5 columns name, dob, designation, gender & salary. What I want is when I will search using a input box I need to filer records depending upon employees names only.

To do so while binding data using ng-repeat I am using “employee in employees | filter:{name:search}”. By default filter keyword search all the columns from employees object. To restrict Search to specific column employee name here I am passing name:search as a param to filter option.

Example to restrict AngularJS Search Option




How to restrict AngularJS Search Filter to a specific column?






Search 






Name
Date
Designation
Gender
Salary



{{ employee.name | uppercase }}
{{ employee.dob | date:"MMM dd, yyyy" }}
{{ employee.designation }}
{{ employee.gender }}
{{ employee.salary | currency:"$":2 }}

Name	Date	Designation	Gender	Salary
{{ employee.name \| uppercase }}	{{ employee.dob \| date:"MMM dd, yyyy" }}	{{ employee.designation }}	{{ employee.gender }}	{{ employee.salary \| currency:"$":2 }}

The post How to restrict AngularJS Search Filter to a Specific Column? appeared first on OneStop Shop.

How to bind data to Select tag using AngularJS ng-options?

Biswabhusan Panda — Sun, 15 May 2016 15:28:08 +0000

While Developing a Web App, its a very common behavior to display list of values in a Select tag. Let’s discuss about an Employee Management System where many times we required to display employee names in a dropdownlist. Assume we have a JSON file which contains employee details & the application architecture is with AngularJS. Look at the below example here I am binding JSON formatted data from scope object using AngularJS ng-options.

To show list of employee names here I added for loop inside ng-options “emp.name for emp in empDetails”. Here empDetails is the object which holds JSON formatted data. Due to security reason outside the scope we can’t modify scope data directly. The reason I am cloning empDetails data to emp object inside ng-options. Then using embedded for loop binding emp.name.

Using AngularJS ng-options




How to bind data to Select Control using ng-options?

The post How to bind data to Select tag using AngularJS ng-options? appeared first on OneStop Shop.

AngularJS Form Validation (Required, Email, Number & Date) Examples

Nibedita Panda — Sun, 15 May 2016 14:41:02 +0000

In web technology validation is used to prevent spam entries. There are various kind of form fields validations. Some of them are Required field validation, email validation, date field validation or number validation. In this demo app I created these 4 AngularJS Form Validation (Required Field, Email, Number and Date).

In the below app I have 4 form fields Name, Email, Contact Number & Date of Birth. Name is a required field. Without Name an user is not allowed to submit the form. As an advanced feature AngularJS made validations easy. By simply adding a single line of code ng-show="userForm.name.$error.required"
I can easily made Name field as mandatory.

To valid an email here I used pattern. Validating the pattern against email entry using AngularJS ng-pattern directive. Similar thing I did for Number validation is Contact Number field. To validate Date field in the beginning of script block I declared a variable for date pattern with value YYYY-MM-DD. Using ng-pattern in date field validating the date pattern variable.

AngularJS-Form-Validation.htm




AngularJS Form Validation Example






{{title}}


Registration User Form


Name:


Your name is required.


Email:

Your email is required .
Your email should be in correct format ex abc@gmail.com .


Contact Number:

Your contact is required .
Mobile should be numeric
contact number should be minimum of 10 digits .
contact number should be maximum of 10 digits .


Date of Birth:

Your date of birth is required 
Date of Birth must be in the format of YYYY-MM-DD




© All right reserved

The post AngularJS Form Validation (Required, Email, Number & Date) Examples appeared first on OneStop Shop.

Example of Angular Treeview using Data from a JSON File

Nibedita Panda — Sun, 15 May 2016 13:22:33 +0000

JSON is one of the most popular lightweight data inter-exchange platform. It is platform independent and can easily editable without using any specific tool. Simply using Notepad you can read or write to a JSON file. Looking into this nearly all advanced third-party components supports JSON formatted data. In this regard here I am with a demo app to show you how to create Angular Treeview using data from a JSON file. This example is very helpful for the beginners of AngularJS.

Look at the example below here I have a JSON file “treeview.json” which holds the required data for my Angular Treeview. As you know to design a Treeview we required formatted data. That’s why here my JSON file has two kind of data nodes & sub-nodes. To display JSON data in a Treeview here I used $http module get() method to fetch data. After successful response from get() method assigning the response data to $scope object “items” array. showSubnodes() function is to display sub-nodes under respective parent node. In view to display items I am using UL LI elements. Using ng-repeat here I am looping the data & binding each record to li elements. 2 UL elements I used here. One for parent nodes & other one for Sub-nodes.

Example of Angular Treeview using Data

index.htm




Angular Treeview using data from a JSON File






{{item.node}}


{{subItem.subnode}}

JSON File for Angular Treeview

{"treedata":
[
{
"node": "Company",
"subnodes": [
{"subnode": "About Us"},
{"subnode": "Press Release"},
{"subnode": "Contact Us"},
{"subnode": "Our Blog"},
{"subnode": "Privacy"}
]
},
{
"node": "Services",
"subnodes": [
{"subnode": "VOIP"},
{"subnode": "Web Designing"},
{"subnode": "Photo Editing"},
{"subnode": "Audio & Video Processing"},
{"subnode": "Logo Designing"}
]
},
{
"node": "Products",
"subnodes": [
{"subnode": "CMS"},
{"subnode": "Blog Posting"},
{"subnode": "Forum Marketing"},
{"subnode": "Template Creation"}
]
}
]
}

The post Example of Angular Treeview using Data from a JSON File appeared first on OneStop Shop.

AngularJS Assessment Questionnaires for Trainees to Evaluate

Biswabhusan Panda — Sat, 14 May 2016 18:51:07 +0000

As a Corporate Trainer unless until I evaluate my trainees I don’t think I did completed the Training session. Recently looking in to the growing demand of AngularJS I instructed to provide training on the same. Nearly 4 to 5 batches I did trained. Including all the batches there are more then 300 IT professionals. After completion of training to evaluate all those trainees whether they grab required knowledge or not I prepared the following AngularJS Assessment Questionnaires.

In this Set of Questions to evaluate a trainee I covered all the possible scenarios a programmer required to begin with AngularJS. If your training session is for intermediate level you can refer this Questionnaires for evaluation.

To Design the following apps please follow AngularJS MVC design pattern.

AngularJS Search Filter

Qus. In a HTML page below the Search box you need to display name of your 10 colleagues. While I will start search using last name of your colleague it need to display the similar records. To store names of your colleagues you can use a $scope object with JSON formatted data.

Data Binding in AngularJS

Qus. I have a JSON file with 10 Customers details. For each Customer I have the following three fields.

1. Customer Name
2. Email
3. Customer Care Number

What I want is I want to display all the Customers Details in a tabular form using DIV structure. To design the Customers JSON file you can use dummy data.

Conditional Checking

Qus. In a HTML page I have two dropdown lists. First one need to show list of Country names (4 to 5 Countries max). On change of Country dropdown list I want to show respective states for that Country in the second dropdown list. Initially the default country is the first item of Country dropdown list & the default values for second dropdown list are the states for default country. For better performance I want to use switch case in place of if else.

Qus. In Controller I have a $scope object “employees” with two fields for each record “Name” & “Gender”. In HTML I want show male & female employees in two different lists. Use ng-show & ng-hide for showing & hiding the records.

Validations in AngularJS

Qus. To register a user in my Social Media application I need to design a form which will accept Name, Email, Contact Number & Date of Birth for registration. In this form Name is a mandatory field. Email must be a valid one. Contact Number filed will accept only numbers of 10 digits & Date of Birth must be in the format of YYYY-MM-DD. In case user is entering invalid data I need to show proper error message without submitting the form.

Single page Application

Qus. In a simple HTML page I have only three links Home, About Us & Contact Us. During I open this HTML file Home page is the default page with a single line Welcome message (Welcome to my Blog). When I will click on About Us link it need to show me the about us page with some dummy text. Similarly while I will click on Contact Us link it need to show Contact US page with dummy Contact Information. To make bookmark easy I want all these pages URL’s are different but during I visit from one page to other I don’t want to refresh the page. Physically Home, About Us & Contact us are three different HTML files. So that it is easier for me to maintain the app.

Ajax using AngularJS

Qus. Prepare a simple telephone directory with only 2 fields “Name” & “Number”. When I will submit the page it need to post the data into a php file for database operation. Provide a link in the bottom of this page. So that when I want to watch the list of members I can visit this link. You can fetch the list of members using $http get method.

Directive & Templates

Qus. In an App I have more than 100 of pages to show Tabular Data. What I need is I want a Custom Directive “my-table”. About the look n feel of the table I want the header background color dark blue & header texts in white color. For better user experience implement even & odd rows with light alternate colors. Table border width you can keep thin.

Service & Factory

Qus. Create a simple calculator which will have 4 functions Addition, Subtraction, Multiplication & Division.

The post AngularJS Assessment Questionnaires for Trainees to Evaluate appeared first on OneStop Shop.

Responsive AngularJS Image Gallery with thumbnails

Biswabhusan Panda — Sat, 14 May 2016 18:37:25 +0000

During I searched for a responsive AngularJS image gallery I found many third party paid components. But sorry to say my Customer wants some thing free. In this regard I did suggest the customer to implement a responsive image gallery with thumbnail using AngularJS. It is easy & less time consuming. Finally, the Customer get agree to my proposal & order me to develop the POC. I did that & sharing the same script in below for your reference.

Here I have a html file & in the root directory I have an images folder. Which contains all the thumbnail & original images. Inside the AngularJS controller I declared a scope object imageDetails. In this object I am keeping number of images & image file names. For SEO purpose here I added alt & title tag for each images. To bind the images in HTML I am using ul li elements. By CSS controlling it’s responsiveness. I used as minimum styles I can. According to your mockup you can configure the classes for desire look n feel.

To show the popup for individual thumbnail view I am calling a function popupOriginal() in the click event of thumbnail image. Where I am passing the file name from scope imageDetails object. During popup if user will click the body area popup is getting hide. This image gallery is capable to display any number of images. To achieve more number of images you just need to add image details in scope imageDetails object. This demo app is responsive to handle any resolution.

AngularJS Image Gallery Example




Create your own AngularJS Image Gallery

In this above example I used 12 sample images to show the Gallery. You can save as the below image & create more 11 images with the name declared above. Just update the slide number or even you can use your images with same resolution.

image-1.png

original-image-1.png

The post Responsive AngularJS Image Gallery with thumbnails appeared first on OneStop Shop.

Best way for beginners to learn AngularJS with Examples

Biswabhusan Panda — Sat, 14 May 2016 18:26:17 +0000

Before Getting Started with this knowledge sharing session first let me know “Are you one among them who is interested to learn AngularJS?” if so you are in the correct page. Here my intention is to teach you AngularJS Programming from the the scratch. AngularJS is an open source advanced JavaScript framework. It was first introduced in 2009 by two developers “Adam Abrons” & “Misko Hevery” from Google. Later by looking into it’s brilliant features & growing demand AngularJS is finally take over by Google. In 2012 the first version of AngularJS get released.

Why AngularJS is more popular compare to other Frameworks?

As a developer this question comes in to mind when many times you heard the term AngularJS. In replay I can say there are many key features AngularJS introduced compare to other Frameworks like ember.js or backbone.js which made AngularJS so popular. I know you are a beginner to AngularJS but still let you note down the key features.

AngularJS supports Single page Application Design.
MVC & MVVM both Design pattern supported by AngularJS.
In-built Directives & facility to create Custom Directives.
AngularJS Handles Dependencies.
AngularJS helps to extend HTML Vocabulary.
Parallel Development supports by AngularJS.
AngularJS supports JSON.
Two way Data binding.
Supporting Ajax.

Getting Started with AngularJS Programming

To start your first “Hallo World!” program in AngularJS you need to download the AngularJS library from https://angularjs.org or even you can use AngularJS library CDN link. To get an idea about your first AngularJS app look at the example below.

Example of my first AngularJS app





Your Name: 


Hello {{yourname}}

In the above Example for demo purposed I used AngularJS CDN link. Do mark one thing in html tag I used an additional tag ng-app. This is an AngularJS Directive. To make the HTML know that we are using AngularJS ng-app is responsible. From this example if you will remove ng-app from html tag this app will not run. Like ng-app one more AngularJS directive ng-model which I used in body tag to display your name from input box to inside h2 tag. Similar to ng-app or ng-model AngularJS provides many useful Directives. For Beginners later in this session I will explain you some of the most used AngularJS directives. One more thing I want to tell you about our first AngularJS app is to display value in HTML AngularJS uses {{ … }} this Syntax.

Model, View & Controller (MVC) in AngularJS

In software industry Codes are the Property. To maintain Codes well in a structured way there are several design patterns. Among them popular design patterns are MVC (Model View Controller) & MVVM (Model View View Model). AngularJS Programming supports both these design patterns. For Beginners let us explorer AngularJS MVC design pattern in below.

Model

Model supply data to view. Always the Current states of application reflects in Model layer. While creating a model in AngularJS it can be string, number, boolean or object data type. The syntax we use is var myModule = angular.module('myApp', []);.

View

View is nothing but the part user watch. To display data from the Controller we need to put AngularJS expression in view. As AngularJS supports two way data binding there is a continuous communication between view & model. Where templates just pointing to View.

Controller

Controller is the area where we do implement application business logic. Refer to it’s name it act like a junction point between Model & View. In AngularJS controllers are inside model. To create a controller we the following syntax.

var myApp = angular.module('myModel', []);
myModel.controller('myController', function($scope) {
$scope.Name = "Ravi Meheta";
$scope.Email = "ravi_meheta@infosys.com";
});

Example of AngularJS MVC Design Pattern






Name: 

Email: 


Welcome Message: {{ welcomeMsg() }}

The above Code is an example of how to implement AngularJS MVC pattern. In this example I created “demoApp” as my model, inside this I have a Controller “empController”. empController contains two objects name & email of employee with a function welcomeMsg(). Now I think you got the idea how to write function in AngularJS Controller. The tricky thing here is $scope. Let us discuss about this in Details.

$scope in AngularJS Controller

$scope acts like a glue between controller & view. I mean which property or method is a part of the $scope object that is accessible in view. In $scope object you can define JSON formatted data & it can be used in view.

The post Best way for beginners to learn AngularJS with Examples appeared first on OneStop Shop.

How to Display JSON Data in a Table using AngularJS?

Biswabhusan Panda — Sat, 14 May 2016 17:25:59 +0000

JSON is a lightweight data-interchange platform. During development sometimes we required to bind JSON file data to controls. In this session I am showing how to create a table in AngularJS using JSON data. Here I have 2 files one is AngularJS-table.htm & insured.json. insured.json is the JSON file which contains data for insured members of my family. In AngularJS-table.htm file I am showing all the members name & their relationship with me in tabular structure.

Trick I used here to bind data is so simple. Using AngularJS $http.get() method I am fetching data from insured.json file. Over success I am getting all JSON file data in response object. Then to bind these data in HTML table I am assigning response.insureds (parent node of JSON data) to $scope.members object. In HTML I have a table which contains two rows header & a dynamic row. Header I defined manually but for the next row I am using ng-repeat directive of AngularJS. During execution according to the number of records ng-repeat will generate that number of rows for the table. To display this table more professional here I used CSS styles.

AngularJS-table.htm




Example to display JSON data in a Table using AngularJS?







Name
Relationship


{{ indivisual.Name }}
{{ indivisual.Relation }}

Name	Relationship
{{ indivisual.Name }}	{{ indivisual.Relation }}

insured.json

{"insureds":
[
{
"Name": "Aparmita Dash",
"Relation": "Spouse"
},
{
"Name": "Angurbala Dash",
"Relation": "Mother"
},
{
"Name": "Surendra Dash",
"Relation": "Father"
},
{
"Name": "Nirupama Dash",
"Relation": "Daughter"
},
{
"Name": "Sanjarekha Dash",
"Relation": "Daughter"
}
]
}

The post How to Display JSON Data in a Table using AngularJS? appeared first on OneStop Shop.

Example of ng-repeat Conditional Filter to bind data in AngularJS

Nibedita Panda — Sat, 14 May 2016 05:58:55 +0000

In AngularJS ng-repeat is a frequently used Directive. Like a For loop this Directive works. I mean if you are looking to bind list of records to a HTML Control this directive helps. You must noticed in many case during we binding data using iterations, many times we required to Filter them Conditionally. In such case how we can implement ng-repeat Conditional Filter we are showing this demo in below example.

Here I Created a Customer list inside my controller CustomersCon. $scope.Customers comes with Name & Status fields. Name is the name of Customer & Status is it’s state Active or Inactive. In HTML body I am showing separately Active & Inactive Customers list using ng-repeat directive. To Filter both these status type (Active & Inactive) separately here I used ng-show & ng-hide directives from AngularJS.

For Active customers list here inside ng-repeat I used ng-show=”Customer.Status==’Active'”. Similarly for inactive Customers list I used ng-hide=”Customer.Status==’Active'”. Also the same Filter can be done using ng-if. ng-show, ng-hide or ng-if can be called Conditional Filters in AngularJS. All the three ng-show, ng-hide & ng-if accepts boolean values as True or False. If the value is True it will execute the statement else not. To run this demo copy the below codes to a Notepad file & Save it as a HTML file. Then Open the File in your Browser.

ng-repeat Conditional Filter Demo App



Example of using conditional filter with ng-repeat?




List of Customers

Active...

{{Customer.Name}}

inActive...

{{Customer.Name}}

The post Example of ng-repeat Conditional Filter to bind data in AngularJS appeared first on OneStop Shop.

Angularjs Routing Example using ng-view & routeProvider

Biswabhusan Panda — Fri, 13 May 2016 18:58:12 +0000

AngularJS Routing is the technique using which in a web application we can render multiple pages in a Single page without refresh the page. This technique is popular as “Single page Application” designing. To clarify your queries related to routing & routeProvider here I am with AngularJS routing example. In the below app I am with 3 pages Template-A.html, Template-B.html & Template-Param.html. In my Index.html I created an AngularJS module “routingApp”. Inside the module I am configuring the module for Angularjs routeProvider.

Using $routeProvider I am showing my three pages Template-A.html, Template-B.html & Template-Param.html in ng-view div. $routeProvider.when is used to detect the browser url & loads the respective html Template. Here in the below example I have 3 links in html body. Depending upon their href values the when statement works in routeProvider. For the first link I am sending Template-A to the browser like /Template-A. While the user click the first link inside $routeProvider function he will conditionally forcing the ng-view div to load Template-A.html. This is declared in templateUrl of $routeProvider.when. Including templateUrl here I am assigning the specific Controller for the specific template. For an example for Template-A I created Controller-A.

To show you the Complete features of AngularJS Routing here I created two more pages Template-B.html & Template-Param.html. Template-B is an example to show you how to pass Custom data using AngularJS Routing. In Template-Param you can found the example How to pass parameters using AngularJS Routing. First let us talk about Template-B. While use click on Template-B link including templateUrl & Controller details here I added one customData attribute. Using this way you can pass custom data in your routing mechanism. To show this custom data in Template-B.html inside the Controller-B I am assigning this data to a scope variable $scope.customData. In the next phase I am just printing this $scope.customData variable to my Template-B.html.

In Template-C I am showing the example how to pass parameters using AngularJS Routing. During the click of “Template Param” link in body I am calling a URL “Template-Param” with an id value 237. During $routeProvider.when using /Template-Param/:id I am sending the id value to the Template-Param controller. In Controller-Param I am using $routeParams to assign the id to a scope variable using $scope.paramId = $routeParams.id;.

In this example you can found How to use AngularJS Routing with How to pass parameters in AngularJS Routing & How to pass custom data in AngularJS Routing. To run this example in your local desk copy the below four files in their respective name. Store them in a folder & open Index.html.

angularjs-routing-example.htm




Example to show how to use AngularJS Routing




Template A
Template B
Template Param

Template-A.htm

Template A
{{ message }}

Template-B.htm

Template B
{{ message }}


{{ customData }}

Template-Param.htm

Template Param
{{ message }}


{{ paramId }}

The post Angularjs Routing Example using ng-view & routeProvider appeared first on OneStop Shop.

Example of Switch Case in AngularJS using ng-switch Directive

Biswabhusan Panda — Fri, 13 May 2016 18:53:54 +0000

As a good programmer you need to know the advantages of using Switch Case in place of If and Else. Modern Programming languages compiles switch case more faster than if & else. During application development using switch case we can achieve better performance for Conditional statements. It’s no matter if you are using if & else for 4 to 5 conditional statements. But in-case you are handling more then 4 to 5 Conditional statements to Compare values in such case prefer to use Switch Case in AngularJS in place of if and else.

In the below example I am showing how to use AngularJS Switch Case. Look at the Codes below. Here inside the Controller I declared an options object to the $Scope. Options array contains six items. In html body I have a dropdownlist which shows me the list of values from this options array. Depending upon the selected value from dropdownlist I am showing a div with appropriate message. In the primary div of switch cases messages I am using ng-switch on=”selection” to instruct on which values switch case will occur. Here “selection” is my ng-model. Which is declared in my select control. To check each case from options array I am using ng-switch-when & for default value like ‘Others’ from options array I am using ng-switch-default to show the default massage.

To run the below example copy the codes to a Notepad file. Save it as a html File. Then open the HTML file with internet Connectivity. This demo app contains CDN links. Without Internet this will not work.

Switch Case in AngularJS Example




How to use Switch Case in AngularJS?









Blog is a Business.
Business is a Busy Game.
Fashion updates Everyday.
Career is Like a Ladder.
Education Never Ends.
This is the Default value for Switch Case.

Alternatives to *ngSwitch

While `*ngSwitch` is useful, there are alternative approaches:

`ngIf` with Else – For simple binary conditions, `ngIf` may be more straightforward.
Custom Directive – For complex scenarios, a custom structural directive can provide more flexibility.
Component Binding – Sometimes, passing inputs to a single component is cleaner than switching between multiple templates.

Conclusion

The `ngSwitch` directive in Angular provides a clean and efficient way to handle conditional rendering based on different values. By understanding its syntax, use cases, and best practices, developers can create more dynamic and maintainable applications. Whether displaying role-based content, switching between views, or handling enums, `ngSwitch` is a powerful tool in the Angular developer’s toolkit. Always ensure proper case handling and consider alternatives when dealing with highly complex scenarios.

The post Example of Switch Case in AngularJS using ng-switch Directive appeared first on OneStop Shop.

Example of responsive AngularJS Dynamic Tabs using BootStrap 5

Biswabhusan Panda — Fri, 13 May 2016 18:48:08 +0000

During web application development many times we required to implement dynamic tab for better user experience. In this example I am sharing the codes to create AngularJS Dynamic Tabs using BootStrap. Here to show you a demo I created 4 states of India as the tabs. Under each tab I am showing the cities for that for that particular state dynamically.

AngularJS directive

The AngularJS directive here I create for my tab control is ngTab. Which accepts two parameters length & data. Length is the number of tabs we required. When data is the states & it’s cities. Data is in JSON format. You can replace this data as per your requirements. To get these parameters values in AngularJS ngTab directive I am using scope: { “length”: ‘=’, “data”: ‘@’ }. You can watch this in the below app.js file. To create responsive Tabs I used BootStrap here. my-tab.html is my template for ngTab. In template file I am binding the state & cities values (In form of array) from the scope object of TabModule.

To run this demo application you need to create 3 files as index.html, app.js & my-tab.html. Copy the below codes to the respective files. With internet connection run the index.html. It will show you the result like the below screen.

AngularJS Dynamic Tabs using BootStrap





Example to Create responsive AngularJS Dynamic Tabs

my-tab.htm


{{ appDetails }}




{{ item }}




{{ item }}
Welcome to {{ item }}. Visit Us.
Cities :

app.js

/* ng-tab Module */
angular.module('tabModule', []).directive('ngTab', function() {
return {
restrict: 'E',
transclude: true,

scope: {
/* Accepting the number of Tab you want in your app */
"length": '=',
/* Accepting the data in JSON for Tab */
"data": '@'
},

link: function (scope, element) {
scope.$watch("length", function (arrlen) {
scope.$watch("data", function (value) {

var obj = JSON.parse(value);

var lenjson = obj.Country.length;

var arrTab = [];
var autoCompArray = [];

/* Assigning input JSON data to Array */
if (arrlen == lenjson) {
for(i=0; i
The post Example of responsive AngularJS Dynamic Tabs using BootStrap 5 appeared first on OneStop Shop.

AngularJS Treeview Example using Data from Controller

Biswabhusan Panda — Fri, 13 May 2016 18:25:46 +0000

Treeview is a Classical fashion to display hierarchy of data. In less area using Treeview we can show large amount of data. Treeview works under parent child relationship. Parent is called node & the sub-items are called Child’s. Whether you do maintain a JSON file or Database AngularJS Treeview required relationship in Data.

In the below example I created an AngularJS Treeview using data from items object under $scope. Here Countries are the nodes & States are the Child’s. To design this demo here I have 3 files index.html, treeview.html & app.js. Index.html is the primary file where I refereed CDN link of AngularJS library. Treeview.html is the file where I am creating the template for treeview. App.js is the file where i implemented my logic’s to create a treeview using AngularJS. The module I create in app.js is treeview. Inside the module I have a directive called ngTree. In $scope I am assigning country & states as items. In items array country is the parent node when states are the child’s. In treeview.html using ng-click I am calling the function showStates(), which is in the $scope of app.js. This function helps to expand & collapse the nodes.

Angularjs Treeview Example

To run the below example Copy these code to notepad. Save it as index.html, treeview.html & app.js in a same folder. Before run the index.html make sure you are with Internet Connectivity.

index.htm





Example to Create Treeview using AngularJS

treeview.htm



{{item.country}}


{{subItem.state}}

app.js

angular.module('treeview', [])
.directive('ngTree', function() {
return {
restrict: 'E',
transclude: true,

controller: function($scope) {

$scope.showStates = function(item){
item.active = !item.active;
};

$scope.items = [
{
country: "INDIA",
states: [
{state: "Assam"},
{state: "Chhattisgarh"},
{state: "Sikkim"},
{state: "Maharashtra"},
{state: "Madhya Pradesh"}
]
},
{
country: "UNITED STATES",
states: [
{state: "Alabama"},
{state: "California"},
{state: "Hawaii"},
{state: "Michigan"},
{state: "New York"},
{state: "Washington"}
]
},
{
country: "PAKISTAN",
states: [
{state: "Peshawar"},
{state: "Lahore"},
{state: "Karachi"},
{state: "Islamabad"}
]
}
];
},
templateUrl: 'treeview.htm'
};
});

The post AngularJS Treeview Example using Data from Controller appeared first on OneStop Shop.

Example of using AngularJS Filter & built-in Filters

Biswabhusan Panda — Fri, 13 May 2016 18:02:51 +0000

AngularJS is a High Level Programming language. To search data from a list of records AngularJS provides filter keyword. AngularJS Filter is a way that will help you to transform your data to an appropriate representation in the View in a certain format. There are many inbuilt filters provided by AngularJS that give us the way to format our data in View. With these built-in filters, we can format & show our data in various ways. Text can be shown in uppercase, lowercase. Date can be also represented in various formats. All we need to do is add a “|” (pipe) after the data.

In the following example I listed out many countries in Controller with a scope variable Countries. Using an input control I am passing my search queries. AngularJS ng-model works here to make the input control as a query passing control. While binding data using ng-repeat to a ul element I used filter keyword to filter my query.

To run this example you can copy this code to a notepad file & save it as html. I am using CDN link to refer AngularJS library. To successfully run the example below be sure you are with Internet Connectivity.

Example of AngularJS Filter



Example to use filter in AngularJS?




Filter for Countries: 

{{Country.CountryName}}

AngularJS Built-in Filters

Filter – Filter the array to a subset of it based on provided criteria.
Uppercase – Convert the text to upper case text.
Lowercase – Convert the text to lower case text.
Currency – Formats the text in a currency format.
Order By – Order the array based on provided criteria.
Date – Format the date to a specific format.
Number – Format the number to a string format.

Filters to an expression

Example to add Filter in AngularJS expression.


Last name is {{ lastName | lowercase }}

Filters to Directives

Example to add Filter in AngularJS Custom Directives.




{{ x.name + ‘, ’ + x.country}}

Filters in controllers

Example to injecting Filter to AngularJS Controller.

myApp.controller("myController",function($scope,$filter){
$scope.filterPhone = $filter('convertToPhone')('1234567890');
});

Filters in Factory

Example of injecting Filter to Factory.

myApp.factory("myCustomService",function($filter){
return{
filteredData: $filter('uppercase')('mishra'),
};
});

Filters in Services

Example to injecting Filter to Service.

myApp.service('myCustomeService',function($filter){
this.filterData = $filter('uppercase')('john');
});

Example of built-in Filters

We can also create custom filter to display our data in a particular way that we want. Using .filter method we can create custom filters in Angular JS. Look at the example below.




Using AngularJS Filters



AngularJS demo Application



First Name:



Last Name: 



Fees: 



Subject: 







Name in Upper Case: 
{{student.fullName() | uppercase}}


Name in Lower Case: 

{{student.fullName() | lowercase}}



fees: 

{{student.fees | currency}}

	

Subject:



{{ subject.name + ', marks:' + subject.marks }}

The post Example of using AngularJS Filter & built-in Filters appeared first on OneStop Shop.

Angular Custom Directive Tutorial with Example for Beginners

Nibedita Panda — Fri, 13 May 2016 12:26:32 +0000

I can say directives are like a plugin to DOM elements which identified by AngularJS HTML compiler to render. AngularJS comes with many in-built directives to enrich our HTML. For better programmer friendly environment AngularJS provides the facility to write your own Angular Custom Directive. Directive gives freedom to write more structural UI controls. It’s easy to use & effective to maintain. There are 4 types of directive introduced by AngularJS.

Element directives (E)
Attribute directives (A)
CSS class directives (C)
Comment directives (M)

Using restrict option in a directive we can prevent it to any type. Name of a directive is case sensitive. Generally we use camel Case to present a directive name. Let’s take an example of ngTable. While embedding a directive in HTML typically we do lower case dash-delimited attribute on DOM elements. In case of ngTable directive while we will use this with HTML we can go for ng-table.

To make you clear about the full features of a directive let us discuss the available options. To create a directive we need to create a module first. Inside that module using directive keyword we can create our own custom directive. Directive is nothing but a function with return value.

Angular Custom Directive Example

var myApp = angular.module('myApp',[]);
myApp.directive('myDir', function() {
return {
template: 'Name: Biswabhusan Address: Nandanvan Colony, Wakad.'
};
});

Template & TemplateURL

Template & TemplateURL both are responsible to present HTML in a directive. Using Template option we can pass pure HTML to a directive when TemplateURL accepts only the physical path of the HTML page. While designing a large template TemplateURL helps to divide HTMLs into segments. This approach to advanced UI designing helpful to maintain & debug templates easily.

Restrict option

Using restrict option in a directive we can prevent the way to embed that directive in HTML. If we want to restrict a directive to attributes we have to use restrict: A. Like the same for Elements & CSS Classes we can use E & C. In case we required multiple restrictions to a directive we can use AEC.

Scope inside a Directive

Scope inside a directive gives freedom to accept out parameters from the shape of attributes. For an example let we plan to create a tab control. What I want is when I will declare my-tab directive in HTML I need to pass length as another attribute which will control the number of tabs. Here value of length is a number. To fetch this number from length attribute using scope we can declare “length”:’=’. In-case we are looking to fetch data in the shape of JSON we need to declare “data”: ‘@’. Using scope.$watch we can find out the value of an attribute in a directive.

Link in a Directive

Link is a function in a directive. After major parameters like scope & element you can define additional parameters to a link function. If we have attributes in scope object we can fetch that attribute value using scope.$watch. Element is nothing but the list of DOM elements.

Transclude option

Sometimes it is desirable to pass an entire template rather than a string of HTML or an object. Assume a condition where we have to create a dialog box. The dialog box should be able to wrap any arbitrary content. To do this, here we need to use the Transclude option. Transclude option accepts Boolean value.

Require Option

Require option is a restriction to nested directives. Let we want to do a tab control with respective panels. Here in-case I need to protect panels with & only with tabs then I can use require: ‘^myTabs’ under myPanel directive. While embedding in HTML we have to use myTab inside myPanel directive only.

For more details about Angular Custom Directive please refer the following links.

Guide for AngularJS Directive
AngularJS Custom Directive in Details

The post Angular Custom Directive Tutorial with Example for Beginners appeared first on OneStop Shop.

How to implement AngularJS Ajax using HTTP Service?

Nibedita Panda — Fri, 13 May 2016 12:23:25 +0000

Depending upon the demand of Ajax many languages provides the facility to operate Ajax in their platform. AngularJS is a high level programming language to optimize HTML & Javascripts. AngularJS supports Ajax calls using its $http Service. In $http service using get & post methods we do Ajax operations. Get is responsible to fetch data from the server while post posting the data to the server.

Angular HTTP get method

AngularJS $http.get() method accepts 2 parameters url & configuration settings. From which server page we are going to get data that page path is the value to url param. The second param config passed to the different $http functions controls the HTTP request sent to the server. Config parameter is a pure JavaScript object. It has several properties like method, url, params, headers, timeout, cache, transformRequest & transformResponse.





Response from Server : {{myData.fromServer}}

Angularjs HTTP post method

AngularJS $http.post() method accepts 3 parameters url, data & configuration settings. To which server page we want to send our data that page path is the value to url param. Data is the value(s) those we want to pass using post method. For an example it can be the first name & last name.

function sendDataUsingPostMethod($scope) {
$http({
url: 'demo-app.php',
method: "POST",
data: { 'empName' : Biswabhusan }
})
.then(function(response) {
// On Success
},
function(response) {
// On Failed
}
);

The post How to implement AngularJS Ajax using HTTP Service? appeared first on OneStop Shop.

HTML5 Table Sorting and Pagination using AngularJS

Nibedita Panda — Fri, 13 May 2016 11:53:28 +0000

To display data in a HTML document we do use table. While presenting data in a table to make this more user friendly we need some minimum operations like Sorting & Pagination. In this article I am using a HTML5 table to bind data using AngularJS. Including data bind here I implemented sorting & pagination features. Look at the example below.

index.html





HTML5 Table Sorting & Pagination using AngularJS

my-customer.html








Id 
Name 
Designation 
Employee ID 
Email 
Location 







« Prev


1


Next »







{{ item.id }}
{{ item.name }}
{{ item.designation }}
{{ item.employeeid }}
{{ item.email }}
{{ item.location }}

Id	Name	Designation	Employee ID	Email	Location
« Prev 1 Next »
{{ item.id }}	{{ item.name }}	{{ item.designation }}	{{ item.employeeid }}	{{ item.email }}	{{ item.location }}

app.js

angular.module('tblModule', [])
.directive('myCustomer', function() {
return {
restrict: 'E',
transclude: true,

scope: {
"tblWidth": '='
},

link: function (scope, element) {
scope.$watch("tblWidth", function (value) {
$("#tbltemp").css({"width": value + "px"});
}, false);
},

controller: function($scope, $filter) {
$scope.sortingOrder = sortingOrder;
$scope.reverse = false;
$scope.filteredItems = [];
$scope.groupedItems = [];
$scope.itemsPerPage = 5;
$scope.pagedItems = [];
$scope.currentPage = 0;
$scope.items = [
{"id":"1","name":"Biswabhusan","designation":"Sr. UI Developer","employeeid":"012801","email":"biswabhusan@gmail.com","location":"INDIA"}, 
{"id":"2","name":"Rakesh Srivastab","designation":"Software Engineer","employeeid":"013882","email":"rakesh@gmail.com","location":"GERMANY"}, 
{"id":"3","name":"John Fernandez","designation":"Sr. Team Lead","employeeid":"055620","email":"john@gmail.com","location":"ITALY"}, 
{"id":"4","name":"Kumar Abhishek","designation":"Project Manager","employeeid":"032451","email":"ku.abhishek@gmail.com","location":"INDIA"}, 
{"id":"5","name":"Swati Rao","designation":"UI Developer","employeeid":"001235","email":"rao@gmail.com","location":"HONG KONG"}, 
{"id":"6","name":"Monika Roy","designation":"SEO","employeeid":"076565","email":"monika@gmail.com","location":"INDIA"}, 
{"id":"7","name":"Monalisha Pradhan","designation":"Sr. Software Engineer","employeeid":"012302","email":"monalisha@gmail.com","location":"US"}
];

var searchMatch = function (haystack, needle) {
if (!needle) {
return true;
}
return haystack.toLowerCase().indexOf(needle.toLowerCase()) !== -1;
};

// initializing the filtered items
$scope.search = function () {
$scope.filteredItems = $filter('filter')($scope.items, function (item) {
for(var attr in item) {
if (searchMatch(item[attr], $scope.query))
return true;
}
return false;
});
// taking care of the sorting order
if ($scope.sortingOrder !== '') {
$scope.filteredItems = $filter('orderBy')($scope.filteredItems, $scope.sortingOrder, $scope.reverse);
}
$scope.currentPage = 0;
// now group by pages
$scope.groupToPages();
};

// calculate page in place
$scope.groupToPages = function () {
$scope.pagedItems = [];

for (var i = 0; i < $scope.filteredItems.length; i++) {
if (i % $scope.itemsPerPage === 0) {
$scope.pagedItems[Math.floor(i / $scope.itemsPerPage)] = [ $scope.filteredItems[i] ];
} else {
$scope.pagedItems[Math.floor(i / $scope.itemsPerPage)].push($scope.filteredItems[i]);
}
}
};

$scope.range = function (start, end) {
var ret = [];
if (!end) {
end = start;
start = 0;
}
for (var i = start; i < end; i++) {
ret.push(i);
}
return ret;
};

$scope.prevPage = function () {
if ($scope.currentPage > 0) {
$scope.currentPage--;
}
};

$scope.nextPage = function () {
if ($scope.currentPage < $scope.pagedItems.length - 1) {
$scope.currentPage++;
}
};

$scope.setPage = function () {
$scope.currentPage = this.n;
};

// functions have been describe process the data for display
$scope.search();

// change sorting order
$scope.sort_by = function(newSortingOrder) {
if ($scope.sortingOrder == newSortingOrder)
$scope.reverse = !$scope.reverse;

$scope.sortingOrder = newSortingOrder;

// icon setup
$('th i').each(function(){
// icon reset
$(this).removeClass().addClass('icon-sort');
});
if ($scope.reverse)
$('th.'+new_sorting_order+' i').removeClass().addClass('icon-chevron-up');
else
$('th.'+new_sorting_order+' i').removeClass().addClass('icon-chevron-down');
};
},
templateUrl: 'my-customer.html'
};
});

app-style.css

thead {
background-color: lightblue;
border-bottom: 2px solid black; 
cursor: pointer;    
}
.paradiv {
float: left;
width: 50%;
}
.pagination {
margin: 0px 0px !important;
}
.borderdiv {
padding: 8px;
}
.ralign {
width:100%; 
text-align:right;	
}

The post HTML5 Table Sorting and Pagination using AngularJS appeared first on OneStop Shop.

AngularJS Grouping Data using NG-Grid

Nibedita Panda — Tue, 10 May 2016 18:06:27 +0000

Grouping makes use of jQuery UI’s draggable feature and hence you’ll need to include JQuery UI into our application Download jQuery-UI using bower by typing in the following command in the terminal :

bower install jquery-ui

Include the jquery-ui library files by adding it in the app/index.html file as follows.

Start with adding the new array called userType, in the app/scripts/controllers/subscribers.js file.

var subscribers= $scope.subscribers =[];
var names=["Betty","John","Peter","Jaden", "Shannon"];
var loyalty=[3,5,7,8,7];
var userType=["Free","Free","Premium","Premium","Premium"];
var joinDate=["3/5/10","5/5/12","5/8/11","11/6/13","10/12/10"];

Make the corresponding changes to include the userType in our add user function as follows.

$scope.addUsers =function(i){
$scope.subscribers.push({
no:i+1,
name:names[i],
userType:userType[i],
loyalty:loyalty[i],
joinDate:joinDate[i]
});
}

Also add it to the column definitions in the gridOptions settings.

$scope.gridOptions = {
data: 'subscribers',
columnDefs: [
{field:'no', displayName:'No.'},
{field:'name', displayName:'Name'},
{field:'userType', displayName:'Subscription Type'},
{field:'loyalty', displayName:'Loyalty Score'},
{field:'joinDate', displayName:'Date of Joining'}]
};

Add the following two parameters to the gridOptions in app/scripts/controllers/subscribers.js as highlighted.

$scope.gridOptions = {
data: 'subscribers',
showGroupPanel: true,
jqueryUIDraggable: true,
columnDefs: [
{field:'no', displayName:'No.'},
{field:'name', displayName:'Name'},
{field:'userType', displayName:'Subscription Type'},
{field:'loyalty', displayName:'Loyalty Score'},
{field:'joinDate', displayName:'Date of Joining'}]
};

Save the file and refresh the subscriptions view in your browser.

The post AngularJS Grouping Data using NG-Grid appeared first on OneStop Shop.

How to bind data to Angular Grid using ng-grid Directive?

Nibedita Panda — Tue, 10 May 2016 18:02:25 +0000

NG-Grid is not a part of Angular Bootstrap and needs to be added separately. To install Angular Grid use bower to download the components for ng-grid. In your terminal navigate to your project folder, and type in the following commands.

bower install ng-grid

You should now be able to see the ng-grid folder and the files within the bower_components folder. The next thing is to include the ng-grid JS and CSS files in our index.html.

Please add the following highlighted line in your app/index.html file to include the ng-grid CSS file.

Add the ng-grid JS file as highlighted

Next you need to add the ngGrid dependency to your AngularApp, you’ll do this by adding in your app/scripts/app.js file as highlighted.

angular.module(AngularApp, ['ui.bootstrap','ngGrid'])

Now that you have NG-Grid added to your projects, create the routes, controllers, and partials for the subscribers page.

Open up the terminal and run the following command.

yo angular:route subscribers

Once you are done with this, you are all set to start working on your Subscribers view.

Open the app/scripts/controllers/subscribers.js file and create your model as follows:

$scope.subscribers =[];
var names=["Betty","John","Peter","Jaden", "Shannon"];
var loyalty=[3,5,7,8,7];
var joinDate=["3/5/10","5/5/12","5/8/11","11/6/13","10/12/10"];

Delete the awesomeThings model and initialize the subscribers model and create the arrays for names, loyalty and joinDate.

Next create a function that will add push the data into the subscribers model.

$scope.addUsers =function(i){
$scope.subscribers.push({
no:i+1,
name:names[i],
loyalty:loyalty[i],
joinDate:joinDate[i]
});
}

And finally run a for loop that iterates through the array elements and adds them to the model.

for (var i=0;i<5;i++){
$scope.addUsers(i);
}

Now that the model is ready, you need to initialize the NG-Grid, so after the for loop lets initialize the ng-grid as follows:

$scope.gridOptions = {
data: 'subscribers'
};

Your work on the controller is done, let’s open the app/views/subscribers.html partial and add the markup for the Grid.

Subscribers

add the height and width properties to the .gridStyles class.

.gridStyles{
width:940px;
height:300px;

To add the Column Definitions open the app/scripts/controllers/subscribers.js file, and add the following code as highlighted below:

$scope.gridOptions = {
data: 'subscribers',
showGroupPanel: true,
jqueryUIDraggable: true,
enableCellSelection: true,
enableRowSelection: false,
enableCellEdit: true,
columnDefs: [
{field:'no', displayName:'No.'},
{field:'name', displayName:'Name'},
{field:'userType', displayName:'Subscription Type'},
{field:'loyalty', displayName:'Loyalty Score'},
{field:'joinDate', displayName:'Date of Joining'}
]
};

For alternating row colors simply over riding the default odd and even row classes by adding the following classes to the app/styles/main.css file.

.ngRow.even {
background: #eaeaff;
}
.ngRow.odd {
background: #eaffea;
}

The post How to bind data to Angular Grid using ng-grid Directive? appeared first on OneStop Shop.

Angular Modal Window Example using $modal.open Method

Nibedita Panda — Tue, 10 May 2016 17:46:13 +0000

Create a modal window with a form to add users to our subscribers model. You will need a button which will launch the modal window when clicked. So create button in the app/views/subscribers.html as highlighted below:

Subscribers

now create the partial for the modal view.

Create a new file called add-user.html within the app/views folder and let’s put in the markup for the Add User Form as follows:



Add a Subscriber

Next markup the content for the modal body


Name
Subscription Type
Loyalty Score
Date of Joining

Next add the code to your app/scripts/controllers/subscribers.js file as follows:

The Modal window makes use of the $modal service, so we will need to add it to our SubscribersCtrl as highlighted :

angular.module('hlApp')
.controller('SubscribersCtrl', function ($scope, $modal) {

Next write the code to call the modal window.

Since the ‘Add New User’ will call the showModal function when clicked you will define that function at the end, just above the closing braces of your Subscribers Ctrl controller as follows:

$scope.showModel=function () {
$scope.newUser={};
var modalInstance = $modal.open({
templateUrl: 'views/add-user.html'})}

Another option that the $modal.open method supports is the ‘controller’ which allows you to assign a controller that binds to the view within the modal. Now add the controller option to your modalInstance.

$scope.showModal=function () {
$scope.newUser={};
var modalInstance = $modal.open({
templateUrl: 'views/add-user.html',
controller:'AddNewUserCtrl'
})}

Next create your AddNewUserCtrl within the same app/scripts/controllers/subscribers.js file.
Add this controller right at the end of the file after the SubscribersCtrl function ends.

.controller('AddNewUserCtrl', function ($scope, $modalInstance) {
});

Now within the AddNewUserCtrl define the functions for the cancel button as follows:

.controller('AddNewUserCtrl', function ($scope, $modalInstance) {
$scope.cancel =function(){
$modalInstance.dismiss('cancel');
}
});

Save the files and check to see if the Add New User and the cancel buttons are working.

The post Angular Modal Window Example using $modal.open Method appeared first on OneStop Shop.

Building Image Gallery using AngularJS

Nibedita Panda — Tue, 10 May 2016 17:44:11 +0000

To build your Image Gallery using AngularJS, let’s create the controller, partial and routes for it using the yeoman command as follows :

yo angular:route gallery

We will start with creating our model in the app/scripts/controllers/gallery.js file. Start with defining the various variables and arrays that we will need, within the GalleryCtrl controller function :

var pictures =$scope.pictures=[];
var baseURL="http://lorempixel.com/300/180/";
var titles=["Healthy Food","Healthy @ Work","City Life ", "Staying Fit","Looking Good","Nightlife !!"] ;
var keywords=["food", "business","city","sports","fashion", "nightlife"];
var dummyText="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sed erat turpis. Integer eget consectetur quam. Sed at quam ut dolor varius condimentum et sit amet odio. "

First you declare an empty model called pictures.

The next variable you define is the baseURL that holds the base URL for the images that you will show in the image gallery, as you can notice in this case you are using images of width 300 and height 180.

Next, Array titles is the array containing the titles for all the images.

The keywords array holds the list of all the keywords that you will concatenate at the end of the baseURL to get relevant images for the gallery.

And finally the variable dummyText holds some lorem ipsum that we will add as a description to each of the gallery images.

Now that you have all the variables and arrays defined the next step is to create the function that will push them into the pictures model.

You will write this as follows

$scope.addPics=function(i){
pictures.push({
url:baseURL+keywords[i],
title:titles[i],
summary:dummyText
})
}

The addPics function takes in an input parameter ‘i’ which does an array push by iterating through the arrays and updating the values for the url, title and summary properties.

The final step here is to call the addPics function in a loop, incrementing the value of ‘i’ .

This is done as follows

for (var i=0;i<5;i++){
$scope.addPics(i);
}

Since for this example we need about six images we run a for loop iterating from 0 to 5. This completes our work on the controller.

The post Building Image Gallery using AngularJS appeared first on OneStop Shop.

Getting Started with AngularJS for absolute Beginners

Biswabhusan Panda — Tue, 10 May 2016 13:25:37 +0000

AngularJS is a JavaScript framework to enhance static HTML. AngularJS is designed by Google. Google says “AngularJS is a Superheroic JavaScript MVC (Model-View-Controller) Framework”. Using AngularJS you can extend your HTML vocabulary. Creating directives is an advanced feature of AngularJS. Use of directives in AngularJS help to improve reuse of Codes. Controller is an another feature of AngularJS. Inside the controller AngularJS provides $scope. Which is accessible to HTML. AngularJS is easy & quick to Develop.

How to integrate AngularJS Library?

Look at the codes below here we created a Hello World program using AngularJS.



Country




Hello {{ CountryName}}!

The AngularJS library here we referred from Google API’s.

Why to use AngularJS?

When there are so many JavaScript frameworks available in the market why I will choose AngularJS?

1. Other frameworks deal with HTML’s shortcomings by providing an imperative way for manipulating the DOM using JavaScript.

2. Neither address the root problem that HTML was not designed for dynamic views.

3. HTML is great for static web pages, but HTML fails to provide dynamic views in web-applications.

4. AngularJS lets you extend HTML Vocabulary.

5. The resulting environment is extraordinarily expressive, readable, & quick to develop.

Can AngularJS used with other libraries?

Yes. It is fully extensible & works well with other libraries. For an example Jquery, Bootstrap or Foundation like other layout frameworks.

for more information’s in AngularJS, please visit https://angularjs.org

The post Getting Started with AngularJS for absolute Beginners appeared first on OneStop Shop.

Example of Angular Custom Filter to Reverse a String

Biswabhusan Panda — Tue, 10 May 2016 12:56:28 +0000

A filter is a way to format the value of an expression to the required shape. By default AngularJS provides many filters like currency, date, json, limitTo, lowercase, number, orderBy & uppercase. You can also create your own Custom Filters. Let us talk about the below Example. Here I Created an angular custom filter to Reverse a String. Let me explain the program how it is working.

Example of Angular Custom Filter

First to add AngularJS library I added script tag with Google API file “angular.min.js”. By referring this with ng-app tag in my html page I made integrated AngularJS Framework to my App. Next I Created an AngularJS module named as “DemoApp”. To create a module in AngularJS I used angular.module Syntax. This is assigned to html body tag using ng-app from AngularJS. It says the body tag is in the scope of module.

In my page I have a simple input control. What I want is on adding text in this input box I want to display the input value in both the order original & reverse order. After created the module, I added a filter method from AngularJS. Which accepts 2 parameters. The first parameter is name of the Custom Filter & the Second one is the Function which return a Function with result of reverse input.

Using charAt, I am printing the index characters and concatenating result with this as a return result. In html body part finally I am calling our reverse custom filter for Filtered Value. The syntax is as below.

– Copy this Code to Notepad.
– Save this as a html file. Open this in your Browser.

AngularJS Demo App to Reverse a String


Using Custom Filter to Reverse a String in AngularJS







Input Value : {{ text }}

Filtered Value : {{ text | reverse }}

The post Example of Angular Custom Filter to Reverse a String appeared first on OneStop Shop.

Name in Upper Case:	{{student.fullName() \| uppercase}}
Name in Lower Case:	{{student.fullName() \| lowercase}}
fees:	{{student.fees \| currency}}
Subject:	{{ subject.name + ', marks:' + subject.marks }}