Client Side MVC & Angular
•
2 likes•1,398 views
About MVC Pattern and how its applied on a client-side environment Full presentation: https://slides.com/alexebogdan/client-side-mvc-angular
Recommended
More Related Content
What's hot
What's hot (20)
Viewers also liked
Viewers also liked (8)
Similar to Client Side MVC & Angular
Similar to Client Side MVC & Angular (20)
More from Alexe Bogdan
Recently uploaded
Recently uploaded (20)
Client Side MVC & Angular
- 4. represent knowledge. A model could be a single object, or it could be some structure of objects. A is a (visual) representation of its model. It would ordinarily highlight certain attributes of the model and suppress others. A is the link between a user and the system. It provides the user with input by arranging for relevant views to present themselves in appropriate places on the screen.
- 6. The classes which are used to store and manipulate state, typically in a database of some kind. The user interface bits (in this case, HTML) necessary to render the model to the user. The brains of the application. The controller decides what the user's input was, how the model needs to change as a result of that input, and which resulting view should be used.
- 8. (Past) Browser HTTP Request Server + Dispatcher C V M
- 9. (Present) Browser Server V M SPA HTML5 - JS Static content RESTful Endpoints Event publisher Request / response JSON - REST Web Sokets C
- 12. client-side MVC framework for dynamic web apps; perfect for building CRUD application: data-binding, templating, form validation, routing, dependency injection, reusable components; designed to be testable: unit-testing, end-to-end testing, mocks.
- 13. Declarative HTML approach 2 way data binding reusable components - directives MVC / MVVM design pattern dependency injection routing templating animations form validation E2E integration testing / unit testing I18n & I10n
- 14. <!DOCTYPE html> <html ng-app="myApp"> <head> <title>Angular app</title> <script src="path/to/angular.js"> {{name}} //app.js angular .module('myApp', []) .controller('MyCtrl', function($scope){ $scope.name = 'World'; }); Plunker Example
- 15. Example Link
- 16. Browser loads the page and creates the DOM; Browser triggers DOMContentLoaded event; Angular looks into the DOM for the attribute and if the attribute it's found Angular will: load the module associated with the directive; create the application injector; compile the DOM into a Live View: : traverse the DOM and collect all of the directives - the result is a linking function; : combine the directive with a scope and produce a .
- 17. automatic propagation of data changes; model it's the single-source-of-truth; digest cycle; the view it's updated automatically when the model is changed; model is updated automatically when a value in the View has changed. no DOM manipulation needed.
- 18. Implement Angular data binding mechanism