[angularjs] angularjs系列笔记（五）Service

AngularJs

<div class="cnblogs_code">

 
    
      {{myUrl}}
      
      {{myHttp}}
      
      {{myName}}
      
      {{myTime}}
      
      {{loginStatus}}
      
    
<span style="color: #0000ff;"></<span style="color: #800000;">body<span style="color: #0000ff;">>
<span style="color: #0000ff;"><<span style="color: #800000;">script <span style="color: #ff0000;">type<span style="color: #0000ff;">="text/javascript"<span style="color: #0000ff;">>

<span style="background-color: #f5f5f5; color: #008000;">//<span style="background-color: #f5f5f5; color: #008000;">实例化应用对象，参数：模块名，空数组

<span style="background-color: #f5f5f5; color: #0000ff;">var<span style="background-color: #f5f5f5; color: #000000;"> app<span style="background-color: #f5f5f5; color: #000000;">=<span style="background-color: #f5f5f5; color: #000000;">angular.module(<span style="background-color: #f5f5f5; color: #000000;">"<span style="background-color: #f5f5f5; color: #000000;">Home<span style="background-color: #f5f5f5; color: #000000;">"<span style="background-color: #f5f5f5; color: #000000;">,[]);

<span style="background-color: #f5f5f5; color: #008000;">//<span style="background-color: #f5f5f5; color: #008000;">调用Application对象的controller()方法

<span style="background-color: #f5f5f5; color: #000000;">  app.controller(<span style="background-color: #f5f5f5; color: #000000;">"<span style="background-color: #f5f5f5; color: #000000;">Index<span style="background-color: #f5f5f5; color: #000000;">"<span style="background-color: #f5f5f5; color: #000000;">,<span style="background-color: #f5f5f5; color: #0000ff;">function<span style="background-color: #f5f5f5; color: #000000;">($scope,$location){

$scope.myUrl<span style="background-color: #f5f5f5; color: #000000;">=<span style="background-color: #f5f5f5; color: #000000;">$location.absUrl();

});

<span style="background-color: #f5f5f5; color: #008000;">//<span style="background-color: #f5f5f5; color: #008000;">测试$http

<span style="background-color: #f5f5f5; color: #000000;">  app.controller(<span style="background-color: #f5f5f5; color: #000000;">"<span style="background-color: #f5f5f5; color: #000000;">httpTest<span style="background-color: #f5f5f5; color: #000000;">"<span style="background-color: #f5f5f5; color: #000000;">,$http){

$http.get(<span style="background-color: #f5f5f5; color: #000000;">"<span style="background-color: #f5f5f5; color: #000000;">index1.html<span style="background-color: #f5f5f5; color: #000000;">"<span style="background-color: #f5f5f5; color: #000000;">).then(<span style="background-color: #f5f5f5; color: #0000ff;">function<span style="background-color: #f5f5f5; color: #000000;">(res){

$scope.myHttp<span style="background-color: #f5f5f5; color: #000000;">=<span style="background-color: #f5f5f5; color: #000000;">res.data;

});

});

<span style="background-color: #f5f5f5; color: #008000;">//<span style="background-color: #f5f5f5; color: #008000;">测试$timeout

<span style="background-color: #f5f5f5; color: #000000;">  app.controller(<span style="background-color: #f5f5f5; color: #000000;">"<span style="background-color: #f5f5f5; color: #000000;">timeoutTest<span style="background-color: #f5f5f5; color: #000000;">"<span style="background-color: #f5f5f5; color: #000000;">,$timeout){

$scope.myName<span style="background-color: #f5f5f5; color: #000000;">=<span style="background-color: #f5f5f5; color: #000000;">"<span style="background-color: #f5f5f5; color: #000000;">taoshihan<span style="background-color: #f5f5f5; color: #000000;">"<span style="background-color: #f5f5f5; color: #000000;">

$timeout(<span style="background-color: #f5f5f5; color: #0000ff;">function<span style="background-color: #f5f5f5; color: #000000;">(){

$scope.myName<span style="background-color: #f5f5f5; color: #000000;">=<span style="background-color: #f5f5f5; color: #000000;">"<span style="background-color: #f5f5f5; color: #000000;">陶士涵<span style="background-color: #f5f5f5; color: #000000;">"<span style="background-color: #f5f5f5; color: #000000;">

},<span style="background-color: #f5f5f5; color: #000000;">2000<span style="background-color: #f5f5f5; color: #000000;">);

});

<span style="background-color: #f5f5f5; color: #008000;">//<span style="background-color: #f5f5f5; color: #008000;">测试$interval

