By GokiSoft.com| 19:35 10/10/2022|
AngularJS

[Source Code] Hướng dẫn tạo dự án Single Page Application SPA trong AngularJS - C2206L

#input.html

<div class="card mt-3" ng-controller="InputController">
	<div class="card-header bg-info text-white">
		CONTACT US
	</div>
	<div class="card-body">
		<form method="post" ng-submit="saveData()">
			<div class="form-group mb-3">
				<label>Full Name: </label>
				<input required type="text" name="fullname" class="form-control" placeholder="Enter fullnane" ng-model="fname">
			</div>
			<div class="form-group mb-3">
				<label>Email: </label>
				<input required type="email" name="email" class="form-control" placeholder="Enter email" ng-model="email">
			</div>
			<div class="form-group mb-3">
				<label>Phone Number: </label>
				<input required type="telno" name="phone" class="form-control" placeholder="Enter phone" ng-model="phone">
			</div>
			<div class="form-group mb-3">
				<label>Subject: </label>
				<input required type="text" name="subject" class="form-control" placeholder="Enter subject" ng-model="subject">
			</div>
			<div class="form-group mb-3">
				<label>Message: </label>
				<textarea required rows="5" class="form-control" ng-model="msg"></textarea>
			</div>
			<div class="form-group mb-3">
				<button class="btn btn-success">Save Data</button>
				<button class="btn btn-warning" type="button" ng-click="resetData()">Reset Form</button>
			</div>
		</form>
	</div>
</div>

#list.html

<div class="card mt-3" ng-controller="ListController">
	<div class="card-header bg-warning text-white">
		CONTACT MANAGEMENT
	</div>
	<div class="card-body">
		<input type="text" name="s" placeholder="Enter search ..." class="form-control" style="width: 300px" ng-model="s">
		
		<table class="table table-bordered table-hover mt-3">
			<thead>
				<tr>
					<th>STT</th>
					<th>Full Name</th>
					<th>Email</th>
					<th>Phone</th>
					<th>Subject</th>
					<th>Message</th>
					<th style="width: 50px;"></th>
					<th style="width: 50px;"></th>
				</tr>
			</thead>
			<tbody>
				<tr ng-repeat="item in feedbackList">
					<td>{{ $index + 1 }}</td>
					<td>{{ item.fullname | uppercase }}</td>
					<td>{{ item.email | lowercase }}</td>
					<td>{{ item.phone }}</td>
					<td>{{ item.subject }}</td>
					<td>{{ item.message }}</td>
					<td>
						<button class="btn btn-warning" ng-click="editItem(item.id)">Edit</button>
					</td>
					<td>
						<button class="btn btn-danger" ng-click="deleteItem(item.id)">Delete</button>
					</td>
				</tr>
			</tbody>
		</table>
	</div>
</div>

#readme.txt

SPA:
	- input.html -> mang
	- list.html -> show danh sach phan hoi nguoi dung da them

#test.html

<!DOCTYPE html>
<html ng-app="MyApp">
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/css/bootstrap.min.css" rel="stylesheet">
	<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/js/bootstrap.bundle.min.js"></script>
	<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
	<title>Dependences Injection in AngularJS for beginner</title>
</head>
<body>
<div class="container" ng-controller="MyController1">
	{{fullname}} - {{abc}}
	<ul>
		<li>{{std.fullname}}</li>
		<li>{{std.address}}</li>
	</ul>

	<ul>
		<li>{{subject.subjectName}}</li>
	</ul>
</div>
<div class="container" ng-controller="MyController2">
	{{fullname}}
	<ul>
		<li>{{std.fullname}}</li>
		<li>{{std.address}}</li>
	</ul>

	<ul>
		<li>{{subject.subjectNo}}</li>
	</ul>
</div>

<script type="text/javascript">
	var app = angular.module('MyApp', [])
	var stdJs = {
		'fullname': 'A',
		'address': 'Ha Noi'
	}

	app.value('fullname', 'TRAN VAN A')
	app.value('std', stdJs)

	app.constant('abc', 'OKOK')

	app.provider('subject', [function () {
		this.$get = [function() {
			return {
				"subjectNo": "S01",
				"subjectName": "Lap Trinh C"
			};
		}];
	}])

	app.factory('subjectFactory', [function () {
		return {
			"subjectNo": "S01",
			"subjectName": "Lap Trinh C"
		};
	}])

	app.service('subjectService', [function () {
		this.subjectNo = 'S01'
		this.subjectName = 'HTML/CSS/JS'

		this.test = function() {
			console.log('~~~ OKOK ~~~')
		}
	}])

	app.controller('MyController1', ['$scope', 'fullname', 'std', 'abc', 'subjectService', function ($scope, fullname, std, abc, subjectService) {
		$scope.fullname = fullname
		$scope.std = std
		$scope.abc = abc
		$scope.subject = subjectService

		stdJs.fullname = 'Xin chao !!! OKOK'

		subjectService.test()
	}])

	app.controller('MyController2', ['$scope', 'fullname', 'std', 'subject', function ($scope, fullname, std, subject) {
		$scope.fullname = fullname
		$scope.std = std
		$scope.subject = subject
	}])
</script>
</body>
</html>

#vidu.html

<!DOCTYPE html>
<html ng-app="MyApp">
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/css/bootstrap.min.css" rel="stylesheet">
	<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/js/bootstrap.bundle.min.js"></script>
	<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
	<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular-route.js"></script>
	<title>Feedback Management APP</title>
</head>
<body>

<div class="container">
	<nav class="navbar navbar-expand-sm bg-light">
	  <div class="container-fluid">
	    <!-- Links -->
	    <ul class="navbar-nav">
	      <li class="nav-item">
	        <a class="nav-link" href="#!list">Feedback List</a>
	      </li>
	      <li class="nav-item">
	        <a class="nav-link" href="#!input">Add Feedback</a>
	      </li>
	    </ul>
	  </div>
	</nav>
</div>

<div class="container">
	<div ng-view></div>
</div>

<script type="text/javascript">
	var feedbackList = []

	var app = angular.module('MyApp', ["ngRoute"])

	app.value('feedbackList', feedbackList)

	app.config(function($routeProvider) {
	    $routeProvider
	    .when("/", {
	        templateUrl : "list.html",
	        controller: "ListController"
	    })
	    .when("/list", {
	        templateUrl : "list.html",
	        controller: "ListController"
	    })
	    .when("/input", {
	        templateUrl : "input.html",
	        controller: "InputController"
	    });
	});

	app.controller('InputController', ['$scope', 'feedbackList', function ($scope, feedbackList) {
		$scope.saveData = function() {
			var feedback = {
				"fullname": $scope.fname,
				"email": $scope.email,
				"phone": $scope.phone,
				"subject": $scope.subject,
				"message": $scope.msg
			}
			feedbackList.push(feedback)
		}

		$scope.resetData = function() {
			$scope.fname = ""
			$scope.email = ""
			$scope.phone = ""
			$scope.subject = ""
			$scope.msg = ""
		}
	}])

	app.controller('ListController', ['$scope', 'feedbackList', function ($scope, feedbackList) {
		$scope.feedbackList = feedbackList
	}])
</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 đó