IAD LAB 9_2k14_AngularJS_v2 - Internet Application Development Laboratory 09 UET TAXILA Lab Engr Sidra Shafi AngularJS AngularJS is a very powerful

IAD LAB 9_2k14_AngularJS_v2 - Internet Application...

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

Internet Application Development Laboratory # 09 UET TAXILA Lab Engr. Sidra Shafi
Image of page 1
AngularJS AngularJS is a very powerful JavaScript Framework. 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. Example 1: <!doctype html> <html ng-app> <head> <script src = ""></script> </head> <body> <div> <label>Name:</label> <input type = "text" ng-model = "yourName" placeholder = "Enter a name here"> <hr /> <h1>Hello {{yourName}}!</h1> </div> </body> </html> Advantages of AngularJS: 1. AngularJS provides capability to create Single Page Application in a very clean and maintainable way. 2. AngularJS provides data binding capability to HTML thus giving user a rich and responsive experience 3. AngularJS code is unit testable. 4. With AngularJS, developers write less code and get more functionality. 5. In AngularJS, views are pure html pages, and controllers written in JavaScript do the business processing.
Image of page 2
AngularJS applications can run on all major browsers and smart phones including Android and iOS based phones/tablets. Disadvantages of AngularJS: Though AngularJS comes with lots of plus points but same time we should consider the following points − 1. Not Secure − Being JavaScript only framework, application written in AngularJS are not safe. Server side authentication and authorization is must to keep an application secure. 2. Not degradable − If your application user disables JavaScript then user will just see the basic page and nothing more. The AngularJS Components: The AngularJS framework can be divided into following three major parts − ng-app − This directive defines and links an AngularJS application to HTML. ng-model − This directive binds the values of AngularJS application data to HTML input controls. ng-bind − This directive binds the AngularJS Application data to HTML tags. AngularJS - Environment Setup: 1. Use the file given with manual to use AngularJS library. 2. You can also use the library using online reference as in Example 1. AngularJS - First Application Steps to create AngularJS Application Step 1 − Load framework Being a pure JavaScript framework, it can be added using <Script> tag. <script src = ""> </script> Step 2 − Define AngularJS Application using ng-app directive <div ng-app = "">
Image of page 3
... </div> Step 3 − Define a model name using ng-model directive <p>Enter your Name: <input type = "text" ng-model = "name"></p> Step 4 − Bind the value of above model defined using ng-bind directive. <p>Hello <span ng-bind = "name"></span>!</p> Steps to run AngularJS Application Use above mentioned three steps in an HTML page.
Image of page 4
Image of page 5

  • Left Quote Icon

    Student Picture

  • Left Quote Icon

    Student Picture

  • Left Quote Icon

    Student Picture