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

zl程序教程

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

当前栏目

Angular--factory

Angular -- Factory
2023-09-27 14:26:51 时间

factory

代码

<!DOCTYPE html>
<html lang="en" ng-app="app">
<head>
	<meta charset="UTF-8">
	<title>Angular--factory</title>
	<style>
		*{margin: 0;padding: 0;}
		main{width: 300px;background-color: yellowgreen;margin:100px auto;color:white;text-align: center;
		}


	</style>
</head>
<body>

<main ng-controller="MainCtrl as mainCtrl">
	<p>{{mainCtrl.name}}</p>
	<!-- 这里特意用了一下ng-bind指令，和双大括号效果一样 -->
	<p ng-bind="mainCtrl.age"></p>
		<button ng-click="mainCtrl.sayHello();">打招呼</button>
</main>



	<script type="text/javascript" src="./angular.min.js"></script>
	<script type="text/javascript">

		var app = angular.module("app",[]);
		//控制器
		app.controller("MainCtrl",["StudentFactory",function(StudentFactory){

 			//不论是服务还是工厂，都是注入的方式

			this.name=StudentFactory.name;

			this.age=StudentFactory.age;

			//用函数需要以return的方式
			//this.sayHello=StudentFactory.sayHello()这样写会立即执行
			//工厂在被注入的时候就开始工作了，一旦控制器实例化就会立即执行

			this.sayHello=function(){

				return StudentFactory.sayHello();

			}

		}]);

		app.factory("StudentFactory",[function(){

			//工厂，本质也是一个普通函数，和服务的区别在于封装性更好一些
			//工厂格式也比较严谨，要求return一个东西，也就是向外暴露的对象

			var name="Tom";

			var age=18;

			function sayHello(){
				alert("大家好，我叫"+name+",今年"+age+"岁")
			}

			//左侧是向外暴露的API名称，右侧是对应的变量或函数名

			return {
				"name":name,
				"age":age,
				"sayHello":sayHello
			}

		}]);



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

效果图

在这里插入图片描述

在这里插入图片描述

说明

工厂和服务都是属于业务层面的东西，各种业务，各种脏活累过都往里边放，等着controller调用

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

相关文章