AngularJS And ASP.NET MVC Movie Library Application - Part One

Here I’ve merely thought to write my thoughts about hands on Angular. This is a first article which tells you how to get your hands dirty with AngularJS & ASP.NET MVC Movie Library Application Tutorials.

This is the technology stack for this Movie library application as shown below,



I’ve designed a Simple Movie Library application in which you will get familiar with a few keywords and components which you may be confronting in the coming days. Those keywords are shown below in the article,

Component of Angular	Description
Module	Modules serve as containers to assist you to organize code within your AngularJS application. Modules can contain sub-modules.
$http	$http is an AngularJS service for reading data from remote servers
Services	Services are a point where you can put common functionality to an AngularJS application. E.g. if you would like to share data with more than one controller then bthe est way is to promote that data to a service and then make it available via the service. Services extend controllers and make them more globally accessible.
Routes Routing in Angular JS	Routes allow us to determine ways to navigate to specific states within our application. It also allows us to define configuration options for each specific route, such as which template and controller to use.
View	The view in AngularJS is what exists after AngularJS has compiled and rendered the DOM. It’s a representation of whatever outcome
@scope	$scope is essentially the “glue” between the view and controller within an AngularJS application. And somewhere support two way binding with in application.
controller	The controller is responsible for defining methods and properties that the view can bind to and interact with. Controllers should be lightweight and only focus on the view they’re controlling.
directive	A directive is an extension of a view in AngularJS in that it allows us to create custom, reusable elements. You can also consider directives as decorators for your HTML. Directives are used to extend views and to make these extensions available for use in more than one place.
Route Config	The config block of an AngularJS application allows for configuration to be applied before the application actually runs. This is useful for setting up routes, dynamically configuring services, and so on.
Dependency Injection	How can we inject dependency in Angular controller and module?

The application which we are about to build consists of almost all of the above defined keywords and the initial look of the application is as shown below.



There are a few points which we’ll cover in this application to make it complete,

• The above screen shot is a sample form for Movie Library application which has the option to add edit movie and delete movie.
  
• We’ll try to integrate one of the live movie apis in our application and will put search feature also to make searching easier.
  
• As well as focus on Custom Directive and Custom Service.
  
• Usage of $http to call to WebApi to populate data on html page.
  
• Load partial templates to MVC view page.
  
• Fusion chart integration with existing application, so that everyone may get an idea about this.
  
• The structure of the Movie Library application would be like given below:
  
  
  

And given below is the basic life cycle of the Angular App.


Hope this will help you some day. Enjoy Coding.