AngularJS的service与provider

来源：互联网发布：react.js .百度百科编辑：程序博客网时间：2024/05/17 22:27

一.$http服务

示例：通过$http服务，请求服务器端数据。

<div ng-controller="LoadDataCtrl"><ul><li ng-repeat="user in users">{{user.name}}</li></ul></div>

var myModule=angular.module("MyModule",[]);myModule.controller('LoadDataCtrl', ['$scope','$http', function($scope,$http){$http({        method: 'GET',        url: 'data.json'    }).success(function(data, status, headers, config) {        console.log("success...");        console.log(data);        $scope.users=data;    }).error(function(data, status, headers, config) {        console.log("error...");    });}]);

[{    "name": "《用AngularJS开发下一代WEB应用》"},{    "name": "《Ext江湖》"},{    "name": "《ActionScript3.0游戏设计基础（第二版）》"}]

二.factory服务

自定义service，得以在多个controller中复用，这也是service的本质。

    <div ng-controller="ServiceController">        <label>用户名</label>        <input type="text" ng-model="username" placeholder="请输入用户名" />        <pre ng-show="username">{{users}}</pre>    </div>

var myServiceApp = angular.module("MyServiceApp", []);myServiceApp.factory('userListService', ['$http',    function($http) {        var doRequest = function(username, path) {            return $http({                method: 'GET',                url: 'users.json'            });        }        return {            userList: function(username) {                return doRequest(username, 'userList');            }        };    }]);myServiceApp.controller('ServiceController', ['$scope', '$timeout', 'userListService',    function($scope, $timeout, userListService) {        var timeout;        $scope.$watch('username', function(newUserName) {            if (newUserName) {                if (timeout) {                    $timeout.cancel(timeout);                }                timeout = $timeout(function() {                    userListService.userList(newUserName)                        .success(function(data, status) {                            $scope.users = data;                        });                }, 350);            }        });    }]);

《Ext江湖》《ActionScript3.0游戏设计基础（第二版）》《用AngularJS开发下一代WEB应用》

三.$fiter服务

示例：

{{ 1304375948024 | date }}<br>{{ 1304375948024 | date:"MM/dd/yyyy @ h:mma" }}<br>{{ 1304375948024 | date:"yyyy-MM-dd hh:mm:ss" }}<br>

自定义$filter

{{'Jason'|filter1 }}

var myModule=angular.module("MyModule",[]);myModule.filter('filter1',function(){    return function(item){        return item + 'o(∩_∩)o';    }});

以上部分内容来自慕课网大漠穷秋老师的视频截图

0 0