By GokiSoft.com| 09:38 07/02/2022|
AngularJS

[Video] Hướng dẫn tìm hiểu về AngularJS - Tìm hiểu directive trong AngularJS - C2108G3


#vidu.html


<!DOCTYPE html>
<html ng-app="MyApp" ng-init="y=5;z=7;">
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>AngularJS tutorial</title>
	<!-- Bootstrap -> thiet ke GUI -->
	<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>

	<!-- AngularJS -> framework (js) -> duoc viet bang js (library js) -> file .js -> nhung cdn vao web -->
	<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>

	<!-- Tai lieu -->
	<!-- Video: https://www.youtube.com/watch?v=rh7czHOJ7g0&list=PLMPBVRu4TjAyMXvTNZEykrcJiiYngcrBq -->
	<!-- W3School: https://www.w3schools.com/angular/angular_intro.asp -->
	<!-- AngularJS: https://docs.angularjs.org/tutorial -->

	<!-- Luu y: hoc -> thuc hanh & thi -> ly thuyet (ko thi thuc hanh -> portal (Aptech An Do)) -->
</head>
<body ng-controller="MyController">
	<div class="container">
		<div class="form-group">
			<label>Test Biding Data: </label>
			<input type="text" name="content" class="form-control" placeholder="Enter content" ng-model="content">
		</div>
		{{ content }}
		<p>
			{{ 1 + 2 }}
		</p>
		<p>
			{{ x + 2 }}
		</p>
		<p>y + z = {{ y + z }}</p>
		<ul>
			<li>Ho ten: {{ student.fullname }}</li>
			<li>Tuoi: {{ student.age }}</li>
			<li>Dia Chi: {{ student.address }}</li>
		</ul>

		<ul>
			<!-- Truy van du lieu trong Array theo Index -->
			<li>{{ languages[0] }}</li>
			<li>{{ languages[1] }}</li>
			<li>{{ languages[2] }}</li>
		</ul>

		<!-- Su dung vong lap (loop) trong angularjs -->
		<h2>Danh Sach Mon Hoc</h2>
		<ul>
			<li ng-repeat="v in languages">{{ v }}</li>
		</ul>

		<div class="form-group">
			<label>A: </label>
			<input type="text" name="a" class="form-control" placeholder="Enter a" ng-model="a">
		</div>

		<div class="form-group">
			<label>B: </label>
			<input type="text" name="b" class="form-control" placeholder="Enter b" ng-model="b">
		</div>
		<button class="btn btn-success" ng-click="tinhtong()">+</button>
		<button class="btn btn-warning" ng-click="tinhhieu()">-</button>
		<button class="btn btn-danger" ng-click="tinhtich()">*</button>
		<button class="btn btn-info" ng-click="tinhthuong()">/</button>

		<p style="font-size: 20px">Result: <font style="color: red">{{ result }}</font></p>
	</div>

<script type="text/javascript">
	// Khai bao
	var app = angular.module('MyApp', [])
	app.controller('MyController', function($scope) {
		//Trien khai code -> quan ly du lieu & event
		$scope.content = 'Sinh Vien'
		$scope.x = 5

		// Khai niem object trong AngularJS
		$scope.student = {
			"fullname": "Tran Van A",
			"age": 20,
			"address": "Ha Noi"
		}

		// Array trong AngularJS
		$scope.languages = ['Lap Trinh C', 'HTML/CSS/JS', 'Bootstrap/jQuery', 'AngularJS', 'SQL Server', 'PHP/Laravel']

		// Event trong angularjs
		$scope.tinhtong = function() {
			$scope.result = parseFloat($scope.a) + parseFloat($scope.b)
		}

		$scope.tinhhieu = function() {
			$scope.result = $scope.a - $scope.b
		}

		$scope.tinhtich = function() {
			$scope.result = $scope.a * $scope.b
		}

		$scope.tinhthuong = function() {
			$scope.result = $scope.a / $scope.b
		}
	})

	// function tinhtong() {
	// }

	// function tinhhieu() {
	// }
</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>AngularJS tutorial</title>
	<!-- Bootstrap -> thiet ke GUI -->
	<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>

	<!-- Tai lieu -->
	<!-- Video: https://www.youtube.com/watch?v=rh7czHOJ7g0&list=PLMPBVRu4TjAyMXvTNZEykrcJiiYngcrBq -->
	<!-- W3School: https://www.w3schools.com/angular/angular_intro.asp -->
	<!-- AngularJS: https://docs.angularjs.org/tutorial -->

	<!-- Luu y: hoc -> thuc hanh & thi -> ly thuyet (ko thi thuc hanh -> portal (Aptech An Do)) -->
</head>
<body>
	<div class="container">
		<div class="form-group">
			<label>Test Biding Data: </label>
			<input type="text" name="content" id="content-id" class="form-control" placeholder="Enter content" onkeyup="bidingData()">
		</div>
		<label id="view-content"></label>
	</div>

<script type="text/javascript">
	function bidingData() {
		var v = document.getElementById('content-id').value
		document.getElementById('view-content').innerHTML = v
	}
</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)

Đăng nhập để làm bài kiểm tra

Chưa có kết quả nào trước đó