Client Side MVC & Angular
2 likes•1,411 views
The document discusses the architecture of a web application, detailing the model-view-controller (MVC) design pattern and the role of AngularJS in creating dynamic web applications. It highlights the interaction between user input, the model, and the view, illustrating how Angular facilitates two-way data binding and automatic updates. The text also covers practical implementation aspects such as routing, dependency injection, and testing methodologies.
![<!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](https://image.slidesharecdn.com/client-side-mvc-angular-141016024646-conversion-gate02/85/Client-Side-MVC-Angular-14-320.jpg)
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