Bootstrap

AngularJs

單頁面應用（前端分離）

響應式設計（不通設備不同視圖）

數據導向（JSON）

Bootstrap

開發響應式和移動優先的

https://getbootstrap.com/

<!DOCTYPE html>
<html lang="zh-cn">
<!-- 上面兩句爲HTML5的doctype -->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 上面3個meta標籤必須是head的頭三個標籤，其餘的head內標籤在此3個之後The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Bootstrap基本模板</title>

<!-- Bootstrap的CSS -->
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">

<!-- HTML5 shim and Respond.js用來讓IE8支持HTML5元素和媒體查詢 -->

<!--[if lt IE 9]>
      <script src="js/html5shiv.min.js"></script>
      <script src="js/respond.min.js"></script>
    <![endif]-->
</head>
<body>
	<h1>你好, Bootstrap!</h1>
	<div class="row">
		<div class="col-md-1">.col-md-1</div>
		<div class="col-md-1">.col-md-1</div>  //要12個
	</div>
	<div class="row">
		<div class="col-md-8">.col-md-8</div>
		<div class="col-md-4">.col-md-4</div>
	</div>
	<div class="row">
		<div class="col-md-4">.col-md-4</div>
		<div class="col-md-4">.col-md-4</div>
		<div class="col-md-4">.col-md-4</div>
	</div>
	<div class="row">
		<div class="col-md-6">.col-md-6</div>
		<div class="col-md-6">.col-md-6</div>
	</div>


	<!-- jQuery是Bootstrap腳本插件必須的 -->
	<script src="js/jquery.min.js"></script>
	<!-- 包含所有編譯的插件 -->
	<script src="bootstrap/js/bootstrap.min.js"></script>
</body>
</html>

行用row，列用 col-md-數字，所有加起來要爲12

Angular JS

https://angularjs.org/

<!doctype html>
<html ng-app><!-- 1 --> angularjs 起效的範圍，整個頁面有效
  <head>
  	<meta charset="utf-8">
    <script src="js/angular.min.js"></script><!-- 2 --> 載入js
  </head>
  <body>
    <div>
      <label>名字:</label>
      <input type="text" ng-model="yourName" placeholder="輸入你的名字"><!-- 3
		定義前端的數據模型，模型的名稱youName
		-->
        
      <hr>
      <h1>你好 {{yourName}}!</h1><!-- 4 --> 取值，兩個括號
    </div>
  </body>
</html>

AngularJS 純頁面的 MVC，即：實現了視圖模板，數據模型，代碼控制。

數據綁定：將視圖和數據模型綁定在一起。

如果視圖變了，則模型的值就變了，則視圖也會跟着改變。

xml

<?xml version="1.0" encoding="UTF-8"?>
<projec >
	<modelVersion>4.0.0</modelVersion>

	<groupId>com.wisely</groupId>
	<artifactId>ch7_7</artifactId>
	<version>0.0.1-SNAPSHOT</version>
	<packaging>jar</packaging>

	<name>ch7_7</name>
	<description>Demo project for Spring Boot</description>

	<parent>
		<groupId>org.springframework.boot</groupId>
		<artifactId>spring-boot-starter-parent</artifactId>
		<version>1.3.0.M1</version>
		<relativePath/> <!-- lookup parent from repository -->
	</parent>

	<properties>
		<project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
		<java.version>1.8</java.version>
	</properties>

	<dependencies>
	
		<dependency>
			<groupId>org.springframework.boot</groupId>
			<artifactId>spring-boot-starter-web</artifactId>
		</dependency>
		
		<dependency>
			<groupId>org.springframework.boot</groupId>
			<artifactId>spring-boot-starter-test</artifactId>
			<scope>test</scope>
		</dependency>
	</dependencies>
	
	<build>
		<plugins>
			<plugin>
				<groupId>org.springframework.boot</groupId>
				<artifactId>spring-boot-maven-plugin</artifactId>
			</plugin>
		</plugins>
	</build>

</project>

製作導航

src/main/resources/static/action.html

<!DOCTYPE html>
<html lang="zh-cn" ng-app="actionApp">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>實戰</title>

<!-- Bootstrap的CSS -->
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link href="jqueryui/jquery-ui.min.css" rel="stylesheet">
<style type="text/css">

.content {
  padding: 100px 15px;
  text-align: center;
}
</style>

<!--[if lt IE 9]>
      <script src="js/html5shiv.min.js"></script>
      <script src="js/respond.min.js"></script>
    <![endif]-->
</head>
<body>
	<nav class="navbar navbar-inverse navbar-fixed-top">
      <div class="container">
        
        <div id="navbar" class="collapse navbar-collapse">
          <ul class="nav navbar-nav">
            <li><a href="#/oper">後臺交互</a></li>
            <li><a href="#/directive">自定義指令</a></li>
          </ul>
        </div><!--/.nav-collapse -->
      </div>
    </nav>
	
	
     <div class="content">
        <ng-view></ng-view> 
    </div>
	<script src="js/jquery.min.js"></script>
	<script src="jqueryui/jquery-ui.min.js"></script>
	<script src="bootstrap/js/bootstrap.min.js"></script>
	<script src="js/angular.min.js"></script>
	<script src="js/angular-route.min.js"></script>
	<script src="js-action/app.js"></script>
	<script src="js-action/directives.js"></script>
	<script src="js-action/controllers.js"></script>
