美洲杯赌球angularjs 服务(service)

1.angular与MVC

MVC即Model View Controller,是模型(model)-视图(view)-控制器(controller)的缩写,一种软件设计典范,用一种业务逻辑、数据、界面显示分离的方法组织代码,将业务逻辑聚集到一个部件里面,在改进和个性化定制界面及用户交互的同时,不需要重新编写业务逻辑。MVC被独特的发展起来用于映射传统的输入、处理和输出功能在一个逻辑的图形化用户界面的结构中。
M 模型对应数据库
V 视图对应HTML页面
C 控制器处理用户交互

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" href="css/bootstrap.min.css"/>
</head>
<style>
    body {
        padding: 10px;
    }
</style>
<body ng-app="app">
    <div ng-controller="MyCtrl">
        <input type="text" ng-model="msg"/>
        <h1>{{msg}}</h1>
    </div>
</body>
<script src="js/angular.min.js"></script>
<script>
    angular.module('app',[])//module创建一个angular模块
            .controller('MyCtrl',function($scope){//controller相当于简单的MVC,MyCtrl相当于C,$scope相当于M
               $scope.msg="angular";//每一个模型,通过双向绑定,把模型绑定到V上即HTML页面
            })
            .controller('MyCtrl1',function($scope){})//可以创建更多
            .controller('MyCtrl2',function($scope){})
            .controller('MyCtrl3',function($scope){});
</script>
</html>

在angularjs中,服务是一个函数或者对象,使用它,需要在controller中定义。angularjs中有30多个服务。

美洲杯赌球,2.binding双向绑定

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" href="http://cdn.static.runoob.com/libs/foundation/5.5.3/css/foundation.min.css">
</head>
<body style="padding:10px;" ng-app="">
    <div>
        <input type="text" ng-model="uname"/>
        <h1 ng-bind="uname">{{}}</h1><!--显示输入框内容-->
        <h1 ng-clock class="ng-clock">{{uname}}</h1><!--显示输入框内容-->
        <!--{{}}内可放置任何表达式-->
        <div ng-bind="'用户名:' uname"></div><!--显示:用户名:button-->
        <div class="{{uname}}">{{uname}}</div><!--显示button标签-->
    </div>
</body>
<script src="js/angular.min.js"></script>
</html>

一:angularjs内置的服务:$timeout,$http,$interval...

3.controller的使用

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" href="http://cdn.static.runoob.com/libs/foundation/5.5.3/css/foundation.min.css">
</head>
<body style="padding: 10px" ng-app="app">
    <div ng-controller="FirstCtrl">
        <!--<h1>{{msg}}</h1>同ng-bind且可省去{{}}-->
        <h1 ng-bind="msg"></h1>
        <input type="text" ng-model="msg"/>
    </div>
    <div ng-controller="NextCtrl">
        <!--<h1>{{msg}}</h1>-->
        <h1 ng-bind="msg"></h1>
        <input type="text" ng-model="msg"/>
    </div>
<!--ng-controller明确其作用域边界-->
</body>
<script src="js/angular.min.js"></script>
<script>
angular.module('app',[])
    .controller('FirstCtrl',function($scope){
        $scope.msg="hello angular";
    })
    .controller('NextCtrl',function($scope){
        $scope.msg="hello 极客";
    });

</script>
</html>

例如,$interval来实现显示当前时间:

4.scope的变量与方法

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" href="http://cdn.static.runoob.com/libs/foundation/5.5.3/css/foundation.min.css">
</head>
<body style="padding:10px;" ng-app="app">
<p>在scope上定义方法并在页面上进行绑定调用</p>
<p>在scope上定义变量并在方法中使用</p>
<div ng-controller="MyCtrl">
    <!--<input type="text" ng-model="msg"/>-->
    <!--<h1>{{reverse()}}</h1>-->
    <!--在页面上绑定调用scope中定义的方法-->
    <input type="text" ng-model="user.uname"/>
    <input type="text" ng-model="user.pwd"/>
    <div class="button" ng-click="login()">登录</div>
    <div ng-show="errormsg.length>0" class="alert-box">{{errormsg}}</div>
