[Video] Thiết kế website tin học sử dụng AngularJS - C2108G3

Thiết kế website tin học sử dụng AngularJS
#index.html

Name: ZicZac: Thiết kế web & app & quản lý tồn kho
Address: Số 08 Tôn Thất Thuyết, Cầu Giấy, Hà Nội, Nam Từ Liêm, Hà Nội, 100000
Telephone: 0967025996
Price range: $$$
<!DOCTYPE html>
<html ng-app="MyApp">
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>Website tin học sử dụng AngularJS</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.7.2/angular.min.js"></script>

    <style type="text/css">
    	.navbar {
    		background-color: #c83b4c !important;
    		padding: 0px !important;
    	}

    	.navbar .nav-item a {
    		color: white;
    		padding: 12px;
    		font-weight: bold;
    	}

    	.navbar .nav-item:hover {
    		background-color: #aa3644 !important;
    	}
    </style>
</head>
<body ng-controller="MyController">
<section class="header">
	<div class="container">
		<img src="https://all-digital.org/wp-content/uploads/2018/02/CODINC-logo-600x323-rgb.png" style="height: 100px">
	</div>
	<nav class="navbar navbar-expand-sm bg-light">
	  <div class="container">
	    <ul class="navbar-nav">
	    	<!-- Generate bang AngularJS -->
	    	<!-- Bat hien thi 1 muc menu -->
			<li class="nav-item" ng-repeat="v in menuList track by $index">
				<a class="nav-link" href="#{{ v }}">{{ v }}</a>
			</li>
			<!-- Ket thuc hien thi 1 menu -->
	    </ul>
	  </div>
	</nav>
</section>
<section class="main" style="margin-top: 10px;">
	<div class="container">
		<div class="row">
			<div class="col-md-9">
				<h2>Latest Articles</h2>
				<!-- Hien thi 1 item -->
				<div class="row" ng-repeat="item in latestNews track by $index" style="margin-bottom: 15px">
					<div class="col-md-6">
						<img src="{{ item.thumbnail }}" style="width: 100%;">
					</div>
					<div class="col-md-6">
						{{ item.title }}
						<p>{{ item.short_des }}</p>
						<p style="color: red;">Doc them</p>
					</div>
				</div>
				<!-- Ket thuc hien thi thong tin Item -->
			</div>
			<div class="col-md-3">
				<h4>Bai Viet Xem Nhieu Nhat</h4>
				<!-- Hien thi 1 item -->
				<div class="row" ng-repeat="item in bestNews track by $index">
					<div class="col-md-5">
						<img src="{{ item.thumbnail }}" style="width: 100%;">
					</div>
					<div class="col-md-7">
						{{ item.title }}
					</div>
				</div>
				<!-- Ket thuc hien thi thong tin Item -->
			</div>
		</div>
	</div>
</section>

