Angularjs自定义服务~使用Module的factory方法

html>
<html>
   <head>
      <meta charset="UTF-8">
      <title>Angularjs自定义服务~使用Module的factory方法title>
      
      <script type="text/javascript" src="../js/angular.js" >script>
      <script>
         var app = angular.module("myApp",[]);
         
         // (1)在当前应用程序app自定义服务:myUser   
         app.factory("myUser",function(){
            var user = {};     //(2)创建一个object类型的对象
            user.name = "玛尼";  //(3)定义user对象的属性
            var age;           //(4)定义一个私有变量
            
            // (5)调用setter方法,把自定义的私有变量通过匿名函数以传参的形式赋值给user对象,成为一个新属性
            user.setAge = function(newAge){
               age = newAge;
            };
            // (6)调用getter方法,返回赋好值后的user对象中的新age属性值
            user.getAge = function(newAge){
               return age;
            };
            
            return user;   //(7)最后返回新的user对象
         });
         
         //在控制器myCtrl的作用域中调用服务myUser中数据
         app.controller("myCtrl",function($scope,myUser){
            alert(myUser.name);
            //(8)设置age的数值
            myUser.setAge(18); 
            
            //(9)通过自定义服务调用age属性的值赋值给作用域中的age值,使作用域中的变量有值,方便下步操作
            $scope.age = myUser.getAge();
            $scope.name = myUser.name;
            alert("姓名:"+myUser.name+",年龄:"+myUser.getAge());
            alert("姓名:"+$scope.name+",年龄:"+$scope.age);
         });
      script>
   head>
   
   <body ng-app="myApp" ng-controller="myCtrl">
      <p>{{age}}p>
      <p>{{name}}p>
      <p>姓名:{{name}} 年龄:{{age}}p>
   body>
html>

你可能感兴趣的:(效果初现)