Download presentation
Presentation is loading. Please wait.
1
The Cliff Notes Version
jQuery and Angularjs The Cliff Notes Version
2
Why Frameworks? Advanced JavaScript programming (especially the complex handling of browser differences), can often be very difficult and time-consuming to work with. To deal with these difficulties, a lot of JavaScript (helper) libraries have been developed. These JavaScript libraries are often called JavaScript frameworks. All of these frameworks have functions for common JavaScript tasks like animations, DOM manipulation, and Ajax handling.
3
jQuery jQuery is the most popular JavaScript framework on the Internet today. It uses CSS selectors to access and manipulate HTML elements (DOM Objects) on a web page. jQuery also provides a companion UI (user interface) framework and numerous other plug-ins. Many of the largest companies on the Web use jQuery: Google Microsoft IBM Netflix
4
jQuery jQuery is a lightweight, "write less, do more", JavaScript library. The purpose of jQuery is to make it much easier to use JavaScript on your website. jQuery takes a lot of common tasks that require many lines of JavaScript code to accomplish, and wraps them into methods that you can call with a single line of code. jQuery also simplifies a lot of the complicated things from JavaScript, like AJAX calls and DOM manipulation.
5
jQuery jQuery, at its core, is a DOM manipulation library.
Beyond basic DOM selecting and manipulation, jQuery provides a new paradigm for event handling in Javascript. The advantages of using jQuery are: Separates Javascript and HTML Brevity and Clarity Eliminates cross-browser incompatibilities Extensible
6
jQUery Features The jQuery library contains the following features:
HTML/DOM manipulation CSS manipulation HTML event methods Effects and animations AJAX Utilities
7
Installing / Including jQuery
There are several ways to start using jQuery on your web site. You can: Download the jQuery library from jQuery.com <head> <script src="jquery min.js"></script> </head> Include jQuery from a CDN, like Google <script src=" /jquery/1.11.1/jquery.min.js"></script>
8
jQuery Syntax The jQuery syntax is tailor made for selecting HTML elements and performing some action on the element(s). Basic syntax is: $(selector).action() A $ sign to define/access jQuery A (selector) to "query (or find)" HTML elements A jQuery action() to be performed on the element(s)
9
jQuery Syntax jQuery uses CSS syntax to select element. We can use 3 kinds of selectors, just like CSS. $(this).hide() - hides the current element. $("p").hide() - hides all <p> elements. $(".test").hide() - hides all elements with class="test". $("#test").hide() - hides the element with id="test".
10
External jQuery If your website contains a lot of pages, and you want your jQuery functions to be easy to maintain, you can put your jQuery functions in a separate .js file. <head> <script src=" </script> <script src="my_jquery_functions.js"></script> </head>
11
Angularjs AngularJS is a JavaScript framework. It can be added to an HTML page with a <script> tag. AngularJS extends HTML attributes with Directives, and binds data to HTML with Expressions. <script src=" 1.2.26/angular.min.js"></script>
12
Extending HTML with Angularjs
AngularJS extends HTML with ng-directives. The ng-app directive defines an AngularJS application. The ng-model directive binds the value of HTML controls (input, select, textarea) to application data. The ng-bind directive binds application data to the HTML view.
13
Angularjs Expressions
Expressions are written inside double braces: {{ expression }}. AngularJS expressions binds data to HTML the same way as the ng- bind directive. AngularJS will "output" data exactly where the expression is written. AngularJS expressions are much like JavaScript expressions: They can contain literals, operators, and variables. Example {{ }} or {{ firstName + " " + lastName }}
14
Angularjs Directives AngularJS directives are extended HTML attributes with the prefix ng-. The ng-app directive initializes an AngularJS application. The ng-init directive initializes application data. The ng-model directive binds the value of HTML controls (input, select, textarea) to application data.
Similar presentations
