AngularJS framework consists of a tightly integrated tool set that will help you build well structured, rich client-side applications in a modular fashion—with less code and more flexibility.
AngularJS – MVC Architecture
MVC or Model View Controller as it is popularly called, is a software design pattern for developing web applications. let you work with any server-side technology as long as it can serve your app through a Restful web API. But Angular also provides services on top of XHR that dramatically simplify your code and allow you to abstract API calls into reusable services. As a result, you can move your model and business logic to the front-end and build back-end agnostic web apps.
Models: Now you can hear the world model in MVC Architecture. Model is like a Data in traditional web application. We can use data to create a dynamic document. We get the data from static JSON file or from database like SQL.
View: Other part of the application is called view. In order to show the data in model you can create an angular view. This is nothing more than a template. You can create view in your HTML code by double curly braces. Directives are the part of views component. In case of web application it’s HTML.
In the Concept of Model, View and some thing else, the some thing else is some thing that ties or term is used bind the model and the view. The model and the view are bound, so what ever happen to the model automatically effects to the view, and whatever happens to the view automatically effects to the model. The thing that binds them is called controller.
In AngularJS, suppose you extend HTML with new attributes is called as Directives. Directives are the most important components of any AngularJS application. Although AngularJS ships with wide range of directives, you will often need to create application specific directive
An AngularJS application consists of following four important parts −
- ng-app − This directive defines and links an AngularJS application to HTML.
- ng-init − This directives initialize actual application data.
- ng-model − This directive binds the values of AngularJS application data to HTML input controls.
- ng-controller − This directives defines which controller will be charge of your view.
- ng-bind − This directive binds the AngularJS Application data to HTML tags.
- ng-repeat − This directives is one of the most commonly used and serve to define your template scope when looping through collections.
Scope is a special java script object which plays the role of joining controller with the views. Scope contains the model data. In controllers, model data is accessed via $scope object.A controller (constructor) function is responsible for setting model properties and functions. This can be done only through $scope. Whatever function or model you apply in View (html file), that is accessed in controller using scope.
Simple hello world example as follows.
Features of AngularJS
Let’s take a look at some architecture choices that angular has made.
Two way binding, this means user input in form field and this instantly updated in your angular model. That means in the most cases you don’t need to watch a specific advance and respond to them and manually update to your html. Instead angular that handles for you.
Dependency Injection, This can be encapsulate pieces of your application better and also improve test ability.
If you like this blog, then please subscribe and suppose you have any queries or suggestion then comment below.