[Angular] bài 2, IN OUT trong AngularJS
Bài đăng này đã không được cập nhật trong 3 năm
Xin chào các bạn, trong bài lần trước, mình đã giới thiệu qua cho các bạn về Angular, những kiên thức cơ bản và tự chạy project đầu tiên.
Hôm nay, mình sẽ hướng dẫn các bạn cách IN OUT data trong Angular.
Nhưng trước tiên, chúng ta phải liên kết project với thư viện của Angular đã.
Do vậy, hôm nay mình xin phép thay đổi một chút so với bài 1.
chúng ta sẽ dùng 5 file dưới đây:
) FILE 1: package.json
{
"name": "project_angular",
"version": "1.0.0",
"description": "The first angular Project",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"postinstall": "bower install",
"prestart": "npm install",
"start": "http-server -a 0.0.0.0 -p 8000 -c-1 ./app"
},
"author": "MinhLD",
"license": "ISC",
"dependencies": {
"bower": "^1.7.9",
"http-server": "^0.9.0"
},
"repository": {
"type": "git",
"url": "git://github.com/username/repository.git"
},
"readme": "README.md"
}
) FILE 2: bower.json
{
"name": "project_angular",
"description": "The first angular Project",
"authors": "MinhLD",
"dependencies": {
"angular": "1.5.x",
"jquery": "2.2.x"
}
}
) FILE 3: .bowerrc
{
"directory": "app/bower_components",
"interactive": false
}
PS: directory là app/bower_components vì file index nằm ở vị trí app/index.html
) FILE 4: index.html nằm ở vị trí app/index.html
<!DOCTYPE html>
<html>
<head>
<title>Angular Project</title>
<script src="bower_components/angular/angular.js"></script>
</head>
<body>
<h1>The first angular Project</h1>
</body>
</html>
PS: Chúng ta thêm đoạn script vào để input angular.js vào project
và giờ chúng ta chạy lệnh:
bower install
npm start
Nếu các bạn muốn kiểm tra xem file angular.js đã được load hay chưa?
chúng ta chạy link: http://127.0.0.1:8000/ và F12 vào phần Network xong F5 lại rùi gõ angular.js vào ô Filter. Nếu không có File angular.js thì chứng tỏ link script của bạn đã src sai nguồn
OK, giờ chúng ta đã cấy được angular.js vào project, và chúng ta bắt đầu với phần đầu tiên
I) Hiển thị trong Angular
chúng ta sẽ thử show ra màn hình một đoạn nào đó.
ví dụ: ####welcome to angular series
chúng ta sẽ thử chạy đoạn code dưới đây.
File index.html
<!DOCTYPE html>
<html>
<head>
<title>Angular Project</title>
<script src="bower_components/angular/angular.js"></script>
</head>
<body ng-app="" ng-init="value ='Welcome to Angular Series'">
<h1>{{value}}</h1>
</body>
</html>
và dữ liệu hiện ra
Ở đây, chúng ta sử dụng 2 phần tử, ng-app và ng-init và giờ chúng ta sẽ xem chức năng của chúng
và giờ bạn thử bỏ ng-app đi và ta được:
<!DOCTYPE html>
<html>
<head>
<title>Angular Project</title>
<script src="bower_components/angular/angular.js"></script>
</head>
<body ng-init="value ='Welcome to Angular Series'">
<h1>{{value}}</h1>
</body>
</html>
Kết luận 1
Khi có ng-app thì angularJS sẽ hoạt động
Kết luận 2
Chắc không cần phải nói, bạn nào nhìn vào cũng biết ng-init để khai báo dữ liệu mặc định trong Angular
tiếp theo chúng ta sẽ xem xét vùng hoạt động của ng-app
giờ chúng ta sẽ xem một ví dụ:
cho vào file index đoạn HTML dưới đây:
<!DOCTYPE html>
<html>
<head>
<title>Angular Project</title>
<script src="bower_components/angular/angular.js"></script>
</head>
<body>
<div ng-app="" ng-init="value ='Welcome to Angular Series'">
<h1 style="color: green">{{value}}</h1>
</div>
<h1 style="color: red">outsite body, value: {{value}}</h1>
</body>
</html>
và chúng ta có kết quả:
Chúng ta thấy rõ, ng-app chỉ hoạt động trong vùng của thẻ div được gán ng-app, còn dữ liệu ở vùng ngoài thì không bị tác động
II)Các cách hiển thị các loại dữ liệu trong Angular
Bên trên, chúng ta đã biết cách để gán và đưa ra dữ liệu trong Angular, và dưới đây là các loại dữ liệu khi chúng ta muốn hiển thị.
1) dữ liệu đơn lẻ
<html>
<head>
<title>Angular Project</title>
<script src="bower_components/angular/angular.js"></script>
</head>
<body ng-app="" ng-init="string='minhteo'; number='12345'; symbol='!@#$%^&*()'; special='\''">
<h1>String: {{string}}</h1>
<h1>Number: {{number}}</h1>
<h1>Symbol: {{symbol}}</h1>
<h1>special: {{special}}</h1>
</body>
</html>
2) Dữ liệu dạng mảng
Chúng ta sẽ test thử với đoạn HTML dưới đây
<!DOCTYPE html>
<html>
<head>
<title>Angular Project</title>
<script src="bower_components/angular/angular.js"></script>
</head>
<body ng-app="" ng-init="array=[1, 2, 3, minh,'hello every']">
<h2 ng-repeat='variable in array'>{{variable}}</h2>
</body>
</html>
Kết luận
Đối với dữ liệu dạng mảng, chúng ta sẽ dùng ng-repeat để đọc từng dữ liệu từ mảng array và gán vào phần tử variable và hiển thị ra ngoài
Đặc biệt: như hình vẽ chữ minh không được hiển thị là do code đang hiểu đó là biến chứ không phải là giá trị, muốn hiển thị cả chữ minh chúng ta sẽ đổi thành
array=[1, 2, 3, 'minh','hello every']
và kết quả sẽ là
3) Dữ liệu dạng Object
<html>
<head>
<title>Angular Project</title>
<script src="bower_components/angular/angular.js"></script>
</head>
<body ng-app="" ng-init="self={'name':'Minh','country':'vietnam', 'sex':'men', 'company':'framgia'}">
<h2>Name: {{self.name}}</h2>
<h2>Country: {{self.country}}</h2>
<h2>Sex: {{self.sex}}</h2>
<h2>Company: {{self.company}}</h2>
</body>
</html>
Kết luận
Chúng ta hoàn toàn có thể lưu trữ và hiển thị dữ liệu dưới dạng object
III) Kết luận
Trên đây, chúng ta đã có thể hiểu được phần nào các cách hiển thị của Angular, và trong bài tới, mình sẽ hướng dẫn các bạn các cách Input dữ liệu và Angular.
Xin chào và hẹn gặp lại
All rights reserved
