文章目录

    • 代码
    • 效果图


 

代码

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

    <main ng-controller="MainCtrl as mainCtrl">
       <h3 >{{mainCtrl.get()}}</h3>
       <input type="search" placeholder="请输入姓名" ng-model="mainCtrl.nickname">
       <button ng-click="mainCtrl.set();" >改名</button>

    </main>

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

    //Angular中使用service函数可以定义一个服务，本质就是一个普通函数，
    //这个函数是一个类，在使用的时候会被系统自动的实例化1次，必须直接用类名打点调用里面的方法。
    //服务是惰性的：只有当依赖这个服务的控制器被实例化的时候，服务才会被实例化。
    //服务是单例的：不管页面上有多少个控制器使用这个服务，服务的实例永远只有一次。

        var app = angular.module("app",[]);
        app.controller("MainCtrl",["NameService",function(NameService){

                this.set = function(){
                    NameService.setName(this.nickname);
                }

                this.get = function(){
                    return NameService.getName();
                }
            }]);


                //创建一个服务，和创建controller一样
            app.service("NameService",[function(){
                var nickname="冷月心";//局部变量的方式也可以，this.name方式的也可以，注意要上下文匹配
                this.setName = function(name){
                 nickname = name;
               }

              this.getName = function(){
                   return nickname;
              }
            }])

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

效果图

service函数_angular

service函数_angular_02

service函数_service_03