AngularJS 1.x - your first application (problems and solutions)
Download as PPTX, PDF2 likes599 views
The document provides an overview of developing Single Page Applications (SPAs) using AngularJS, detailing architectural best practices, including project structure and module organization. It discusses important concepts such as data binding, dependency injection, and directives, alongside useful developer tools and methods for integrating with back-end services. Additionally, it covers advanced topics like routing, error handling, and WebSockets, emphasizing the importance of a structured approach for efficient code management.
![Getting data from the server
33
• data – {string | Object} – The response body transformed with the transform functions.
• status – {number} – HTTP status code of the response.
• headers – {function([headerName])} – Header getter function.
• config – {Object} – The configuration object that was used to generate the request.
• statusText – {string} – HTTP status text of the response.](https://image.slidesharecdn.com/igortalevski-clean-160523124420/85/AngularJS-1-x-your-first-application-problems-and-solutions-33-320.jpg)
AngularJS 1.x - your first application (problems and solutions)
- 2. Igor Talevski Developer @ http://it-labs.com/ 2 @TalevskiIgor
- 3. Please Mute your mobile devices 3
- 4. General Sponsors Platinum Sponsors Silver Sponsors Gold Sponsors Bronze Sponsors 4
- 7. SPA concepts • SPA works and feels more like an application then a web page. • SPA separates UI and data, SPA communicates with server only with JSON REST API (Send/Receive JSON using AJAX) • Reducing bandwidth usage is also a plus • SPA can use caching and local storage effectively. • You can easily fake JSON data communication to test SPA, and you can also easily fake JSON requests to server to write unit tests. • Some SPAs don’t require SEO, but for those that do, the solutions aren’t straightforward. • Analytics is harder to implement 7 Single-Page Applications (SPAs) are Web apps that load a single HTML page and dynamically update that page as the user interacts with the app.
- 8. 8 Normal page life circle
- 10. Automatic Initialization • load the module associated with the directive. • create the application injector • compile the DOM treating the ngApp directive as the root of the compilation. (This allows you to tell it to treat only a portion of the DOM as an Angular application.) 10 Angular initializes automatically upon DOMContentLoaded event or when the angular.js script is evaluated if at that time document.readyState is set to 'complete‘.
- 11. Manual Initialization • After the page and all of the code is loaded, find the root element of your AngularJS application, which is typically the root of the document. • Call angular.bootstrap to compile the element into an executable, bi-directionally bound application. 11 If you need to have more control over the initialization process, you can use a manual bootstrapping method instead. Examples of when you'd need to do this include using script loaders or the need to perform an operation before Angular compiles a page.
- 12. 12 Combine with other library
- 13. 13 Combine with other library
- 16. 16
- 17. 17 Architecture Folders by type Folders by feature M I X
- 18. Application Structure LIFT Principle • Make locating your code intuitive, simple and fast. • When you look at a file you should instantly know what it contains and represents. • Keep a flat folder structure as long as possible. When you get to 8+ files, begin considering separation. • Be DRY, but don't go nuts and sacrifice readability. 18 Structure your app such that you can Locate your code quickly Identify the code at a glance keep the Flattest structure you can and Try to stay DRY.
- 19. 19 Module You can think of a module as a container for the different parts of your app – controllers, services, filters, directives, etc…
- 20. Data Binding 20 Automatic synchronization of data between the model and view
- 21. Controllers Use controllers to: • Set up the initial state of the $scope object. • Add behavior to the $scope object. Do not use controllers to: • Manipulate DOM — Controllers should contain only business logic. • Format input — Use angular form controls instead. • Filter output — Use angular filters instead. • Share code or state across controllers — Use angular services instead. • Manage the life-cycle of other components (to create service instances). 21 In Angular, a Controller is defined by a JavaScript constructor function that is used to augment the Angular Scope.
- 22. Nesting controllers • The root scope • The MainController scope • The ChildController scope • The GrandChildController scope 22
- 23. Demo 23
- 24. Dependency Injection 24 Dependency Injection (DI) is a software design pattern that deals with how components get hold of their dependencies.
- 25. Dependency Annotation 25 Angular invokes certain functions (like service factories and controllers) via the injector. You need to annotate these functions so that the injector knows what services to inject into the function. Inline Array Annotation Property Annotation Implicit Annotation
- 26. Useful Tools For Developers 26 Yeoman generator for AngularJS - lets you quickly set up a project with sensible defaults and best practices.
- 27. Useful Tools For Developers 27
- 28. Useful Tools For Developers 28 • (local server) The actual grunt server • (jshint) Make sure there are no obvious mistakes • (jscs) Make sure code styles are up to par • (clean) Empties folders to start fresh • (postcss) Add vendor prefixed styles • (wiredep) Automatically inject Bower components into the app • (compass) Compiles Sass to CSS and generates necessary files if requested • (filerev) Renames files for browser caching purposes • (usemin) Performs rewrites based on filerev and the useminPrepare configuration • (ngAnnotate) *tries to make the code safe for minification automatically • (ngTemplate) register your AngularJS templates in the $templateCache • (livereload) Watches files for changes and runs tasks based on the changed files • uglify, cssmin, imagemin, svgmin, htmlmin, etc ...
- 29. Useful Packages 29 • ng-constant If you develop a website that uses multiple environments such as development, staging and production you probably have a configuration file of sorts to handle things like database settings, mail server credentials, and so on for your backend system. But how do you handle such variables in the front-end? Specifically, in an AngularJS App?
- 30. Directives • 'A' - only matches attribute name • 'E' - only matches element name • 'C' - only matches class name • 'M' - only matches comment 30 At a high level, directives are markers on a DOM element (such as an attribute, element name, comment or CSS class) that tell AngularJS's HTML compiler ($compile) to attach a specified behavior to that DOM element (e.g. via event listeners), or even to transform the DOM element and its children.
- 31. Getting data from the server 31
- 32. Getting data from the server 32
- 33. Getting data from the server 33 • data – {string | Object} – The response body transformed with the transform functions. • status – {number} – HTTP status code of the response. • headers – {function([headerName])} – Header getter function. • config – {Object} – The configuration object that was used to generate the request. • statusText – {string} – HTTP status text of the response.
- 34. Restangular 34
- 36. 36 Usage of Service Repository
- 37. 37 Same-origin policy The same-origin policy restricts how a document or script loaded from one origin can interact with a resource from another origin. It is a critical security mechanism for isolating potentially malicious documents.
- 41. AngularUI Router 41 Routing frameworks for SPAs update the browser's URL as the user nagivates through the app.
- 42. JWT 42 JSON Web Tokens are an open, industry standard RFC 7519 method for representing claims securely between two parties.
- 43. Interceptors 43 For purposes of global error handling, authentication, or any kind of synchronous or asynchronous pre-processing of request or postprocessing of responses, it is desirable to be able to intercept requests before they are handed to the server and responses before they are handed over to the application code that initiated these requests.
- 44. WebSockets 44 is an advanced technology that makes it possible to open an interactive communication session between the user's browser and a server.
- 45. WebSockets 45
- 46. WebSockets 46
- 47. Demo 47
- 48. Complete the evaluation and earn the chance to win prizes in the closing raffle http://eval.codecamp.mk 48 Questions
- 49. Thank you