</body>
</html>

模塊和路由的定義

src/main/resources/static/js-action/app.js

var actionApp = angular.module('actionApp',['ngRoute']);

actionApp.config(['$routeProvider' , function($routeProvider) {
	
	$routeProvider.when('/oper', { 
		controller: 'View1Controller', 
		templateUrl: 'views/view1.html', 
	}).when('/directive', {
		controller: 'View2Controller',
		templateUrl: 'views/view2.html',
	});

}]);

控制器定義

controllers.js

actionApp.controller('View1Controller', ['$rootScope', '$scope', '$http', function($rootScope, $scope,$http) {
    $scope.$on('$viewContentLoaded', function() {
    	console.log('頁面加載完成');
    });
    
    
    $scope.search = function(){
      personName = $scope.personName;
      $http.get('search',{
    	  params:{personName:personName}
      }).success(function(data){
    	 $scope.person=data;
      });;
     
    };
}]);

actionApp.controller('View2Controller', ['$rootScope', '$scope',  function($rootScope, $scope) {
    $scope.$on('$viewContentLoaded', function() {
    	console.log('頁面加載完成');
    });
}]);

view1的界面

src/main/resources/static/views/view1.html

  <div class="row">
    <label for="attr" class="col-md-2 control-label">名稱</label>
    <div class="col-md-2">
      <input type="text" class="form-control" ng-model="personName">
    </div>
    <div class="col-md-1">
    	<button class="btn btn-primary" ng-click="search()">查詢</button>
    </div>
  </div>
  
   <div class="row">
     <div class="col-md-4">
		  <ul class="list-group">
		  	<li class="list-group-item">名字： {{person.name}}</li>
		  	<li class="list-group-item">年齡：  {{person.age}}</li>
		  	<li class="list-group-item">地址：  {{person.address}}</li>
		  </ul>
  </div>
  </div>

服務端代碼

public class Person { //提供get set
	private String name;
	private Integer age;
	private String address;
	
	
	public Person() {
		super();
	}
	public Person(String name, Integer age, String address) {
		super();
		this.name = name;
		this.age = age;
		this.address = address;
	}
}



@RestController
@SpringBootApplication
public class Ch77Application {
	
	@RequestMapping(value="/search",produces={MediaType.APPLICATION_JSON_VALUE})
	public Person search(String personName){
		return new Person(personName, 32, "hefei");
		
	}

    public static void main(String[] args) {
        SpringApplication.run(Ch77Application.class, args);
    }
}

自定義指令

directives.js

actionApp.directive('datePicker',function(){
    return {
        restrict: 'AC',
        link:function(scope,elem,attrs){
           // scope.treeObj = $.fn.zTree.init(elem, scope.settings);
            
            elem.datepicker();
        }
    };
});

view2 的頁面自定義指令

static/views/view2.html

  <div class="row">
    <label for="attr" class="col-md-2 control-label">屬性形式</label>
    <div class="col-md-2">
      <input type="text" class="form-control" date-picker>
    </div>
  </div>
  
  <div class="row">
    <label for="style" class="col-md-2 control-label">樣式形式</label>
    <div class="col-md-2">
      <input type="text" class="form-control date-picker" >
    </div>
  </div>

EE顛覆者7章web開發2 現代web

Bootstrap

Angular JS

xml

製作導航

模塊和路由的定義

控制器定義

view1的界面

服務端代碼

自定義指令

view2 的頁面自定義指令

使用c#強大的表達式樹實現對象的深克隆之解決循環引用的問題

GPT-4o 引領人機交互新風向，向量數據庫賽道沸騰了

痞子衡嵌入式：恩智浦i.MX RT1xxx系列MCU啓動那些事（12.A）- uSDHC eMMC啓動時間(RT1170)

企業大模型如何成爲自己數據的“百科全書”？

本地SSL證書過期輸入命令在IIS自動生成

基於Ubuntu-22.04安裝K8s-v1.28.2實驗（二）使用kube-vip實現集羣VIP訪問

.NET週刊【5月第2期 2024-05-12】

深入淺出boot2.0 第17章 cloud 和完結篇

深入淺出boot2.0 16章部署，測試和監控

深入淺出boot2.0 第15章，搶購商品（悲觀樂觀鎖 redis處理併發）

深入淺出boot2.0 第14章 webFlux

深入淺出boot2.0 第13章3 定時任務包含我的整理（非socket）

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結

EE顛覆者7章web開發2 現代web

Bootstrap

Angular JS

xml

製作導航

模塊和路由的定義

控制器定義

view1的界面

服務端代碼

自定義指令

view2 的頁面 自定義指令

view2 的頁面自定義指令