AngularJS的services服务及应用示例

来源：互联网发布：c语言中百分之f 编辑：程序博客网时间：2024/05/16 11:57

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

0 0