</div>
</body>
<script src="js/angular.min.js"></script>
<script>
angular.module('app',[])
    .controller('MyCtrl',function($scope){
        $scope.msg="";
        $scope.user={uname:'',pwd:''};
        $scope.errormsg="";
        $scope.reverse=function(){//在scope上定义方法
            return $scope.msg.split("").reverse().join("")
        };
        $scope.login=function(){
            if($scope.user.uname=="admin" && $scope.user.pwd=="123"){
                alert("登陆成功");
            }else{
                $scope.errormsg="用户名或密码错误";
            }
        }
    });

</script>
</html>

美洲杯赌球 1

5.定义service服务

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" href="http://cdn.static.runoob.com/libs/foundation/5.5.3/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>
angular.module('app',[])
    //service多种表现形式,四种创建模式value(值可改变) constant(常量不可改变) factory service provider(高级)
    .value('realname','zhaoliu')
    .value('realname','wangwu')
    .constant('http','www.baidu.com')
    .constant('http','www.sohu.com')
    .factory('Data',function(){
        return {
            msg:'你好吗',
            setMsg:function(){
                this.msg="我不好";
            }
        }
    })
    .service('User',function(){
        this.firstname="上官";
        this.lastname="小子";
        this.getName=function(){
            return this.firstname this.lastname;
        }
    })
    .controller('MyCtrl',function($scope,realname,http,Data,User){
        $scope.realname=realname;
        $scope.http=http;
        $scope.data=Data;
        Data.setMsg();
        $scope.uname=User.getName();
    });

</script>
</html>

$interval服务

6.在controller中使用service服务

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" href="http://cdn.static.runoob.com/libs/foundation/5.5.3/css/foundation.min.css">
</head>
<body style="padding:10px" ng-app="app">
    <p>service:如何在多个controller中共享数据</p>
    <div ng-controller="FCtrl">
        <input type="text" ng-model="data.msg"/>
        <h2>{{data.msg}}</h2>
    </div>
    <div ng-controller="SCtrl">
        <input type="text" ng-model="data.msg"/>
        <h2>{{data.msg}}</h2>
    </div>
</body>
<script src="js/angular.min.js"></script>
<script>
angular.module('app',[])
    .factory('Data',function(){
        return {
            msg:'我来自factory'
        }
    })
    .controller('FCtrl',function($scope,Data){
        $scope.data=Data;
    })
    .controller('SCtrl',function($scope,Data){
        $scope.data=Data;
    });
</script>
</html>

这个例子是用$interval 时间间隔服务,首先controller中要引用该服务。其次,$interval是被当作一个函数来用的。

6.常用指令可查看官方文档api

二:深入浅出自定义服务

在angular中为我们提供了三种不同的方式来实现自定义服务,他们分别是系统内置的$provider、module中的service和module中的factory。

1:service 是用"new"关键字实例化的。因此,应该给"this"添加属性,然后 service 返回"this"。把service 传进 controller 之后,在 controller 里 "this" 上的属性 就可以通过 service 来使用了。

美洲杯赌球 2

service

这是一个简单的服务,相当于一个类对象,类似于php封装的一个类,在controller中引入,调用其中的函数,这个函数的相关业务逻辑在类函数中处理了。

2:系统内置的$provider 。当你想要在 service 对象启用之前,先进行模块范围的配置,那就应该用 provider.例如:

美洲杯赌球 3

$provide

本文由美洲杯赌球发布于计算机教程,转载请注明出处:美洲杯赌球angularjs 服务(service)

TAG标签: 美洲杯赌球
Ctrl+D 将本页面保存为书签,全面了解最新资讯,方便快捷。