AngularJS：ng作用(mvc)

最新推荐文章于 2020-05-01 16:59:46 发布

hahahafree

最新推荐文章于 2020-05-01 16:59:46 发布

阅读量231

点赞数

分类专栏： AngularJS 文章标签： AngularJS

本文链接：https://blog.csdn.net/weixin_43731793/article/details/98588595

版权

AngularJS 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

ng作用(mvc):

m:model(数据模型)
v:view(界面视图)
c:controller(逻辑控制器)

ng实例:

1.m

<input type="text" class="form-control" ng-model='mess'>

2.c

1)标签属性


<body ng-app='myapp' ng-controller='myctl'>

2)js代码


app=angular.module('myapp',[]);
app.controller('myctl',function($scope){
	$scope.username='user1';
	$scope.password='123';
});

3.v

1){{ }}


<div class="well">阿呆: {{mess}}</div>

2)ng-bind


<div class="well">阿呆: <span ng-bind='mess'></span></div>

mvc结构和双向绑定

<!doctype html>
<html>
<head>
	<meta charset="UTF-8">
	<title>index</title>
	<style>
		*{
			font-family: 微软雅黑;
		}
	</style>
	<link rel="stylesheet" href="bs/css/bootstrap.min.css">
	<script src="bs/js/jquery.min.js"></script>
	<script src="bs/js/bootstrap.min.js"></script>
	<script src="ng/angular.min.js"></script>
</head>
<body ng-app='myapp' ng-controller='myctl'>
	<div class="container">
		<h1 class="page-header">angularjs学习</h1>
		<form action="">
			<div class="form-group">
				<label for="">请留言:</label>
				<input type="text" class="form-control" ng-model='mess'>	
			</div>
			<div class="well">阿呆: {{mess}}</div>
		</form>
	</div>	
</body>
<script>
// c控制器
app=angular.module('myapp',[]);

app.controller('myctl',function($scope){
	//控制器代码逻辑范围
	$scope.mess='linux is very much!';
});
</script>
</html>

ng mvc实例

<!doctype html>
<html>
<head>
	<meta charset="UTF-8">
	<title>index</title>
	<style>
		*{
			font-family: 微软雅黑;
		}
	</style>
	<link rel="stylesheet" href="bs/css/bootstrap.min.css">
	<script src="bs/js/jquery.min.js"></script>
	<script src="bs/js/bootstrap.min.js"></script>
	<script src="ng/angular.min.js"></script>
</head>
<body ng-app='myapp' ng-controller='myctl'>
	<div class="container">
		<h1 class="page-header">angularjs学习</h1>
		<form action="">
			<div class="form-group">
				<label for="">用户名:</label>
				<input type="text" class="form-control" ng-model='username'>	
			</div>
			<div class="well">阿呆: {{username}}</div>

			<div class="form-group">
				<label for="">密码:</label>
				<input type="text" class="form-control" ng-model='password'>
			</div>
				
			<div class="well">老罗: {{password}}</div>
		</form>
	</div>	
</body>
<script>
// c控制器
app=angular.module('myapp',[]);

app.controller('myctl',function($scope){
	//控制器代码逻辑范围
	$scope.username='user1';
	$scope.password='123';
});
</script>
</html>