<script type="text/javascript">
	var app = angular.module('MyApp', [])
	app.controller('MyController', ['$scope', function ($scope) {
		$scope.menuList = ["Trang Chủ", "Series bài viêt", "Tài nguyên", "Khóa học", "Công cụ"]

		$scope.latestNews = [
			{
				"thumbnail": "https://photo-baomoi.zadn.vn/w700_r16x9_sm/2022_02_18_15_41792722/84b1999b03d9ea87b3c8.jpg",
				"title": "Knock-out Europa League: Barcelona hòa thót tim, Dortmund thua thảm",
				"short_des": "Tiếp Napoli ở trận đấu được xem là chung kết sớm của giải, Barcelona suýt vỡ mộng với 90 phút giao chiến vô cùng nhọc nhằn tại sân nhà Nou Camp."
			}, {
				"thumbnail": "https://gokisoft.com/uploads/2021/03/01-gioi-thieu-ve-lap-trinh-web-htmlcss.jpg",
				"title": "Knock-out Europa League: Barcelona hòa thót tim, Dortmund thua thảm",
				"short_des": "Tiếp Napoli ở trận đấu được xem là chung kết sớm của giải, Barcelona suýt vỡ mộng với 90 phút giao chiến vô cùng nhọc nhằn tại sân nhà Nou Camp."
			}, {
				"thumbnail": "https://gokisoft.com/uploads/2021/03/01-gioi-thieu-ve-lap-trinh-web-htmlcss.jpg",
				"title": "Knock-out Europa League: Barcelona hòa thót tim, Dortmund thua thảm",
				"short_des": "Tiếp Napoli ở trận đấu được xem là chung kết sớm của giải, Barcelona suýt vỡ mộng với 90 phút giao chiến vô cùng nhọc nhằn tại sân nhà Nou Camp."
			}, {
				"thumbnail": "https://photo-baomoi.zadn.vn/w700_r16x9_sm/2022_02_18_15_41792722/84b1999b03d9ea87b3c8.jpg",
				"title": "Knock-out Europa League: Barcelona hòa thót tim, Dortmund thua thảm",
				"short_des": "Tiếp Napoli ở trận đấu được xem là chung kết sớm của giải, Barcelona suýt vỡ mộng với 90 phút giao chiến vô cùng nhọc nhằn tại sân nhà Nou Camp."
			}, {
				"thumbnail": "https://gokisoft.com/uploads/2021/03/01-gioi-thieu-ve-lap-trinh-web-htmlcss.jpg",
				"title": "Knock-out Europa League: Barcelona hòa thót tim, Dortmund thua thảm",
				"short_des": "Tiếp Napoli ở trận đấu được xem là chung kết sớm của giải, Barcelona suýt vỡ mộng với 90 phút giao chiến vô cùng nhọc nhằn tại sân nhà Nou Camp."
			}
		]

		$scope.bestNews = [
			{
				"thumbnail": "https://photo-baomoi.zadn.vn/w700_r16x9_sm/2022_02_18_15_41792722/84b1999b03d9ea87b3c8.jpg",
				"title": "Knock-out Europa League: Barcelona hòa thót tim, Dortmund thua thảm"
			}, {
				"thumbnail": "https://photo-baomoi.zadn.vn/w700_r16x9_sm/2022_02_18_15_41792722/84b1999b03d9ea87b3c8.jpg",
				"title": "Knock-out Europa League: Barcelona hòa thót tim, Dortmund thua thảm"
			}, {
				"thumbnail": "https://photo-baomoi.zadn.vn/w700_r16x9_sm/2022_02_18_15_41792722/84b1999b03d9ea87b3c8.jpg",
				"title": "Knock-out Europa League: Barcelona hòa thót tim, Dortmund thua thảm"
			}, {
				"thumbnail": "https://photo-baomoi.zadn.vn/w700_r16x9_sm/2022_02_18_15_41792722/84b1999b03d9ea87b3c8.jpg",
				"title": "Knock-out Europa League: Barcelona hòa thót tim, Dortmund thua thảm"
			}, {
				"thumbnail": "https://photo-baomoi.zadn.vn/w700_r16x9_sm/2022_02_18_15_41792722/84b1999b03d9ea87b3c8.jpg",
				"title": "Knock-out Europa League: Barcelona hòa thót tim, Dortmund thua thảm"
			}, {
				"thumbnail": "https://photo-baomoi.zadn.vn/w700_r16x9_sm/2022_02_18_15_41792722/84b1999b03d9ea87b3c8.jpg",
				"title": "Knock-out Europa League: Barcelona hòa thót tim, Dortmund thua thảm"
			}, {
				"thumbnail": "https://photo-baomoi.zadn.vn/w700_r16x9_sm/2022_02_18_15_41792722/84b1999b03d9ea87b3c8.jpg",
				"title": "Knock-out Europa League: Barcelona hòa thót tim, Dortmund thua thảm"
			}, {
				"thumbnail": "https://photo-baomoi.zadn.vn/w700_r16x9_sm/2022_02_18_15_41792722/84b1999b03d9ea87b3c8.jpg",
				"title": "Knock-out Europa League: Barcelona hòa thót tim, Dortmund thua thảm"
			}, {
				"thumbnail": "https://photo-baomoi.zadn.vn/w700_r16x9_sm/2022_02_18_15_41792722/84b1999b03d9ea87b3c8.jpg",
				"title": "Knock-out Europa League: Barcelona hòa thót tim, Dortmund thua thảm"
			}, {
				"thumbnail": "https://photo-baomoi.zadn.vn/w700_r16x9_sm/2022_02_18_15_41792722/84b1999b03d9ea87b3c8.jpg",
				"title": "Knock-out Europa League: Barcelona hòa thót tim, Dortmund thua thảm"
			}, {
				"thumbnail": "https://photo-baomoi.zadn.vn/w700_r16x9_sm/2022_02_18_15_41792722/84b1999b03d9ea87b3c8.jpg",
				"title": "Knock-out Europa League: Barcelona hòa thót tim, Dortmund thua thảm"
			}, {
				"thumbnail": "https://photo-baomoi.zadn.vn/w700_r16x9_sm/2022_02_18_15_41792722/84b1999b03d9ea87b3c8.jpg",
				"title": "Knock-out Europa League: Barcelona hòa thót tim, Dortmund thua thảm"
			}, {
				"thumbnail": "https://photo-baomoi.zadn.vn/w700_r16x9_sm/2022_02_18_15_41792722/84b1999b03d9ea87b3c8.jpg",
				"title": "Knock-out Europa League: Barcelona hòa thót tim, Dortmund thua thảm"
			}, {
				"thumbnail": "https://photo-baomoi.zadn.vn/w700_r16x9_sm/2022_02_18_15_41792722/84b1999b03d9ea87b3c8.jpg",
				"title": "Knock-out Europa League: Barcelona hòa thót tim, Dortmund thua thảm"
			}
		]
	}])
</script>
</body>
</html>
[Video] Thiết kế website tin học sử dụng AngularJS - C2108G3

#index.html

Tags:

Phản hồi từ học viên

5

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

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