FALLSEM2020-21_ITE1002_ETH_VL2020210105027_Reference_Material_I_08-Sep-2020_Angular_JS_-_Scope_objec - <!doctype html><html><head> <script src = Include

FALLSEM2020-21_ITE1002_ETH_VL2020210105027_Reference_Material_I_08-Sep-2020_Angular_JS_-_Scope_objec

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

<!doctype html><html><head> <script src = " "></script></head> <body ng-app = "myapp"> <div ng-controller = "HelloController" > <h2>Welcome {{helloTo.title}} to the world of Web Technology!</h2> </div><script> angular.module("myapp", []).controller("HelloController", function($scope) { $scope.helloTo = {}; $scope.helloTo.title = "AngularJS"; });</script></body></html> R.Vijayani / Asso Prof / SITE / VIT 40 Include AngularJS Point to AngularJS app View Controller
Image of page 1
R.Vijayani / Asso Prof / SITE / VIT 41 Include AngularJS included the AngularJS JavaScript file in the HTML page so we can use AngularJS Point to AngularJS app tell what part of the HTML contains the AngularJS app either add it to html element or body element View ng-controller tells AngularJS what controller to use with this view. helloTo.title tells AngularJS to write the "model" value named helloTo.title to the HTML at this location. Controller code registers a controller function named HelloController in the angular module named myapp . The $scope parameter passed to the controller function is the model . The controller function adds a helloTo JavaScript object, and in that object it adds a title field.
Image of page 2
When the page is loaded in the browser, following things happen: R.Vijayani / Asso Prof / SITE / VIT 42 HTML document is loaded into the browser, and evaluated by the browser. AngularJS JavaScript file is loaded, the angular global object is created. Next, JavaScript which registers controller functions is executed. Next AngularJS scans through the HTML to look for AngularJS apps and views. Once view is located, it connects that view to the corresponding controller function. Next,AngularJS executes the controller functions. It then renders the views with data from the model populated by the controller.The page is now ready.
Image of page 3
AngularJS $ Scope R.Vijayani / Asso Prof / SITE / VIT 43 It is the binding part between the HTML (view) and the JavaScript (controller). It is an object with the available properties and methods. It is available for both the view and the controller. If we consider an AngularJS application to consist of: View , which is the HTML.
Image of page 4
Image of page 5

You've reached the end of your free preview.

Want to read all 21 pages?

  • Summer '19
  • Document Object Model, HTML element, AngularJS, body ng-app

  • Left Quote Icon

    Student Picture

  • Left Quote Icon

    Student Picture

  • Left Quote Icon

    Student Picture

\nPoint to AngularJS app\n\n
\n

Welcome {helloT","type":"","course_id":11059040,"doc_date":"2020-09-23 05:18:58","filehash":"7633292c5aeb725941978ebde6d176b85c9a3bf2","user_id":100000798080906,"pages":0,"metadata":{"id":68713328,"type":"document","helpfuls":0,"unhelpfuls":0,"downloads":"0","unlocks":0,"views":1,"upload_date":"2020-09-23 05:18:58","page_count":21,"thumb_url":"//coursehero.s3.amazonaws.com/7633292c5aeb725941978ebde6d176b85c9a3bf2_th.jpg?X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=AKIAIAYW2E6VOLDTI35A%2F20210225%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20210225T055142Z&X-Amz-SignedHeaders=host&X-Amz-Expires=60&X-Amz-Signature=cf5ff8bfffd8ba4cf26361fb81709267361da80599651001494be76faf0a2fb1"},"thumbnail":"https://www.coursehero.com/thumb/76/33/7633292c5aeb725941978ebde6d176b85c9a3bf2_180.jpg","thumbnail_on_error":"https://www.coursehero.com/view_thumbnail.php?filehash=7633292c5aeb725941978ebde6d176b85c9a3bf2&size=180","username":"LieutenantElectron36","resource_url":"https://www.coursehero.com/file/68713328/FALLSEM2020-21-ITE1002-ETH-VL2020210105027-Reference-Material-I-08-Sep-2020-Angular-JS-Scope-objec/"},"tags":[{"subject":"Document Object Model","href":"/subjects/document-object-model/","valid_taxonomy":false,"taxonomy_type":"subject"},{"subject":"HTML element","href":"/subjects/html-element/","valid_taxonomy":false,"taxonomy_type":"subject"},{"subject":"AngularJS","href":"/subjects/angularjs/","valid_taxonomy":false,"taxonomy_type":"subject"},{"subject":"body ng-app","href":"/subjects/body-ng-app/","valid_taxonomy":false,"taxonomy_type":"subject"}],"ratingCount":0,"ratingPercentage":0,"displayName":"LieutenantElectron36"}