AngularJS Tutorials

Complient with the Material Design Specification
Powered by AngularJS 1.4
50+ Example Pages
Unlimited Menu Levels
5 Star Support
700+ Material Design Icons
500+ Font Awesome Icons
Uses SASS Stylesheets
Automatic Breadcrumb Headings (based on menu heirachy)
ESlint & ESlint AngularJS plugin checks built in
AngularJS Speed profiler
Uses ARIA attributes that convey information about the application for users of assistive technologies.
Free update

>>Read more

Read more »

Angularjs listbox with checkbox

2015-11-08T19:20:00.001-08:00

Angularjs listbox with checkbox example

Base on AngularJs Material I create a example for Angularjs listbox with checkbox as following image

How to do it?

Read more »

Angularjs select option with image

2015-11-06T01:28:00.004-08:00

Angularjs select option with image

How to create these select?

Read more »

AngularJs button material example.

2015-11-03T01:42:00.003-08:00

AngularJs button material example.

Based on mdButton API Documentation <md-button> is a button directive with optional ink ripples (default enabled).

In this post I will make a example for:

Flat button
Raised button
FAB button
Button with link
Button Themed

Top free angularjs template

2015-11-02T00:12:00.005-08:00

Free angular templates

1. Dashboard angularjs bootstrap template.

Angularjs routing asp.net mvc example

2015-10-29T21:05:00.002-07:00

In this article I try to make a simple example about how to apply angularjs routing for asp.net mvc application. After this you can know how to use angularjs routing and angularjs routing for MVC. Beside that you can know how to rout with parameter, how to use ng-view.
agenda:

Add MVC application
Reference angularjs to MVC application
Add angularjs router and angularjs controller
Modify _Layout.cshtml and some mvc view to use angularjs.
Run and see result

Angular best practice documents

2015-10-28T01:13:00.001-07:00

To apply angularjs for application success I think that we need refer following best practice documents:

Read more »

How to use ng-paste and ng-cut?

2015-10-27T01:41:00.000-07:00

- ng-cut is specify custom behavior on cut event.

How to apply ng-cut?

 <input ng-cut="cut=true" ng-init="cut=false; value='please cut me'" ng-model="value">  
     You just cut it: {{cut}}

- ng-paste is specify custom behavior on paste event.

How to apply ng-paste?

  <input ng-paste="paste=true" ng-init="paste=false" placeholder='please paste here'>  
     pasted: {{paste}}

Full code for this example as below:

Read more »

ng-copy example

2015-10-26T00:52:00.001-07:00

ng-copy is specify custom behavior on copy event.
Read more at AngularJs doc

Please run below code to learn.

Read more »

AngularJs input with types example

2015-10-22T21:01:00.000-07:00

This example show how to use angularjs input with type is text, checkbox, radio, date, datetime-local,time, email, month, number, url and week .

Input belong ng module of angularjs.

Read more »

angularjs a directive example

2015-10-22T01:01:00.002-07:00

The a directive of angularjs is modifed form the html A tag so that the default action is prevented when the href attribute is empty.
You can refer direct AngularJs doc for this to know more. In this post i just want to make a example to help you learn easy.

Read more »

Angularjs format input number when typing example

2015-10-20T20:33:00.000-07:00

In this example i will show how to make format input number when typing in angularjs, we will use ng-changed event to do that. Of course you also use other way to do that.
Our goal:
Input : 100 => change to 100
Input : 1000 => change to 1,000
Input : 10000 => change to 10,000
Input : 100000 => change to 100,000
.....
And
Input : 100000.450 => change to 100,000.450

I hope that after got this example you can customize and make a common function related it.

Full code here

Read more »

How to get total days of a month of a year.

2015-10-19T02:41:00.000-07:00

How to get total days of a month of a year via angularjs.

 $scope.month = 10;  
 $scope.year = 2015;  
 // Get total days of Oct 2015  
 $scope.totalDays = new Date($scope.year, $scope.month, 0).getDate();

totalDays = 31;

Angularjs table format example

2015-10-15T01:52:00.002-07:00

Angularjs table format example

