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

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>Web Tin Hoc</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>
	<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.8.1/font/bootstrap-icons.css">

	<!-- 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">
		.navbar {
			background-color: #c83b4c !important;
			padding: 0px !important;
			margin: 0px !important;
		}

		.navbar a {
			color: white !important;
		}

		.navbar ul li {
			padding: 8px !important;
		}

		.navbar ul li:hover {
			background-color: #aa3543 !important;
		}
	</style>
</head>
<body ng-controller="MyController">
<div class="container">
	<img src="https://ugc.futurelearn.com/uploads/images/03/d4/hero_03d40e20-30e1-4a97-9b5f-31c8b64bc827.png" style="height: 100px">
</div>

<nav class="navbar navbar-expand-sm bg-light navbar-light">
  <div class="container">
    <ul class="navbar-nav">
      <li class="nav-item" ng-repeat="menu in menuList track by $index">
        <a class="nav-link active" href="#{{ menu }}">{{ menu }}</a>
      </li>
    </ul>
  </div>
</nav>

<div class="container">
	<div class="row">
		<div class="col-md-9">
			<h1 style="margin-bottom: 20px">LATEST NEWS</h1>
			<div class="row" ng-repeat="item in latestNews track by $index" style="margin-bottom: 20px">
				<div class="col-md-6">
					<img src="{{ item.thumbnail }}" style="width: 100%" alt="{{ item.title }}">
				</div>
				<div class="col-md-6">
					<label style="font-size: 22px; text-align: justify;">{{ item.title }}</label>
					<p style="margin-top: 20px; text-align: justify;">{{ item.short_desc }}</p>
				</div>
			</div>
		</div>
		<div class="col-md-3">
			<div class="input-group mb-3" style="margin-top: 20px; margin-bottom: 20px;">
			  <input type="text" class="form-control" placeholder="Search" style="background-color: #e8e8e8; color: black;">
			  <button class="btn" type="submit" style="background-color: #e8e8e8; color: black;"><i class="bi bi-search"></i></button>
			</div>
			<h3 style="margin-bottom: 20px;">BAI VIET XEM NHIEU NHAT</h3>

			<div class="row" ng-repeat="item in bestNews track by $index" style="margin-bottom: 20px">
				<div class="col-md-5">
					<img src="{{ item.thumbnail }}" style="width: 100%" alt="{{ item.title }}">
				</div>
				<div class="col-md-7">
					<label style="font-size: 18px; text-align: justify;">{{ item.title }}</label>
				</div>
			</div>
		</div>
	</div>
</div>

<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 = []
		for (var i = 0; i < 5; i++) {
			$scope.latestNews.push({
				'thumbnail': 'https://gokisoft.com/uploads/stores/49/2021/10/bai-tap-c-program.jpg',
				'title': 'Bài tập - Tạo bảng quản lý Survey online - AngularJS',
				'short_desc': 'Bài tập - Tạo bảng quản lý Survey online - AngularJS & Bài tập - Tạo bảng quản lý Survey online - AngularJS & Bài tập - Tạo bảng quản lý Survey online - AngularJS'
			})
		}

		$scope.bestNews = []
		for (var i = 0; i < 12; i++) {
			$scope.bestNews.push({
				'thumbnail': 'https://gokisoft.com/uploads/stores/49/2021/10/bai-tap-c-program.jpg',
				'title': 'Bài tập - Tạo bảng quản lý Survey online - AngularJS'
			})
		}
	}])
</script>
</body>
</html>

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

#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 đó