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
Tài liệu đang bị lỗi
File tài liệu này hiện đang bị hỏng, chúng tôi đang cố gắng khắc phục.
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