Requirement:
Have a list customers, show customer information (name, age, gender, phone) as a table.
To make discern base on gender: if gender = 'girl' then textcolor will be green
To make discern base on age: if age <20 background of age cell will be blue (is teen)

if age >60 background of age cell will be gray(is old)

As same as following image

Here is full code, please focus at highlight chars.

Read more »

Multi select listbox with dynamid ng-selected values

2015-10-12T20:23:00.003-07:00

Multi select listbox with dynamid ng-selected values

Example: we have two arrays: categories array is a list of categories and selectedcategories is a list selected categories by id. We want to use <select > to display all categories via multi selected categories which matching selectedcategories array values.

Output sample:

Here is full code

Read more »

Filter by and operator in AngularJs

2015-10-08T20:04:00.000-07:00

In this post I will show you how to use && operator in AngularJs.
Example I have a students list as below:

 $scope.students = [  
       { name: 'Hai', age: 25, gender: 'boy' },  
       { name: 'Hai', age: 30, gender: 'girl' },  
       { name: 'Ho', age: 25, gender: 'boy' },  
       { name: 'Hoan', age: 40, gender: 'girl' },  
       { name: 'Hieu', age: 25, gender: 'boy' }  
     ];

I want to filter students via gender to be boy and filter by name of them.

The first I create a function named "filterbyboy" as following:

 $scope.filterbyboy = function (genderstr) {  
       if ((typeof $scope.search === 'undefined')||($scope.search === ''))  
         return (genderstr = "")  
       else  
        return (genderstr = "boy");  
     };

Explaination: if not filter name then display all students else filter by input name and gender as 'boy'

Here is full HTMLcode

Read more »

Angularjs table sorting filter and paging

2015-09-24T02:44:00.003-07:00

Angularjs table sorting, filter and paging

This post provides an example about how create a table via sorting, filter and paging. Following directives and services in angularjs will be used:

orderby
filter
ng-click
ng-model
ng-repeat

Angularjs table via sorting and filter on columns example

2015-09-24T00:19:00.002-07:00

Angularjs table example

This post provides an example about how create a table via sort and filter features.
Following directives and services in angularjs will be used:

orderby
filter
ng-click
ng-model
ng-repeat
ng-init

Angularjs event example

2015-09-23T21:48:00.000-07:00

This example helps you known about six events in angularjs

•    Mousedown event
•    Mouseenter event
•    Mouseleave event
•    Mousemove event
•    Mouseover event
•    Mouseup event
Read more »

Angularjs ng-pattern example

2015-09-23T01:23:00.000-07:00

Angularjs input pattern example

This example is using ng-pattern for Number, Text only and Date type.
Please follow this code to know how to apply ng-pattern. If you try to input incorrect data the form will be invalid and text on it changes to RED.

Read more »

ng-class if example

2015-09-21T20:55:00.001-07:00

How to apply ng-class if

This example provides two ways using ng-class if expression.
Following directives and services in angularjs will be used:

ng-classs
ng-model
ng-repeat

Tutorial 33 - angularjs works with wcf

2015-09-21T06:01:00.001-07:00

Angularjs works with wcf

on-going

Tutorial 32 - Angularjs MVC RESTful Web Service example

2015-09-21T05:58:00.001-07:00

Angularjs MVC RESTful Web Service example

This example shows how to create a simply web application using angularjs, mvc, RESTful Web Service and ORM Entity Framework, I named it is “manage customer”.

List of features:

List customer
Edit customer
Create new customer
Delete customer

List of projects of “manage customer” application:

CustomerEntities (Entity Framework 6.0.0.0)
CustomerDAL (c# class library)
CustomerBLL (c# class library)
CustomerAPI (RESTful web service)
CustomerUI (AngularJs, MVC)

Notes that in customer UI will be no C# controller file, it is be replaced by angularjs script file. CustomerAPI will works with CustomerBLL to controll business logic, CustomerBLL reference data layer (CustomerDAL) and CustomerDAL works CustomerEntities to query data.
OK now we focus step by step to know it.

Step 1: Create database for “manage customer” application
Read more »