SPA 3 KEY CONCEPTS
•Download as PPTX, PDF•
2 likes•316 views
This document provides an overview of key concepts in single page applications including client-side templates using expressions like {{ }}, model-view-controller architecture with clear separation of data, logic and presentation, two-way data binding between model and view, dependency injection to pass dependencies to classes, and directives that extend HTML's template abilities. The model-view-controller pattern has the view as the DOM, controllers as JavaScript classes that update the model, and the model storing data in object properties that notifies the view of changes.
Recommended
Recommended
More Related Content
What's hot
What's hot (20)
Viewers also liked
Similar to SPA 3 KEY CONCEPTS
Similar to SPA 3 KEY CONCEPTS (20)
More from Ismaeel Enjreny
More from Ismaeel Enjreny (20)
Recently uploaded
Recently uploaded (20)
SPA 3 KEY CONCEPTS
- 1. SINGLE PAGE APPLICATION 3 ENG. ISMAIL ENJRENY
- 2. Concepts • Client-Side Templates • Model View Controller (MVC) • Data Binding • Dependency Injection • Directives
- 3. Client-side templates • {{ }} <html ng-app> <head> <script src="angular.js"></script> </head> <body> <div ng-controller='hellocontroller'> <p>{{greeting.text}}, world</p> </div> </body> </html>
- 4. Model View Controller (MVC) • The core idea behind MVC is that you have clear separation in your code between managing its data (model), the application logic (controller), and presenting the data to the user (view). • The view is the Document Object Model (DOM) • The controllers are JavaScript classes • The model data is stored in object properties
- 5. Model View Controller (MVC) Controller updates Model Model notifies the view View
- 6. Data Binding • Just declare which parts of the UI map to which JavaScript properties and have them sync automatically • See the same example in SPA2
- 7. Dependency Injection • The $scope object that does our data binding is passed to us automatically; we didn’t have to create it by calling any function. • Dependency Injection lets us follow a development style in which, instead of creating dependencies, our classes just ask for what they need function hellocontroller($scope, $location) { $scope.greeting = { text: 'hello' }; // use $location for something good here... }
- 8. Directives • {{ }} • ng-app • ng-controller • ng-model • You can write your own to extend HTML’s template abilities to do anything you can dream of
- 9. NEXT?