Single Page Applications using AngularJS

Size: px

Start display at page:

Download "Single Page Applications using AngularJS"

Matthew Bryan
5 years ago
Views:

1 Single Page Applications using AngularJS

2 About Your Instructor

3 Session Objectives History of AngularJS Introduction & Features of AngularJS Why AngularJS Single Page Application and its challenges Data Binding, Directives and Filters What is MVC and MVVM Practical's on AngularJS

4 AngularJS History AngularJS is one of today s hottest JavaScript MVC ( MVVM ) Frameworks. AngularJS was originally developed in 2009 by Misko Hevery and Adam Abrons at Brat Tech LLC, Now it was officially supported & maintained by Google. Misko Hevery is a Google employee, started to work with AngularJS in The idea turned out very well, and the project is now officially supported by Google.

5 What is AngularJS Library Vs Framework AngularJS is a framework that makes it easier to communicate between your HTML document and JavaScript It is an open source web application framework and framework for dynamic web apps. If facilitates HTML as your template language. AngularJS data binding and dependency injection eliminates extra code that you may need to write.

Why AngularJS MVC done right Most frameworks implement MVC by asking you to split your app into MVC components, then require you to write code to string them up together again. That s a lot of work.

6 Why AngularJS MVC done right Most frameworks implement MVC by asking you to split your app into MVC components, then require you to write code to string them up together again. That s a lot of work. Angular implements MVC by asking you to split your app into MVC components, then just let Angular do the rest. Angular manages your components for you and also serves as the pipeline that connects them.

7 Why AngularJS

8 Why AngularJS Eliminates DOM Manipulations <p id="greeting2"></p> <script> $(function(){ $('#greeting2').text('hello Kratoes!'); }); </script> <p ng:init="greeting = 'Hello Kratoes!'">{{greeting}}</p>

<body ng-app="myapp"> <w3-test-directive></w3-test-directive> <script> var app = angular.

9 Why AngularJS Behaviour with directives AngularJS has a set of built-in directives which offers functionality to your applications. AngularJS also lets you define your own directives. <body ng-app="myapp"> <w3-test-directive></w3-test-directive> <script> var app = angular.module("myapp", []); app.directive("w3testdirective", function() { return { template : "<h1>made by a directive!</h1>" }; }); </script> </body>

10 Why AngularJS Dependency Injection (DI) is a software design pattern that deals with how components get hold of their dependencies. The Angular injector subsystem is in charge of creating components, resolving their dependencies, and providing them to other components as requested. Why Demo? Lets see a real ti e usage.

11 Single Page Application Single page application (SPA) is a web application that fits on a single page. All your code (JS, HTML, CSS) is retrieved with a single page load. And navigation between pages performed without refreshing the whole page. Lets see how this works.

12 Single Page Application Pros No page refresh Better user experience SPA feels like a native application: fast and responsive. Ability to work offline Cons More complex to build Initial load is slow SPA needs to download more resources when you open it. Client should have javascript enabled

13 Features Of AngularJS

14 Features Of AngularJS

Data Binding Angular gives you the ability to define the binding between the data in your scope and your views Most directives that are using expressions are

15 Data Binding Angular gives you the ability to define the binding between the data in your scope and your views Most directives that are using expressions are creating a bidirectionnal data binding for you You can create manually new bindings with the directive ngmodel The changes are visible in real-time in all the expressions

16 Filters Angular comes with a collection of filters that can change the way your data are displayed Usage: {{expression filter}} Ex : orderby, lowercase, uppercase, limitto, date, filter etc..,

17 Scope Scope is a special javascript object which plays the role of joining controller with the views. Scope contains the model data. In controllers, model data is accessed via $scope object. Scope Inheritance Scope are controllers specific. If we defines nested controllers then child controller will inherit the scope of its parent controller.

18 Skeleton

19 Any Doubts?

20 Course Curriculum Class 1 JavaScript MVC framework a AngularJS Class 2 Services, Inheritance and Dependency Injection Class 3 Routes, Nested Routes, Directive and Filters Class 4 Custom Directives and Custom Filters Class 5 Third-party Modules, ng-router, ui-router Class 6 Angular with Bootstrap Class 7 Unit Testing in AngularJS Class 8 Project Discussion

21 Why Kratoes? Led-Live online classes with experts 24x7 Support 100% Placement Assistance Lifetime access to Course Content via LMS Industry Recognized Certificates

22 Corporate Partners

23 Contact us

Web Application Development

Web Application Development Produced by David Drohan (ddrohan@wit.ie) Department of Computing & Mathematics Waterford Institute of Technology http://www.wit.ie INTRODUCTION & TERMINOLOGY PART 1 Objec8ves