AngularJS：ng表单验证、ng路由、记笔记实例

本文详细介绍了如何使用AngularJS进行表单验证，包括用户名、密码和邮箱的验证规则，以及如何通过AngularJS实现页面路由和标签页切换，同时提供了一个记笔记的小实例。

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

ng表单验证

<body ng-app='myapp' ng-controller='myctl'>
	<div class="container">
		<h1 class="page-header">angular框架</h1>
		<form action="set.php" name='form' novalidate>
			<div class="form-group">
				<label for="">用户名:</label>
				<input type="text" class="form-control" ng-model='user' name='user' required>
				<div class='alert alert-danger' ng-show='form.user.$dirty && form.user.$invalid'>
					<span>用户名不能为空!</span>
				</div>
			</div>
			<div class="form-group">
				<label for="">密码:</label>
				<input type="text" class="form-control" ng-model='pass' name='pass' required>
				<div class='alert alert-danger' ng-show='form.pass.$dirty && form.pass.$invalid'>
					<span>密码不能为空!</span>
				</div>
			</div>
			<div class="form-group">
				<label for="">邮箱:</label>
				<input type="email" class="form-control" ng-model='email' name='email' required>
				<div class='alert alert-danger' ng-show='form.email.$dirty && form.email.$invalid'>
					<span ng-show='form.email.$error.required'>邮箱不能为空!</span>
					<span ng-show='form.email.$error.email'>邮箱格式有误!</span>
				</div>
			</div>
			<div class="form-group">
				<input type="submit" class="btn btn-primary btn-lg" value='ok' ng-disabled='form.user.$dirty && form.user.$invalid || form.pass.$dirty && form.pass.$invalid || form.email.$dirty && form.email.$invalid'>
			</div>
		</form>
	</div>
</body>
<script>
app=angular.module('myapp',[]);

app.controller('myctl',function($scope){
	$scope.user='admin';	
	$scope.pass='123';	
	$scope.email='admin@qq.com';	
});

</script>

ng路由

<body ng-app='myapp'>
	<div class="container">
		<h1 class="page-header">angular框架</h1>
	
		<div class="row">
			<div class="col-md-2">
				<div class="list-group">
					<a href="#/" class="list-group-item">首页</a>
					<a href="#/linux" class="list-group-item">linux</a>
					<a href="#/php" class="list-group-item">php</a>
					<a href="#/html5" class="list-group-item">html5</a>
					<a href="#/java" class="list-group-item">java</a>
				</div>
			</div>
			<div class="col-md-10">
				<div ng-view></div>
			</div>
		</div>	
	</div>
</body>
<script>
angular.module('myapp',['ngRoute']).config([
	'$routeProvider',
	function($routeProvider){
		$routeProvider
			.when('/',{templateUrl:'get.html'})
			.when('/linux',{template:'linux页面'})
			.when('/php',{template:'php页面'})
			.when('/html5',{template:'html5页面'})
			.when('/java',{template:'java页面'})
			.otherwise({redirectTo:'/'});
	}
]);

</script>

NG路由实现标签页

<body ng-app='myapp'>
	<div class="container">
		<h1 class="page-header">angular框架</h1>
	
		<ul class="nav nav-pills">
			<li>
				<a href="#/" class="list-group-item">首页</a>	
			</li>
			<li>
				<a href="#/linux" class="list-group-item">linux</a>	
			</li>
			<li>
				<a href="#/php" class="list-group-item">php</a>	
			</li>
			<li>
				<a href="#/html5" class="list-group-item">html5</a>
			</li>
			<li>
				<a href="#/java" class="list-group-item">java</a>	
			</li>
		</ul>
		<br>
		
		<div ng-view></div>
	</div>
</body>
<script>
angular.module('myapp',['ngRoute']).config([
	'$routeProvider',
	function($routeProvider){
		$routeProvider
			.when('/',{templateUrl:'get.html'})
			.when('/linux',{template:'linux页面'})
			.when('/php',{template:'php页面'})
			.when('/html5',{template:'html5页面'})
			.when('/java',{template:'java页面'})
			.otherwise({redirectTo:'/'});
	}
]);

</script>

记笔记实例

<body ng-app='myapp' ng-controller='myctl'>
	<div class="container">
		<h1 class="page-header">angular框架</h1>
		
		<form action="">
			<div class="form-group">
				<label for="">我的笔记:</label>
				<textarea name="" class='form-control' ng-model='txt'></textarea>
			</div>
			<div class="form-group">
				<input type="button" value="保存" class='btn btn-primary' ng-click='save()'>
				<input type="button" value="清除" class='btn btn-danger' ng-click='clear()'>
			</div>

			<div class="form-group">
				<div class="well">剩下字数: {{left()}}</div>	
			</div>
		</form>	
	</div>
</body>
<script>
app=angular.module('myapp',[]);

app.controller('myctl',function($scope){
	$scope.tot=100;
	$scope.txt='';

	$scope.left=function(){
		return $scope.tot-$scope.txt.length;
	}

	$scope.save=function(){
		alert('save success!');
	}

	$scope.clear=function(){
		$scope.txt='';
	}
});

</script>