<span style="background-color: #f5f5f5; color: #000000;">  app.controller(<span style="background-color: #f5f5f5; color: #000000;">"<span style="background-color: #f5f5f5; color: #000000;">intervalTest<span style="background-color: #f5f5f5; color: #000000;">"<span style="background-color: #f5f5f5; color: #000000;">,$interval){

$scope.myName<span style="background-color: #f5f5f5; color: #000000;">=<span style="background-color: #f5f5f5; color: #000000;">"<span style="background-color: #f5f5f5; color: #000000;">taoshihan<span style="background-color: #f5f5f5; color: #000000;">"<span style="background-color: #f5f5f5; color: #000000;">

$interval(<span style="background-color: #f5f5f5; color: #0000ff;">function<span style="background-color: #f5f5f5; color: #000000;">(){

$scope.myTime<span style="background-color: #f5f5f5; color: #000000;">=<span style="background-color: #f5f5f5; color: #0000ff;">new<span style="background-color: #f5f5f5; color: #000000;"> Date().toLocaleTimeString();

},<span style="background-color: #f5f5f5; color: #000000;">1000<span style="background-color: #f5f5f5; color: #000000;">);

});
<span style="background-color: #f5f5f5; color: #008000;">//<span style="background-color: #f5f5f5; color: #008000;">测试自定义Service

<span style="background-color: #f5f5f5; color: #008000;">//<span style="background-color: #f5f5f5; color: #008000;">调用Application对象的service()方法，参数：名称，匿名函数

<span style="background-color: #f5f5f5; color: #000000;">  app.service(<span style="background-color: #f5f5f5; color: #000000;">"<span style="background-color: #f5f5f5; color: #000000;">LoginService<span style="background-color: #f5f5f5; color: #000000;">"<span style="background-color: #f5f5f5; color: #000000;">,<span style="background-color: #f5f5f5; color: #0000ff;">function<span style="background-color: #f5f5f5; color: #000000;">(){

<span style="background-color: #f5f5f5; color: #0000ff;">this<span style="background-color: #f5f5f5; color: #000000;">.check<span style="background-color: #f5f5f5; color: #000000;">=<span style="background-color: #f5f5f5; color: #0000ff;">function<span style="background-color: #f5f5f5; color: #000000;">(username,password){

<span style="background-color: #f5f5f5; color: #0000ff;">if<span style="background-color: #f5f5f5; color: #000000;">(username<span style="background-color: #f5f5f5; color: #000000;">==<span style="background-color: #f5f5f5; color: #000000;">"<span style="background-color: #f5f5f5; color: #000000;">1<span style="background-color: #f5f5f5; color: #000000;">"<span style="background-color: #f5f5f5; color: #000000;">&&<span style="background-color: #f5f5f5; color: #000000;">password<span style="background-color: #f5f5f5; color: #000000;">==<span style="background-color: #f5f5f5; color: #000000;">"<span style="background-color: #f5f5f5; color: #000000;">1<span style="background-color: #f5f5f5; color: #000000;">"<span style="background-color: #f5f5f5; color: #000000;">){

<span style="background-color: #f5f5f5; color: #0000ff;">return <span style="background-color: #f5f5f5; color: #0000ff;">true<span style="background-color: #f5f5f5; color: #000000;">;

}<span style="background-color: #f5f5f5; color: #0000ff;">else<span style="background-color: #f5f5f5; color: #000000;">{

<span style="background-color: #f5f5f5; color: #0000ff;">return <span style="background-color: #f5f5f5; color: #0000ff;">false<span style="background-color: #f5f5f5; color: #000000;">;

}

}

});

app.controller(<span style="background-color: #f5f5f5; color: #000000;">"<span style="background-color: #f5f5f5; color: #000000;">serviceTest<span style="background-color: #f5f5f5; color: #000000;">"<span style="background-color: #f5f5f5; color: #000000;">,LoginService){

res<span style="background-color: #f5f5f5; color: #000000;">=<span style="background-color: #f5f5f5; color: #000000;">LoginService.check(<span style="background-color: #f5f5f5; color: #000000;">1<span style="background-color: #f5f5f5; color: #000000;">,<span style="background-color: #f5f5f5; color: #000000;">1<span style="background-color: #f5f5f5; color: #000000;">);

<span style="background-color: #f5f5f5; color: #0000ff;">if<span style="background-color: #f5f5f5; color: #000000;">(res){

$scope.loginStatus<span style="background-color: #f5f5f5; color: #000000;">=<span style="background-color: #f5f5f5; color: #000000;">"<span style="background-color: #f5f5f5; color: #000000;">登陆成功<span style="background-color: #f5f5f5; color: #000000;">"<span style="background-color: #f5f5f5; color: #000000;">;

}<span style="background-color: #f5f5f5; color: #0000ff;">else<span style="background-color: #f5f5f5; color: #000000;">{

$scope.loginStatus<span style="background-color: #f5f5f5; color: #000000;">=<span style="background-color: #f5f5f5; color: #000000;">"<span style="background-color: #f5f5f5; color: #000000;">登陆失败<span style="background-color: #f5f5f5; color: #000000;">"<span style="background-color: #f5f5f5; color: #000000;">;

}

});

<span style="color: #0000ff;"></<span style="color: #800000;">script<span style="color: #0000ff;">>

（编辑：李大同）

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