Overview of MV, AngularJS, Setup
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.
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 .
Next we will go to the AngularJS overview. The reason why it is so great.
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.
Key Features of AngularJS
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 .
An example of Controller here: http://embed.plnkr.co/zbGwOkhPB8m60ChTtOQj
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 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 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
Example of Data Binding: http://embed.plnkr.co/dECGEtvMvcMwabCP1IoZ
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 in AngularKS perform data conversion. It can be used to format data, or to filter results.
For example: http://embed.plnkr.co/eIF14kLTJ3V8wkR5kthC
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
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
- Object creation, prototypes
- Basic Model-View-Controller
- The Document Object Model