AngularJS的services服务及应用示例

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;
})

AngularJS的services服务及应用示例

猜你在找的Angularjs相关文章