ng-template的script指令_script ng-template-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_41617901/article/details/108889385

这篇博客探讨了在AngularJS中如何利用ng-template和script标签的id属性，通过$routeProvider来映射视图和控制器，实现动态加载页面。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

	<head>

		<title>

			AngularJs ng-template Directive Example

		</title>
		<script src="../../../prepared/js/angular-1.5.5/angular.js" ></script>
		<script src="../../../prepared/js/angular-1.5.5/angular-route.js"></script>

		<script>
			var myApp = angular.module("AngularngtemplateApp", ['ngRoute']);

			myApp.config(['$routeProvider',

				function($routeProvider) {

					$routeProvider.when('/test1', {
							templateUrl: 'test1.html'
						})

						.when('/test2', {
							templateUrl: 'test2.html'
						})

						.when('/test3', {
							templateUrl: 'test3.html'
						});

				}

			]);

			myApp.controller('ngtemplatectrl', function($scope) {

				$scope.text = 'Hello';

			});
		</script>

	</head>

	<body ng-app="AngularngtemplateApp">

		<div ng-controller="ngtemplatectrl">

			<script type="text/ng-template" id="test1.html">

				This list denotes the first list element.

			</script>

			<script type="text/ng-template" id="test2.html">

				<h3>This is the header of the second list.</h3>

			</script>

			<script type="text/ng-template" id="test3.html">

				<b>The ng-template directive is magical</b>

			</script>

			<ul>

				<li>
					<a href="#/test1">list1</a>
				</li>

				<li>
					<a href="#/test2">list2</a>
				</li>

				<li>
					<a href="#/test3">list3</a>
				</li>

			</ul>

			<div ng-view>

			</div>

		</div>

	</body>

</html>

在上面的script指令中

	<script type="text/ng-template" id="test1.html">

				This list denotes the first list element.

			</script>

	<ul>

				<li>
					<a href="#/test1">list1</a>
				</li>

				<li>
					<a href="#/test2">list2</a>
				</li>

				<li>
					<a href="#/test3">list3</a>
				</li>

			</ul>

如果要加载对应的页面

标签中的id属性，需要 $routeProvider 去映射View和Controller

$routeProvider.when('/test1', {
							templateUrl: 'test1.html'
						})

						.when('/test2', {
							templateUrl: 'test2.html'
						})

						.when('/test3', {
							templateUrl: 'test3.html'
						});