What is an MV *, can you eat it?

This article was written using AngularJS 1 . I will update the article to Angular 2 from lesson 2.

MVC – Model, View, Controller

First, explain MVC . MVC is a software architecture that has three main components: Model, View, Controller. The way how components interact with each other can be seen in the picture below.

Model, View, Controller

MVC model is very popular with web frameworks. Spring is one of the first famous frameworks to use MVC . And Ruby on Rails is one of the most famous MVC framework web.

By separating data handling components, handling and displaying. The specialization of these functional group functions has made the source code of the applications more bright, easy to optimize and maintain. That is exactly what makes MVC popular.

MVVM – Model, View, ViewModel

MVVM is a software development architecture first developed by Microsoft, based on the original Presentation Model of Martin Flower . In addition, MVVM's style is still based on MVC , but the Controller part is not focused, and has been hidden in the ViewModel.

MVVM

The goal of MVVM was to support Windows Presentation Foundation (WPF) based application development and development, Silverlight on .NET platforms using XAML and .NET languages ​​more easily.

MVW – Model, View, Whatever

MVW is actually a fun way of calling Google engineers during AngularJS development. Although AngularJS is very close to MVC , but through the development process, and upgrading the API, gradually AngularJS has redirected through MVVM, because the $ scope object can be viewed as a ViewModel and wrapped by a function * Ctrl is treated as Controler. Then, because of the flexible nature of AngularJS, it was called funny and MVW. You can see more of this information here .

MVW

Next we will go to the AngularJS overview. The reason why it is so great.

AngularJS – The "Super-heroic JavaScript MVW Framework"

AngularJS is developed by Google. The goal of AngularJS is to create single-page applications. Initially Angular JS was developed with a clear MVC orientation.

AngularJS's philosophy is to extend traditional HTML with the tag. Then use Javascript two-way binding in a synchronized manner between model and view. AngularJS makes handling DOM easy and support debugging and testing easier.

Key Features of AngularJS

Scope

Scope is a concept that is almost like a domain app. It detects the change of model objects and creates the context to implement that change and impact.

In AngularJS, Root scope is application scope (ng-app) containing child scopes. It manages model changes and notifies the view, and it also transfers events to the controller for processing

For example v $scope http://embed.plnkr.co/0xbkRyGIWTkdMaJpSxog .

Controller

The controller is responsible for creating and building models to connect them to views (HTML). Scopes stand between controllers and views. When programming, the code inside the controller needs to be really bright and only handle the business logic needed for the view. In AngularJS, Controllers can inherit. A big difference between AngularJS and other Javascript frameworks is that Controller does not handle the DOM. And you need to really pay attention to this.

An example of Controller here: http://embed.plnkr.co/zbGwOkhPB8m60ChTtOQj

Model

The master model is simply a Javasctipt Object. There is no need to extend or create any structure. And it allows models to be nested.

View

View is built on DOM objects, not strings. And view is HTML. Language for Web UI. The view of AngularJS is special in that it allows for multiple Views on a Controller.

Services

Services in AngularJS are designed according to singletons to handle common tasks for a web application. If you want to share functions between Controllers, you can use Services. Built in AngularJS. Services start with a $ sign, and there are many ways to build a Service: Service API, Factory API, or the $ provide API.

Example of Services: http://embed.plnkr.co/F69yhiETz3UqmVTl5frQ

Data Binding

Data Binding in AngularJS is implemented in two-way binding between View and Model. Automatic synchronization between Views and Data Model makes AngularJS extremely easy to use and clear. Updating Data between Views and Model is done without any lines of Javascript code to bind or event listeners to listen.

Example of Data Binding: http://embed.plnkr.co/dECGEtvMvcMwabCP1IoZ

Directives

AngularJS allows you to use Directives to change DOMs or create new behaviors. A directive that allows you to extend HTML very smoothly. is the standard prefix of AngularJS. App (ng-app), Model (ng-model), Controller (ng-controller) … built with AngularJS. You can still create your own Directive, it is not too difficult but it is not easy. Read more AngularJS documentation about building directives

For example: http://embed.plnkr.co/UVzM2QRWHoZxFeg6jkPG

Filters

Filters in AngularKS perform data conversion. It can be used to format data, or to filter results.

For example: http://embed.plnkr.co/eIF14kLTJ3V8wkR5kthC

Validation

AngularJS has several built-in validation for validations of HTML5 variables and some directives. If you want to build a Build-in validations. You can easily build it similar to Directive. Example of how to use the build-in validations http://embed.plnkr.co/9CusuKxqf3axprjtgrFU

Testable

Testing is a vital issue of software development. There are many ways to write and run test suites with Javascript. Testing with AngularJS can be done easily with Jasmine tests using Testacular . Writing tests may not be very interesting. But it is an extremely important part of software development.

Conclude

I really enjoy learning and using AngularJS. Because it's interesting and easy to use. Starting from the following article I will gradually introduce lessons and examples of AngularJS.

Environment settings and some things to know.

To learn and develop, about the environment, you need to install Sublime Text and use AngularJS Sublime Text Plugin .

Basic requirements for learning AngularJS

• Knowledge of HTML, CSS, JavaScript, including: – The POJO (plain old JavaScript object)
• OOP
• Object creation, prototypes
• Basic Model-View-Controller
• The Document Object Model
• JavaScript functions, events, error handling.

ITZone via kimhieu