AngularJSTutorial.pdf - I Angular JS Tutorial About the Tutorial AngularJS is a very powerful JavaScript library It is used in Single Page

AngularJSTutorial.pdf - I Angular JS Tutorial About the...

This preview shows page 1 - 5 out of 92 pages.

I
Image of page 1
Angular JS Tutorial i About the Tutorial AngularJS is a very powerful JavaScript library. It is used in Single Page Application (SPA) projects. It extends HTML DOM with additional attributes and makes it more responsive to user actions. AngularJS is open source, completely free, and used by thousands of developers around the world. It is licensed under the Apache license version 2.0. This tutorial teaches you basics of AngularJS and its programming concepts. It describes the components of AngularJS with suitable examples. Audience This tutorial is designed for software professionals who are willing to learn AngularJS programming in simple and easy steps. After completing this tutorial, you will be at intermediate level of expertise from where you can take yourself to higher level of expertise. Prerequisites You should have basic understanding of scripting language such as JavaScript, and any text editor. You should also know the basic web technologies such as HTML, CSS, AJAX etc. for learning to develop web applications using Angular JS. Disclaimer & Copyright Copyright 2014 by Tutorials Point (I) Pvt. Ltd. All the content and graphics published in this e-book are the property of Tutorials Point (I) Pvt. Ltd. The user of this e-book is prohibited to reuse, retain, copy, distribute or republish any contents or a part of contents of this e-book in any manner without written consent of the publisher. We strive to update the contents of our website and tutorials as timely and as precisely as possible, however, the contents may contain inaccuracies or errors. Tutorials Point (I) Pvt. Ltd. provides no guarantee regarding the accuracy, timeliness or completeness of our website or its contents including this tutorial. If you discover any errors on our website or in this tutorial, please notify us at [email protected]
Image of page 2
Angular JS Tutorial ii Contents About the Tutorial ................................................................................................................................................. i Audience ................................................................................................................................................................ i Prerequisites .......................................................................................................................................................... i Disclaimer & Copyright .......................................................................................................................................... i Contents ................................................................................................................................................................ ii 1. Overview ...................................................................................................................................................... 1 General Features .................................................................................................................................................. 1 Core Features ........................................................................................................................................................ 1 Concepts ............................................................................................................................................................... 2 Advantages of AngularJS ...................................................................................................................................... 3 Disadvantages of AngulaJS ................................................................................................................................... 4 AngularJS Directives ............................................................................................................................................. 4 2. Environment ................................................................................................................................................. 5 Example ................................................................................................................................................................ 6 Include AngularJS .................................................................................................................................................. 7 Point to AngularJS app ......................................................................................................................................... 8 View ...................................................................................................................................................................... 8 Controller .............................................................................................................................................................. 8 Execution .............................................................................................................................................................. 9 3. MVC architecture ........................................................................................................................................ 10 The model ........................................................................................................................................................... 11 The view .............................................................................................................................................................. 11 The controller ...................................................................................................................................................... 11 4. First Application .......................................................................................................................................... 12 Creating AngularJS Application .......................................................................................................................... 12 Step 1: Load framework .................................................................................... 12 Step 2: Define AngularJS application using ng-app directive. .................................. 12 Step 3: Define a model name using ng-model directive. ......................................... 12 Step 4: Bind the value of above model defined using ng-bind directive. ................... 12 Executing AngularJS Application ........................................................................................................................ 12 Output ................................................................................................................................................................ 13 How AngularJS integrates with HTML ................................................................................................................ 14 5. Directives .................................................................................................................................................... 15 ng-app directive .................................................................................................................................................. 15
Image of page 3
Angular JS Tutorial iii ng-init directive ................................................................................................................................................... 15 ng-model directive .............................................................................................................................................. 16 ng-repeat directive ............................................................................................................................................. 16 Example .............................................................................................................................................................. 16 Output ................................................................................................................................................................ 17 6. Expressions ................................................................................................................................................. 19 Using numbers .................................................................................................................................................... 19 Using String ........................................................................................................................................................ 19 Using Object ....................................................................................................................................................... 19 Using Array ......................................................................................................................................................... 19 Example .............................................................................................................................................................. 19 Output ................................................................................................................................................................ 20 7. Controllers .................................................................................................................................................. 21 Example .............................................................................................................................................................. 22 Output ................................................................................................................................................................ 23 8. Filters .......................................................................................................................................................... 25 Uppercase Filter .................................................................................................................................................. 25 Lowercase Filter .................................................................................................................................................. 25 Currency Filter .................................................................................................................................................... 25 Filter Filter .......................................................................................................................................................... 26 Orderby Filter ...................................................................................................................................................... 26 Example .............................................................................................................................................................. 26 Output ................................................................................................................................................................ 28 9. Tables ......................................................................................................................................................... 30 Example .............................................................................................................................................................. 31 Output ................................................................................................................................................................ 33 10. HTML dom .................................................................................................................................................. 35 ng-disabled Directive .......................................................................................................................................... 35 ng-show Directive ............................................................................................................................................... 35
Image of page 4
Image of page 5

  • Left Quote Icon

    Student Picture

  • Left Quote Icon

    Student Picture

  • Left Quote Icon

    Student Picture