By GokiSoft.com|
15:24 14/02/2022|
AngularJS
[Video] Tìm hiểu AngularJS - Các thành phần cơ bản trong AngularJS - C2110I
#vidu.html
<!DOCTYPE html>
<html ng-app="MyApp" ng-init="a=5;b=10;">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Calculator Online</title>
<!-- Nhung thu vien bootstrap -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
<!-- Nhung js angularjs vao du an (Framework) -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<style type="text/css">
.form-group {
margin-bottom: 15px;
}
</style>
</head>
<body ng-controller="MyController">
<!-- Build UI: Calculator -->
<div class="container">
<h1 style="text-align: center;">Calculator Online</h1>
<div class="form-group">
<label>Nhap X: </label>
<input type="number" name="x" placeholder="Nhap X" class="form-control" ng-model="x">
</div>
<div class="form-group">
<label>Nhap Y: </label>
<input type="number" name="y" placeholder="Nhap Y" class="form-control" ng-model="y">
</div>
<div class="form-group">
<label>Ket Qua: {{ result }}</label>
</div>
<div class="form-group">
<button class="btn btn-success" ng-click="tinhtong()">+</button>
<button class="btn btn-warning" ng-click="tinhhieu()">-</button>
<button class="btn btn-info" ng-click="tinhtich()">*</button>
<button class="btn btn-danger" ng-click="tinhthuong()">/</button>
</div>
<input type="text" name="title-name" class="form-control" placeholder="Enter title" ng-model="title">
<p>{{ title }}</p>
<!-- For Example: Expression -->
<p>a + b = {{ a + b }}</p>
<p>{{ "Sinh vien Aptech" }}</p>
<p>{{ 5 }}</p>
<p>{{ 5 + 6 }}</p>
<h2>Hien Thi Thong Tin Sinh Vien</h2>
<!-- Binding thong tin sinh vien -> hien thi ra view -->
<ul>
<li>Ho ten: {{ student.fullname }}</li>
<li>Tuoi: {{ student.age }}</li>
<li>Dia Chi: {{ student.address }}</li>
</ul>
<h2>Danh Sach Sinh Vien</h2>
<!-- Loop: Binding danh sach sinh vien -->
<table class="table table-bordered">
<thead>
<tr>
<th>No</th>
<th>FullName</th>
<th>Age</th>
<th>Address</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="std in studentList">
<td>{{ $index + 1 }}</td>
<td>{{ std.fullname }}</td>
<td>{{ std.age }}</td>
<td>{{ std.address }}</td>
</tr>
</tbody>
</table>
<h2>Danh Sach Mon Hoc</h2>
<!-- Binding mang thong tin mon hoc -->
<ul>
<li>{{ subjectList[0] }}</li>
<li>{{ subjectList[1] }}</li>
<li>{{ subjectList[2] }}</li>
<li>{{ subjectList[3] }}</li>
<li>{{ subjectList[4] }}</li>
</ul>
<!-- Su dung loop: binding du lieu -->
<h2>Loop: Danh Sach Mon Hoc</h2>
<ul>
<li ng-repeat="subject in subjectList">{{ subject }}</li>
</ul>
</div>
<script type="text/javascript">
var app = angular.module('MyApp', [])
app.controller('MyController', ['$scope', function ($scope) {
// Binding data -> init data: de hieu hon
$scope.title = 'Sinh vien Aptech'
$scope.x = 0
$scope.y = 0
$scope.result = 0
// Khai bao su kien tai day
$scope.tinhtong = function() {
$scope.result = $scope.x + $scope.y
}
$scope.tinhhieu = function() {
$scope.result = $scope.x - $scope.y
}
$scope.tinhtich = function() {
$scope.result = $scope.x * $scope.y
}
$scope.tinhthuong = function() {
$scope.result = $scope.x / $scope.y
}
// Khai niem object trong angularjs
// Khai bao 1 doi sinh vien nhu sau
$scope.student = {
'fullname': 'Tran Van A',
'age': 20,
'address': 'Ha Noi'
}
$scope.studentList = [
{
'fullname': 'Tran Van A',
'age': 20,
'address': 'Ha Noi'
}, {
'fullname': 'Tran Van B',
'age': 22,
'address': 'Ha Noi'
}, {
'fullname': 'Tran Van C',
'age': 18,
'address': 'Ha Noi'
}
]
// Khai niem Array trong angularjs
// Khai bao mang mon hoc
$scope.subjectList = ["C Programming", "HTML/CSS/JS", "Bootstrap/jQuery", "AngularJS", "SQL Server", "PHP/Laravel", "eProject I"]
}])
</script>
</body>
</html>#vidu-js.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Calculator Online</title>
<!-- Nhung thu vien bootstrap -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
<style type="text/css">
.form-group {
margin-bottom: 15px;
}
</style>
</head>
<body>
<!-- Build UI: Calculator -->
<div class="container">
<h1 style="text-align: center;">Calculator Online</h1>
<div class="form-group">
<label>Nhap X: </label>
<input type="number" id="x_id" name="x" placeholder="Nhap X" class="form-control">
</div>
<div class="form-group">
<label>Nhap Y: </label>
<input type="number" id="y_id" name="y" placeholder="Nhap Y" class="form-control">
</div>
<div class="form-group">
<label id="ketqua_id">Ket Qua: </label>
</div>
<div class="form-group">
<button class="btn btn-success" onclick="tinhtong()">+</button>
<button class="btn btn-warning" onclick="tinhhieu()">-</button>
<button class="btn btn-info" onclick="tinhtich()">*</button>
<button class="btn btn-danger" onclick="tinhthuong()">/</button>
</div>
<input type="text" id="title-input" name="title" class="form-control" placeholder="Enter title" onkeyup="updateTitle()">
<p id="title-label"></p>
</div>
<script type="text/javascript">
function updateTitle() {
var titleInput = document.getElementById('title-input').value
var titleLabel = document.getElementById('title-label')
titleLabel.innerHTML = titleInput
}
var xTag = document.getElementById('x_id')
var yTag = document.getElementById('y_id')
var resultTag = document.getElementById('ketqua_id')
function tinhtong() {
s = parseFloat(xTag.value) + parseFloat(yTag.value)
resultTag.innerHTML = 'Ket Qua: ' + s
}
function tinhhieu() {
s = parseFloat(xTag.value) - parseFloat(yTag.value)
resultTag.innerHTML = 'Ket Qua: ' + s
}
function tinhtich() {
s = parseFloat(xTag.value) * parseFloat(yTag.value)
resultTag.innerHTML = 'Ket Qua: ' + s
}
function tinhthuong() {
s = parseFloat(xTag.value) / parseFloat(yTag.value)
resultTag.innerHTML = 'Ket Qua: ' + s
}
</script>
</body>
</html>Tags:
Phản hồi từ học viên
5
(Dựa trên đánh giá ngày hôm nay)
