Angular JS tutorial by professionalguru
A brief Introduction : â&#x20AC;¢ 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
â&#x20AC;˘ Why Angular JS ? Other frameworks deal with HTMLâ&#x20AC;&#x2122;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
â&#x20AC;¢ 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