AngularJS自定义服务示例-优快云博客

效果图：

 1 <!DOCTYPE html>
 2 <html ng-app="app" >
 3 <head lang="en">
 4     <meta charset="UTF-8">
 5     <title>简单的自定义服务</title>
 6     <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
 7 </head>
 8 <body>
 9 <div ng-controller="test" style="background-color: #a6beee;">
10     <span>{{stu.name}}</span>
11     <span>{{stu.sex}}</span>
12     <span>{{stu.score}}</span>
13 </div>
14 
15 </body>
16 
17 <script type="text/javascript">
18    angular.module("app",[], function ($provide) {
19        $provide.factory("$outData", function () {
20            //json格式的数据
21            var data={
22                name:'张小凡',
23                sex:'男',
24                score:'100'
25            };
26            return data;
27        })
28    }).controller("test", function ($scope, $outData) {
29        $scope.stu=$outData;
30    })
31 
32 
33 
34 
35 </script>
36 
37 </html>

View Code

<!DOCTYPE html>
<html ng-app="app" >
<head lang="en">
    <meta charset="UTF-8">
    <title>简单的自定义服务</title>
    <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>
<div ng-controller="test" style="background-color: #a6beee;">
    <span>{{stu.name}}</span>
    <span>{{stu.sex}}</span>
    <span>{{stu.score}}</span>
</div>

</body>

<script type="text/javascript">
   angular.module("app",[], function ($provide) {
       $provide.factory("$outData", function () {
           //json格式的数据
           var data={
               name:'张小凡',
               sex:'男',
               score:'100'
           };
           return data;
       })
   }).controller("test", function ($scope, $outData) {
       $scope.stu=$outData;
   })




</script>

</html>