13_AngularJS_COMP3322_f2017.pdf - COMP 3322 Modern Technologies on World Wide Web 1st semester 2017-2018 AngularJS(O2 Dr C Wu Department of Computer

13_AngularJS_COMP3322_f2017.pdf - COMP 3322 Modern...

This preview shows page 1 - 8 out of 29 pages.

Dr. C Wu Department of Computer Science The University of Hong Kong AngularJS (O2) 1st semester 2017-2018 COMP 3322 Modern Technologies on World Wide Web
Image of page 1
More about Express.js Working with client-side frameworks AngularJS : a client-side model–view–controller (MVC) framework Bootstrap : an HTML, CSS, and JavaScript framework for developing responsive, mobile-first web sites ( bootstrap/ ) etc. The MEAN software stack: MongoDB, Express.js, AngularJS, and Node.js
Image of page 2
Overview AngularJS (or Angular , or Angular.js ) is a JavaScript -based open- source front-end web application framework mainly maintained by Google, started 2009. used on the websites of NBC, Intel, Sprint, ABC News, etc. designed for developing single-page applications Single-page application ( SPA ) is a web application that fits on a single web page the page does not completely reload or transfer to another page to provide a user experience similar to that of a desktop application all HTML, JavaScript, CSS codes are retrieved with a single page load, or dynamically loaded in response to user actions (e.g., through AJAX requests) examples at
Image of page 3
MVC AngularJS implements the MVC pattern to separate presentation, data, and logic components Model-View-Controller ( MVC ) is a software design pattern model captures behaviour of an application in terms of data and logic view can be any output representation of data controller controls model and view In AngularJS, the HTML page is the view , which is embedded with AngularJS custom tag attributes ( directives ). AngularJS binds input or output data to a model, represented by standard JavaScript variables. The values of those JavaScript variables can be manipulated by JavaScript function ( controller ).
Image of page 4
An example AngularJS application < !DOCTYPE html > < html > < script src =""> < /script > < body > < div ng-app="myApp" ng-controller=" myCtrl "> First Name: < input type ="text" ng-model ="firstName">< br > Last Name: < input type ="text" ng-model ="lastName">< br > < br > Full Name: {{firstName + " " + lastName}} < /div > < script > var app = angular.module( ' myApp ' , []); app.controller( ' myCtrl ' , function ($scope) { $scope.firstName= "Tom" ; $scope.lastName= "Cruise" ; }); < /script > < /body > < /html > AngularJS is a JavaScript framework, added to an HTML page in <script></script> directive expression an AngularJS module defines an AngularJS application AngularJS extends HTML attributes with directives , and binds data to HTML with expressions
Image of page 5
< !DOCTYPE html > < html > < script src =""> < /script > < body > < div ng-app="myApp" ng-controller=" myCtrl "> First Name: < input type ="text" ng-model ="firstName">< br > Last Name: < input type ="text" ng-model ="lastName">< br > < br > Full Name: {{firstName + " " + lastName}} < /div > < script > var app = angular.module( ' myApp ' , []); app.controller( ' myCtrl ' , function ($scope) { $scope.firstName= "Tom" ; $scope.lastName= "Cruise" ; }); < /script > < /body > < /html > Directives ng-app directive defines an AngularJS application. In this example, the <div> element is where the AngularJS application will run
Image of page 6
< !DOCTYPE html > < html > < script src ="">
Image of page 7
Image of page 8

You've reached the end of your free preview.

Want to read all 29 pages?

  • Left Quote Icon

    Student Picture

  • Left Quote Icon

    Student Picture

  • Left Quote Icon

    Student Picture