Angular Basic Part 3

Sorry for delay everyone, as i was busy with relocating to a new city,and adjusting to the same, so here is the next part in Angular Basics.

Until now, we have good idea about how angular is injected and how we can pass the data on view from angular controller.Lets go ahead and see, how we can get/post data from angular controller using MVC.

Just to expain, what we are going to achieve, we will create a list of employee and display the same in tabular format, and we will also create a new student.

  1. To start with let’s add a new class called student, as we are using MVC template lets add this class under Models folder, and add few properties. Below snippet shows how my class looks like now.EmplClass
  2. Next let’s create a new controller, and name it as StudentController.Just right click on controler folder select Add->Controller. If you are using VS 2015, you will get multiple  option like empty controller, controller with read/write action etc, Just chosse empty controller, in coming blogs we will see how to use those templates.
  3. Name the controller as StudentController, and click ok, now you have your controller avaialable, and if you will notice there is a new Student Folder created under Views folder, if not let’s create a new folder.Below id the structure, how our solution looks like now.StudentController
  4. Now most of us are familiar with N-Tier architecture and i follow the same, but for simplicity, we are not using the N-Tier architecture here, but as we proceed ahead and implement the DataAccess Layer, same will be used. As of now let’s add a folder called Services, which  will work as dummy DataAccesss Layer for us.
  5. Right click on solutionn and select Add-> New Folder, and name it as Service, let’s add a new file called StudentService.
  6.  Now let’s add some method under this service, we will have 2 methods as GetStudentList() and CreateNewStudent(). This is how your service looks like now, as this is dummy service, we are manually passing the data.SudentService.JPG
  7. Let’s utilize the service in our StudentController, which we had created, we will create 2 actions in StudentController, GetStudent() and SaveStudentData().
  8. To get data we will add a new method GetStudentList(), which will return jsondata, inside which we will call the GetStudentList() method of service.For saving data we will have a action method SaveStudentData(), which will call CreateNewStudent() method of service and will return the employeeid.StudentController1
  9. Now we will display the student data on our view, add a view called Index.cshtml in student folder, to add right click on student folder Add->View.
  10. Let’s call our action from our agularController which we had created, we will be using $http service of angular. We will be calling the same on load event. We will be assigning the value to scope varialbe called StuentList. Developers who have used , $ajax this is similar to what we used to do in Jquery to call our API or controller, below is the code.agularController
  11. If we notice similar to $ajax, it returns success and error , in error we have a scope variable where we will be setting error= true, we have placed a div on our index view to show the same in case of error. below is how our view looks like now.View
  12. Let’s press F5 to see the result now.Result
  13. Great we have our displayed our data, now lets move to add a new record. First we will add  a view called AddStudent.cshtml, right click on Student folder Add->View.
  14. To display view, will also add a action to render our view. Below is the action method.AddAction
  15. Now we will have a link on Index page to redirect the user to AddStudent view. Add this code at last line @Html.ActionLink(“Add Student”, “AddStudent”), it will create a link. Also let’s modify the AddStudent view to create a form.AddStudent
  16. Now let’s press F5 to see the result.View1View2 
  17. If you notice we have used ng-click, and if you are thinking what it means, it is an directive, where you can fire the function when button click event is fired.And ng-model is directive, where we can pass the data from view to controller.Let’s also modify our view and add success and error div to display in case of success and error.ModifiedView
  18. Now lets write the code in our angular controller to save it.ModifiedController
  19. Now let’s press F5 and see the result.Post saving the data, we will get result like thisAddStudentResult

 

We are  done with the basics now, if you have any doubts or questions you can mail me on santosh.yadav198613@gmail.com.

In next blog, we will go to advanced  level, we will be using EF 6.0 and HTML pages rather than Razor view. We will also cover routing using ui-router.

Keep reading my blog for more informatio, please share and like.

