FIFA world cup 2014 with Angular.js & ASP.NET – Part- I

Dear Friends,
Today FIFA world cup 2014 is going to start, So I just thought to make something which have colors of FIFA world cup 2014 with my learning.
In this post I am sharing how to create a simple Angular.Js page in ASP.NET which give you FIFA 2014 Group Information.
Step 1:- Add a new project of ASP.NET and add Angular.Js in the project you can download Angular.js from here.
https://angularjs.org/
Or you can add angular js from NUGET package also.

Json
Step 2:– Now add as JavaScript file. I have added myApp.js file in project
Now we need to create a JSON for groups as shown below
Step 3:- Add reference of Angular.js and myApp.js in your project,

body_ng_App
Step 4:- Now next step is to add an Angular module to add this we need to write following line

var app = angular.module(‘App’, []);

Step 5: Once Module is added now we need to add a controller in this controller we need to declare a variable and assign JSON object which we have declare earlier.

Fotballngcontroller

Step 6: OK cool now your myAPP.js work is done.

Now move to design view of page. In this firstly assign the module to page
Currently I have assign this module in body tag.
Note: all the Angular related property started here with ng-
So in body tag I have written following property as shown in fig

Step 7:– Once we have added the module now we assign controller to a div in which we need JSON data of FIFA world cup 2014, So it can be added using ng-controller as shown in below fig

Step 7:- Now if you see JSON data it has multiple group like GROUP A , GROUP B etc so we require ng-repeat attribute of Angular.js. Tthis ng-repeat will reference controller’s variable which we have assigned in myapp.js.
Now for each group data we will create a div which have team name, team code, and team flag in that group. For this we need to write following code.

angular_FootBall_Repeat_Group

The best thing here is to access the property or value you just need to write curly barces {} and within this the property which you want to access.

Now when you run it. It will look like something like below screen.

Group_Vision

In next post we will show Match schedule with Angular.Js in asp.net.

Enjoy FIFA 🙂
Regards
Rajat Jaiswal

Advertisements

2 thoughts on “FIFA world cup 2014 with Angular.js & ASP.NET – Part- I

  1. this is a very nice post … although I am not familiar with the server side script that much but using angular js is super cool 🙂 Keep up the good work sir.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s