angular js factory服务_angular js factory()-优快云博客

本文介绍了一个使用AngularJS实现的简单用户信息管理系统。通过工厂模式创建了User服务来管理用户数据，包括获取和设置用户的ID、姓名及电子邮件。此外，还实现了一个控制器用于展示和更新用户信息。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../angular-1.5.5/angular.min.js"></script>
    <script>
        var app=angular.module("myapp",[]);
        //使用工厂方法，我们先定义一个工厂，然后分配方法给它(服务要return一个object出去)
        app.factory("User",function () {
               var user={
                  id:"6",
                   name:"Mary",
                   Email:"mary@bawei.com"
               };
              var _getUser=function () {
                  return user;
              };
              var _setUser=function (id,name,email) {
                  user.id=id;
                  user.name=name;
                  user.Email=email;
              };
              return{
                  getUser:_getUser,
                  setUser:_setUser
              }

        });
        /*添加一个控制器*/
        app.controller("myCotr",function ($scope,User) {
            console.log(User.getUser());
            $scope.user=User.getUser();
            $scope.saveUser=function () {
                User.setUser($scope.id,$scope.name,$scope.Email);
            }
        })
    </script>
</head>
<body ng-app="myapp" ng-controller="myCotr">
<ul>
    <li>{{user.id}}</li>
    <li>{{user.name}}</li>
    <li>{{user.Email}}</li>
</ul>
<div>
    id:<input type="text" ng-model="id"><br>
    name:<input type="text" ng-model="name"><br>
    email:<input type="text" ng-model="Email"><br>
    <button ng-click="saveUser()">按钮</button>
</div>
</body>
</html>