AngularJS的services服务及应用示例

发布时间：2020-12-17 09:59:08 所属栏目：安全来源：网络整理

导读：1.services服务四种方法： value、constant、factory、service !DOCTYPE html html lang= "en" head meta charset= "UTF-8" title AngularJS / title link rel= "stylesheet" href= "css/foundation.min.css" / head body style= " padding : 10 px ; " ng-

1.services服务

四种方法：

value、constant、factory、service

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>AngularJS</title>

    <link rel="stylesheet" href="css/foundation.min.css">
</head>
<body style="padding:10px;" ng-app="app">
    <div ng-controller="MyCtrl">
        <h1>{{realname}}</h1>
        <h1>{{http}}</h1>
        <h1>{{data.msg}}</h1>
        <h1>{{uname}}</h1>
    </div>
</body>
<script src="js/angular.min.js"></script>
<script src="app.js"></script>
</html>

angular.module("app",[])
    .value('realname','wangwu')//可以改变  .constant('http','www.baidu.com')//不能改变  .factory('Data',function () {
        return {
            msg:'你好啊',setMsg:function () {
                this.msg = "我不好";
            }
        }
    })
    .service('User',function () {
        this.firstname = "wang";
        this.lastname = "wu";
        this.getName  = function () {
            return this.firstname + this.lastname;
        }
    })
    .controller('MyCtrl',function ($scope,realname,http,Data,User) {
        $scope.msg = "你好";
        $scope.realname = realname;
        $scope.http = http;
        $scope.data = Data;
        Data.setMsg();
        $scope.uname = User.getName();
    })

2.service的应用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>AngularJS</title>

    <link rel="stylesheet" href="css/foundation.min.css">
</head>
<body style="padding:10px;" ng-app="app">
    <div ng-controller="FCtrol">
        <input type="text" ng-model="data.msg">
        <h1>{{data.msg}}</h1>
    </div>
    <div ng-controller="SCtrol">
        <input type="text" ng-model="data.msg">
        <h1>{{data.msg}}</h1>
    </div>
</body>
<script src="js/angular.min.js"></script>
<script src="app.js"></script>
</html>

angular.module('app',[])
.factory('Data',function () {
    return {
        msg:"factory",shopcart:['1','2']
    }
})
.controller('FCtrol',Data) { //下单  $scope.data = Data;
})
.controller('SCtrol',Data) {//购物车  $scope.data = Data;
})

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!