35 Comments


  1. I love your blog.. very nice colors & theme. Did you create this website yourself or did you hire someone to do it for you? Plz reply as I’m looking to construct my own blog and would like to know where u got this from. many thanks

    Reply

    1. This is free template from WordPress.

      Reply

  2. I feel the admin with this site is truly working hard for his
    website, as here every stuff is quality based stuff.

    Reply

  3. I like your website.. very nice colors & theme. Have you
    create this site yourself or would you employ someone to get it done to suit your needs?

    Plz reply as I’m trying to construct my blog and want to know
    where u got this from. cheers

    Reply

    1. This is free template from WordPress.

      Reply

  4. Hey There. I discovered your blog using msn. This is an extremely
    neatly written article. I will be sure to bookmark it and return to read more of the helpful info.
    Thank you for that post. I’ll definitely comeback.

    Reply

  5. I blog frequently and I seriously thank you for
    your information. The article has truly peaked my interest.
    I will take a note of your site and keep checking for new
    details about once per week. I opted in for your Feed as well.

    Reply

  6. I blog quite often and I seriously thank you
    for your information. This article has really peaked my interest.
    I’m going to take a note of your site and keep checking
    for new details about once per week. I subscribed to your Feed too.

    Reply

  7. Definitely feel that you stated. Your best reason seemed to
    be around the internet the simplest thing to understand. I have faith that for you,
    I certainly get irked while people consider worries that they just
    don’t understand about. You managed to hit the nail upon the most notable and defined out the whole thing with out side-effects ,
    people can go on a signal. Will likely come back to get more.
    Thanks

    Reply

  8. Thank you for the good writeup. It actually had
    been a amusement account it. Look advanced to more added agreeable from you!
    By the way, how can we communicate?

    Reply

  9. What a stuff of un-ambiguity and preserveness of precious know-how regarding unexpected feelings.

    Reply

  10. Thanks for every other fantastic article. The place else may anybody get that kind of info in such a perfect way of writing?
    I have a presentation next week, and I’m on the search for such information.

    Reply

  11. Hurrah! Eventually I got a blog from where I can genuinely obtain useful
    information regarding my study and knowledge.

    Reply

  12. Im thankful for the article post.Really thank you! Really Cool.

    Reply

  13. I was recommended this website via my cousin. I’m now not certain if this submit is
    written by him as nobody else recognize such particular
    about my trouble. You’re wonderful! Thanks!

    Reply

  14. Hello There. I discovered your blog using msn. This really is a really neatly written article.
    I’ll be certain to bookmark it and return to read extra of your own useful info.
    Many thanks for that post. I’ll definitely return.

    Reply

  15. Pretty! This was an extremely wonderful article.
    Thanks for providing this information.

    Reply

  16. Howdy! This is my 1st comment here so I just wanted to give a quick
    shout out and tell you I genuinely enjoy reading through your posts.
    Can you recommend any other blogs/websites/forums that cover the same subjects?
    Thanks for your time!

    Reply

  17. I generally agree with your opinion on this topic and look forward to additional posts and comments here at santoshyadavblog.com. Keep up the good work!

    Reply

  18. It’s really a great and helpful bit of information. I’m happy that you simply shared this helpful information with us.
    Please keep us up to date like this. Thanks for sharing.

    Reply

  19. 10/9/2016 santoshyadavblog.com does it yet again! Quite a thoughtful site and a good post. Keep up the good work!

    Reply

  20. 10/21/2016 @ 19:46:36 Appreciate the site– extremely easy to navigate and lots to consider!

    Reply

  21. Thanks for the noteworthy blog you’ve set up at santoshyadavblog.com. Your enthusiastic take on the subject is definitely contagious. Thanks again!

    Reply

  22. Many thanks for the great site you’ve created at santoshyadavblog.com. Your enthusiastic take on the subject is definitely contagious. Thanks again!

    Reply

  23. Excellent read. I just now passed this on 10/31/2016 to a fellow student who’s been doing some work of her own on this topic. To say thanks, they just bought me a drink! So, let me express my gratitude by saying: Cheers for the meal!

    Reply

  24. santoshyadavblog.com does it yet again! Very perceptive site and a well-written article. Keep up the good work!

    Reply

  25. I discovered your weblog web site on google and verify a number of of your early posts. Continue to maintain up the excellent operate. I simply extra up your RSS feed to my MSN Information Reader. In search of ahead to reading extra from you in a while!…

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *