Thư viện tri thức trực tuyến
Kho tài liệu với 50,000+ tài liệu học thuật
© 2023 Siêu thị PDF - Kho tài liệu học thuật hàng đầu Việt Nam
Angular
Nội dung xem thử
Mô tả chi tiết
Angular
Bj¨orn Rudzewitz
University of T¨ubingen
November 26, 2019
Bj¨orn Rudzewitz (University of T¨ubingen) Angular T¨ubingen, November 26, 2019 1 / 92
Plan
1 Introduction
2 Setup of an Angular Project
3 Components
4 Expressions
5 Event Handling
6 Data Binding
7 Directives
8 Event Handling
9 Observables
10 Services
11 Services
Bj¨orn Rudzewitz (University of T¨ubingen) Angular T¨ubingen, November 26, 2019 2 / 92
Why Angular?
https://www.madewithangular.com/
cross-platform development
template-based approach
highly scalable platform
good tool support
continually improved and supported by Google
Bj¨orn Rudzewitz (University of T¨ubingen) Angular T¨ubingen, November 26, 2019 3 / 92
Angular Design Features
modules: code encapsulated in separate modules/files
directives: re-usable, modular functions and UI components
services: re-usable tasks
data binding: data and display of it are connected bi-directionally
dependency injection: easy linking of dependencies
Bj¨orn Rudzewitz (University of T¨ubingen) Angular T¨ubingen, November 26, 2019 4 / 92
Installing Angular
prerequisites:
node.js
npm
run npm install -g @angular/cli
Exercise
Install angular on your machine.
Bj¨orn Rudzewitz (University of T¨ubingen) Angular T¨ubingen, November 26, 2019 5 / 92
Installing Angular
prerequisites:
node.js
npm
run npm install -g @angular/cli
Exercise
Install angular on your machine.
Bj¨orn Rudzewitz (University of T¨ubingen) Angular T¨ubingen, November 26, 2019 5 / 92
Angular Example Project
angular allows to create an example starter project
testing whether the framework and dependencies are working
using an example project as a starting point for own project
Bj¨orn Rudzewitz (University of T¨ubingen) Angular T¨ubingen, November 26, 2019 6 / 92
Angular Example Project
ng new myproject
cd myproject
ng serve
then open http://localhost:4200/ in browser
Exercise
Create an example angular project, open it in a browser, and inspect the
structure of the generated directory.
Bj¨orn Rudzewitz (University of T¨ubingen) Angular T¨ubingen, November 26, 2019 7 / 92
Angular Example Project
ng new myproject
cd myproject
ng serve
then open http://localhost:4200/ in browser
Exercise
Create an example angular project, open it in a browser, and inspect the
structure of the generated directory.
Bj¨orn Rudzewitz (University of T¨ubingen) Angular T¨ubingen, November 26, 2019 7 / 92