提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  前端

当前栏目

Angular引入控制器

Angular 引入 控制器
2023-09-27 14:26:51 时间

Angular引入控制器


学习资源推荐： https://blog.csdn.net/qq_42813491/article/details/90213353

代码

<!DOCTYPE html>
<html lang="en" ng-app="app"><!-- 引入控制程序 -->
<head>
	<meta charset="UTF-8">
	<title>Angular控制器</title>
	<script type="text/javascript" src="js/lib/angular/angular.min.js"></script>
</head>
<body>
<!-- 实例化控制器，格式：类名-as-实例名 -->
	<div ng-controller="MainCtrl as mainCtrl">
		<h2>昵称：{{mainCtrl.nickname}}</h2><!-- 访问属性nickname -->
		<h2>年龄：{{mainCtrl.age}}</h2><!-- 访问属性age -->
		<h2>打招呼：{{mainCtrl.say()}}</h2><!-- 访问方法say -->
		<button ng-click="mainCtrl.add();">按我</button><!-- 访问方法add -->
   </div>
<script>
	var app=angular.module("app",[])//定义控制程序，用ng-app指令引用
	app.controller("MainCtrl",[function(){//定义控制器，用ng-controller指令引用
		//这种赋值方式有点像构造函数，this的属性方法最终绑在被实例化对象的实例上
		//定义属性
		this.nickname="冷月心";
		this.age=20;
		//定义函数say
		this.say=function(){
			return "hello";
		}
		//定义函数add
		this.add=function(){
			this.age++;
		}
	}])

</script>
</body>
</html>

效果图

点击按钮，年龄+1

在这里插入图片描述

说明

  • ng-click也是angular内置指令，顾名思义，点击时候触发
  • 指令对大小写不敏感，但建议都用小写

相关文章