By GokiSoft.com| 09:18 16/09/2022|
AngularJS

[Video] Single Page Application (SPA) trong AngularJS - C2010G


#about.html


<h1>About Page</h1>


#contact.html


<h1>Contact</h1>


#home.html


<h1>Home Page</h1>


#news.html


<h1>News</h1>


#product.html


<div class="container" ng-controller="ProductController">
	<div class="row">
		<div class="col-md-3" ng-repeat="item in productList">
			<img src="{{item.thumbnail}}" style="width: 100%">
			<h5>{{item.title}}</h5>
			<h5>{{item.price}} VND</h5>
		</div>
	</div>
</div>


#readme.txt


u뚀


#route.html


<!DOCTYPE html>
<html ng-app="MyApp">
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>SPA tutorial</title>

	<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>
</head>
<body ng-controller="MyController">
<nav class="navbar navbar-expand-sm bg-light">
  <div class="container-fluid">
    <ul class="navbar-nav">
      <li class="nav-item">
        <a class="nav-link" href="#!home">Home</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#!about">About</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#!products">Products</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#!news">News</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#!contact">Contact</a>
      </li>
    </ul>
  </div>
</nav>

<!-- Noi dung khac nhau cun tung page -->
<div ng-view></div>
<!-- Noi dung khac nhau cua tung page -->

<div class="container">
  <div class="row">
    <div class="col-md-3">
      <h4>About Us</h4>
      <ul>
        <li ng-repeat="v in dataList">{{v}}</li>
      </ul>
    </div>
    <div class="col-md-3">
      <h4>Latest Products</h4>
      <ul>
        <li ng-repeat="v in dataList">{{v}}</li>
      </ul>
    </div>
    <div class="col-md-3">
      <h4>Latest News</h4>
      <ul>
        <li ng-repeat="v in dataList">{{v}}</li>
      </ul>
    </div>
    <div class="col-md-3">
      <h4>Follow Us</h4>
      <ul>
        <li ng-repeat="v in dataList">{{v}}</li>
      </ul>
    </div>
  </div>
</div>

<script type="text/javascript">
  var app = angular.module('MyApp', ["ngRoute"])

  app.config(function($routeProvider) {
      $routeProvider
      .when("/", {
          templateUrl : "home.html"
      })
      .when("/home", {
          templateUrl : "home.html"
      })
      .when("/about", {
          templateUrl : "about.html"
      })
      .when("/products", {
          templateUrl : "product.html",
          controller: "ProductController"
      })
      .when("/news", {
          templateUrl : "news.html"
      })
      .when("/contact", {
          templateUrl : "contact.html"
      });
  });

  app.controller('MyController', ['$scope', function ($scope) {
    $scope.dataList = ["Vi du 1", "Vi du 2", "Vi du 3"]
  }])
</script>

<script type="text/javascript">
  app.controller('ProductController', ['$scope', function ($scope) {

    $scope.productList = []
    for (var i = 0; i < 20; i++) {
      $scope.productList.push({
        'thumbnail': 'https://gokisoft.com/uploads/stores/49/2021/10/coding-c-program.jpg',
        'title': 'San pham ' + i,
        'price': '100,000'
      })
    }
    
  }])
</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">
	<title>AngularJS for beginer</title>
	<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>
</head>
<body>
	<div ng-controller="MyController1">
		<h1>{{ title }}</h1>

		<div ng-controller="MyController4">
			{{msg}}
		</div>

		<button class="btn btn-success" ng-click="changeMsg()">Test</button>
	</div>
	<div ng-controller="MyController2">
		<h1>{{ title }}</h1>
	</div>
	<div ng-controller="MyController3">
		<h1>{{ title }}</h1>
	</div>

<script type="text/javascript">
	var app = angular.module('MyApp', [])

	app.controller('MyController4', ['$scope', function ($scope) {
		$scope.msg = "Test OKOK"
	}])

	app.controller('MyController1', ['$scope', function ($scope) {
		$scope.title = "Vi du 1"
		$scope.msg = "Sinh vien Aptech"

		$scope.changeMsg = function() {
			$scope.msg = "Xin chao ..."
		}
	}])

	app.controller('MyController2', ['$scope', function ($scope) {
		$scope.title = "Vi du 2"
	}])
	app.controller('MyController3', ['$scope', function ($scope) {
		$scope.title = "Vi du 3"
	}])
</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 đó