AngularJS的services服务及应用示例

最新推荐文章于 2020-12-09 17:36:19 发布

u013063153

最新推荐文章于 2020-12-09 17:36:19 发布

阅读量1.3k

点赞数

分类专栏： Angular

本文链接：https://blog.csdn.net/u013063153/article/details/52458560

版权

Angular 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

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',function ($scope,Data) { //下单
    $scope.data = Data;
})
.controller('SCtrol',function ($scope,Data) {//购物车
    $scope.data = Data;
})