angular-day8-service-provider-factory

发表于 | 分类于 ，

service

$compile包含directive所有属性的说明 传送门

service basic

service and factory比较 (provider behind the scene)

  • factory create obj and return it
  • service only create constructor and let angular do the rest of work
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
var app = angular.module('app', []);
app.controller('emp', ['$scope','calcFactory', function ($scope, calcFactory) {
    $scope.a = 10;
    $scope.b = 20;
    $scope.dosum = function(){
    calcFactory.getSum($scope.a , $scope.b, function(r){
        $scope.sum = r;
    });
    };
}]);
app.factory('calcFactory',['$http','$log',function($http,$log){
    $log.log('instantiating calcFactory..');
    var oCalcFactory = {};
    oCalcFactory.getSum = function(a,b,cb){
        $http({
            url: 'http://localhost:2345/sum?a=' + a + '&b=' + b,
            method: 'GET'
        }).then(function(resp){
            $log.log(resp.data);
            cb(resp.data);
        },function(resp){
            $log.error('error happened.')
        });
    };
    return oCalcFactory;
}]);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
app.service('calcService',['$http','$log',function($http,$log){
    $log.log('instantiating calcService..');
    this.getSum = function(a,b,cb){
        $http({
            url: 'http://localhost:2345/sum?a=' + a + '&b=' + b,
            method: 'GET'
        }).then(function(resp){
            $log.log(resp.data);
            cb(resp.data);
        },function(resp){
            $log.error('error happened.')
        });
    };
}]);

provider

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
app.provider('calc',function(){
    var baseUrl = '';
    this.config = function(url){
        baseUrl = url;
    }
    // $get get called after config phase
    this.$get = ['$http','$log',function($http,$log){
    $log.log('instantiating calcProvider..');
    var oCalcProvider = {};
    oCalcProvider.getSum = function(a,b,cb){
        $http({
            url: baseUrl + '/sum?a=' + a + '&b=' + b,
            method: 'GET'
        }).then(function(resp){
            $log.log(resp.data);
            cb(resp.data);
        },function(resp){
            $log.error('error happened.')
        });
    };
    return oCalcProvider;
}];
})
app.config(['calcProvider', function(calcProvider){
    calcProvider.config('http://localhost:2345');
}]);

nodejs/express demo

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
var express = require('express');
var cors = require('cors');
var app = express();
app.use(cors());
var router = express.Router();
router.get('/sum',function (req, res) {
    var a = req.query.a;
    var b = req.query.b;
    var c =parseInt(a) + parseInt(b);
    res.status(200).json(c);
});
app.use('/',router);
app.listen('2345',function(){
    console.log('start listening on 2345')
});

$templateCache - service in module ng

The first time a template is used, it is loaded in the template cache for quick retrieval.
You can load templates directly into the cache in a script tag, or by consuming the $templateCache service directly.

  • Adding via the $templateCache service:

    1
    2
    3
    4
    var myApp = angular.module('myApp', []);
    myApp.run(function($templateCache) {
      $templateCache.put('templateId.html', 'This is the content of the template');
    });

  • To retrieve the template later, simply use it in your component:

    1
    2
    3
    myApp.component('myComponent', {
       templateUrl: 'templateId.html'
    });

  • or get it via the $templateCache service:

    1
    $templateCache.get('templateId.html')