Angularjs routing asp.net mvc example

AngularJs applications Angularjs MVC MVC Routing

Angularjs routing asp.net mvc example

Kris Kimcil 21.05 Komentar

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

Read more »

Baca selengkapnya

Angular best practice documents

AngularJs best practice documents

Angular best practice documents

Kris Kimcil 01.13 Komentar

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

Read more »

Baca selengkapnya

How to use ng-paste and ng-cut?

angularjs examples angularjs tutorials ng-cut ng-paste

How to use ng-paste and ng-cut?

Kris Kimcil 01.41 Komentar

- 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 »

Baca selengkapnya

ng-copy example

angularjs examples ng-copy

ng-copy example

Kris Kimcil 00.52 Komentar

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

Please run below code to learn.

Read more »

Baca selengkapnya

AngularJs input with types example

input[checkbox] input[date] input[datetime-local] input[email] input[month] input[number] input[radio] input[text] input[time] input[url] input[week ]

AngularJs input with types example

Kris Kimcil 21.01 Komentar

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 »

Baca selengkapnya

angularjs a directive example

a angularjs examples

angularjs a directive example

Kris Kimcil 01.01 Komentar

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 »

Baca selengkapnya

Angularjs format input number when typing example

angularjs examples format format number example mask ng-change

Angularjs format input number when typing example

Kris Kimcil 20.33 Komentar

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 »

Baca selengkapnya

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

AngularJs Date angularjs examples

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

Kris Kimcil 02.41 Komentar

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;

Baca selengkapnya

Angularjs table format example

Angularjs table example ng-class ng-class if example

Angularjs table format example

Kris Kimcil 01.52 Komentar

 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 »

Baca selengkapnya

Multi select listbox with dynamid ng-selected values

angularjs examples angularjs issue Angularjs listbox example

Multi select listbox with dynamid ng-selected values

Kris Kimcil 20.23 Komentar

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 »

Baca selengkapnya

Filter by and operator in AngularJs

filter filter by and operator in AngularJs

Filter by and operator in AngularJs

Kris Kimcil 20.04 Komentar

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 »

Baca selengkapnya