Introduction to Angular Js

Page 1

Angular JS tutorial by professionalguru


A brief Introduction : • What is Angular JS ? Angular JS is a JavaScript framework. It can be added to an HTML page with a <script> tag. Angular JS extends HTML attributes with Directives, and binds data to HTML with Expressions.

http://professional-guru.com


• Why Angular JS ? Other frameworks deal with HTML’s shortcomings by either abstracting away HTML, CSS, and/or JavaScript or by providing an imperative way for manipulating the DOM. Neither of these address the root problem that HTML was not designed for dynamic views.

http://professional-guru.com


1. Structure, Quality and Organization 2. Lightweight ( < 36KB compressed and minified) 3. Free 4. Separation of concern 5. Modularity 6. Extensibility & Maintainability 7. Reusable Components

http://professional-guru.com


JQuery : • Allows for DOM Manipulation • Does not provide structure to your code • Does not allow for two way binding

http://professional-guru.com


Features of AngularJS: • Two-way Data Binding – Model as single source of truth • Directives – Extend HTML • MVC • Dependency Injection • Testing • Deep Linking (Map URL to route Definition) • Server-Side Communication

http://professional-guru.com


Data Binding: <html ng-app> <head> <script src='angular.js'></script> </head> <body> <input ng-model='user.name'> <div ng-show='user.name'>Hi {{user.name}}</div> </body> </html>

http://professional-guru.com


MVC:

Model (Data)

View (UI)

Notifies

Changes

Notifies Controller Notifies (Logic)

http://professional-guru.com


Hello HTML: <p>Hello World!</p>

http://professional-guru.com


• Hello Javascript: <p id="greeting1"></p> <script> var isIE = document.attachEvent; var addListener = isIE ? function(e, t, fn) { e.attachEvent('on' + t, fn);} : function(e, t, fn) { e.addEventListener(t, fn, false);}; addListener(document, 'load', function(){ var greeting = document.getElementById('greeting1'); if (isIE) { greeting.innerText = 'Hello World!'; } else { greeting.textContent = 'Hello World!'; } }); </script> http://professional-guru.com


Hello Jquery: <p id="greeting2"></p> <script> $(function(){ $('#greeting2').text('Hello World!'); }); </script>

http://professional-guru.com


Hello AngularJS: <p ng:init="greeting = 'Hello World!'">{{greeting}}</p>

http://professional-guru.com


Angular JS Applications: • Angular JS modules define Angular JS applications. • Angular JS controllers control Angular JS applications. • The ng-app directive defines the application, the ng-controller directive defines the controller.

http://professional-guru.com


Angular JS Expressions: • Angular JS expressions can be written inside double braces: {{ expression }}. • Angular JS expressions can also be written inside a directive: ng-bind="expression". • Angular JS will resolve the expression, and return the result exactly where the expression is written

http://professional-guru.com


AngularJS Modules: • An Angular JS module defines an application. • The module is a container for the different parts of an application. • The module is a container for the application controllers. • Controllers always belong to a module.

http://professional-guru.com


Angular JS Directives: • Angular JS lets you extend HTML with new attributes called Directives. • Angular JS has a set of built-in directives which offers functionality to your applications. • Angular JS also lets you define your own directives.

http://professional-guru.com


Angular JS Directives: • Angular JS directives are extended HTML attributes with the prefix ng-. • The ng-app directive initializes an Angular JS application. • The ng-init directive initializes application data. • The ng-model directive binds the value of HTML controls (input, select, textarea) to application data.

http://professional-guru.com


Angular JS Controllers: • Angular JS controllers control the data of Angular JS applications. • Angular JS controllers are regular JavaScript Objects. • Angular JS applications are controlled by controllers. • The ng-controller directive defines the application controller. • A controller is a JavaScript Object, created by a standard JavaScript object constructor.

http://professional-guru.com


Angular JS Services: •In Angular JS you can make your own service, or use one of the many built-in services. •What is a Service? •In Angular JS, a service is a function, or object, that is available for, and limited to, your Angular JS application. •Angular JS has about 30 built-in services. One of them is the $location service.

http://professional-guru.com


Angular JS Global API: • The Angular JS Global API is a set of global JavaScript functions for performing common tasks like: • Comparing objects • Iterating objects • Converting data • The Global API functions are accessed using the angular object.

http://professional-guru.com


Turn static files into dynamic content formats.

Create a flipbook
Issuu converts static files into: digital portfolios, online yearbooks, online catalogs, digital photo albums and more. Sign up and create your flipbook.