AngularJs_自定义注入对象_笔记1

A-自定义控件示例：

我的自定义控件文件为：angular-seagull2-common.js

(function (window, angular) {
    'use strict';

    $urlProvider.$inject = [];
    function $urlProvider() {


        var config = {
            platformUrlBase: undefined, //"http://localhost:10086/Capital"
            apiUrlBase: undefined //'http://localhost:10086',       
        };

        this.$get = ['configure', function (configure) {
            config = configure.getConfig(config, 'seagull2Url');

            var service = {};
            service.getPlatformUrlBase = function () {
                if (!config.platformUrlBase) {
                    throw new Error('`platformUrlBase` properties.');
                }
                return config.apiUrlBase + config.platformUrlBase;
            };

            service.getPlatformUrl = function (url) {
                return service.getPlatformUrlBase() + url;
            };

            service.combine = function (base, path) {

                // Absolute URL
                if (path.match(/^[a-z]*:\/\//)) {
                    return path;
                }
                // Protocol relative URL
                if (path.indexOf("//") === 0) {
                    return base.replace(/\/\/.*/, path);
                }
                // Upper directory
                if (path.indexOf("../") === 0) {
                    return resolveRelative(path.slice(3), base.replace(/\/[^\/]*$/, ''));
                }
                // Relative to the root
                if (path.indexOf('/') === 0) {
                    var match = base.match(/(\w*:\/\/)?[^\/]*\//) || [base];
                    return match[0] + path.slice(1);
                }
                //relative to the current directory
                return base.replace(/\/[^\/]*$/, "") + '/' + path.replace(/^\.\//, '');
            };

            return service;
        }];
    }

    var module = angular.module('angular-seagull2-common.url', [
        'angular-seagull2-common.configure'
    ]);

    module.provider('seagull2Url', $urlProvider);

})(window, window.angular);
(function (angular) {
    'use strict';

    angular.module('angular-seagull2-common', [
       
        'angular-seagull2-common.url',
       
    ]);

}(window.angular));

 

a1-根据结构的分析，要想使该JS起作用，需要在app.js中注入该JS才行：

define(function (require, exports, module) {
    var angular = require('angular');
    var asyncLoader = require('angular-async-loader');

    require('angular-ui-router');
    require('angular-seagull2-oauth');
    require('angular-seagull2-common');
    require('angular-formatDateTime-common');

    var app = angular.module('app', ['ui.router', 'angular-seagull2-common', 'angular-seagull2-workflow-oauth', 'angular-formatDateTime-common']);
    
    var commonConfig = require('../node_modules/text/text!common-config.json');
    var config = require('../node_modules/text/text!config.json');
    app.config(['configureProvider', function (configureProvider) {
        configureProvider.configure(commonConfig);
        configureProvider.configure(config);
    }]);
    
    // initialze app module for async loader
    asyncLoader.configure(app);
    module.exports = app;
});

a2-需要在包文件管理中配置包源：

require.config({
    map: {
        '*': {
            'ie8css': 'https://develop-cdn.sinooceangroup.com/libs/requirecss-branch-seagull2/1.1.0/ie8css.min.js',
            'css': 'https://develop-cdn.sinooceangroup.com/libs/requirecss-branch-seagull2/1.1.0/css.min.js'
        }
    },
    waitSeconds: 0,
    //配置angular的路径
    paths: {
        'angular': 'https://develop-cdn.sinooceangroup.com/libs/angular/1.2.27/angular.min',
        'angular-cookies': 'https://develop-cdn.sinooceangroup.com/libs/angular/1.2.27/angular-cookies.min',
        'angular-ui-router': 'https://develop-cdn.sinooceangroup.com/libs/angular-ui-router/0.2.18/release/angular-ui-router.min',
        'angular-ui-tree': 'https://develop-cdn.sinooceangroup.com/libs/angular-ui-tree/2.15.0/dist/angular-ui-tree.min',
        'angular-async-loader': 'https://develop-cdn.sinooceangroup.com/libs/angular-async-loader/1.3.2/angular-async-loader.min',
        'text': 'https://develop-cdn.sinooceangroup.com/libs/text/2.0.15/text.min',
        'jquery': 'https://develop-cdn.sinooceangroup.com/libs/jquery/1.12.3/dist/jquery.min',
        'webuploader': 'https://develop-cdn.sinooceangroup.com/libs/webuploader/0.1.8/dist/webuploader.min',
        'urijs': 'https://develop-cdn.sinooceangroup.com/libs/urijs/1.17.1/src',

        'angular-seagull2-common': 'https://develop-cdn.sinooceangroup.com/libs/angular-seagull2-common/1.2.1/angular-seagull2-common',
        'angular-seagull2-oauth': 'https://develop-cdn.sinooceangroup.com/libs/angular-seagull2-oauth/1.1.9/angular-seagull2-oauth',
        'angular-seagull2-workflow': 'https://develop-cdn.sinooceangroup.com/libs/angular-seagull2-workflow/1.5.1/angular-seagull2-workflow',
        'angular-seagull2-infrastructure': 'https://develop-cdn.sinooceangroup.com/libs/angular-seagull2-infrastructure/0.1.4/angular-seagull2-infrastructure',
        'angular-datepicker': 'https://develop-cdn.sinooceangroup.com/libs/datepicker-branch-seagull2/1.0.5/datepicker-branch-seagull2',
        'angular-seagull2-empprovider': './javascript/angular-seagull2-empprovider',
        'angular-seagull2-careerdev': './javascript/angular-seagull2-careerdev',
        'angular-indentity-code': './javascript/angular-indentity-code',
        'angular-seagull2-corporation': './javascript/angular-seagull2-corporation'
    },
    //这个配置是你在引入依赖的时候的包名
    shim: {
        'text': { exports: 'text' },
        'angular': { exports: 'angular' },
        'angular-cookies': { exports: 'angular-cookies', deps: ['angular'] },
        'angular-ui-router': { deps: ['angular'] },
        'angular-ui-tree': { deps: ['angular', 'css!https://develop-cdn.sinooceangroup.com/libs/angular-ui-tree/2.15.0/dist/angular-ui-tree.min'] },
        'angular-datepicker': { deps: ['angular', 'css!https://develop-cdn.sinooceangroup.com/libs/datepicker-branch-seagull2/1.0.5/datepicker-branch-seagull2'] },
        'angular-seagull2-common': {
            deps: [
                'angular',
                'urijs/uri',
                'angular-ui-tree',
                'css!https://develop-cdn.sinooceangroup.com/libs/angular-seagull2-common/1.2.1/angular-seagull2-common',
                'ie8css!https://develop-cdn.sinooceangroup.com/libs/angular-seagull2-common/1.2.1/angular-seagull2-common.ie8']
        },
        'angular-seagull2-oauth': {
            deps: [
                'angular',
                'angular-cookies',
                'angular-ui-router',
                'urijs/uri',
                'angular-seagull2-common']
        },
        'angular-seagull2-workflow': {
            deps: [
                'angular',
                'urijs/uri',
                'angular-seagull2-common',
                'angular-datepicker',
                'css!https://develop-cdn.sinooceangroup.com/libs/angular-seagull2-workflow/1.5.1/angular-seagull2-workflow',
                'ie8css!https://develop-cdn.sinooceangroup.com/libs/angular-seagull2-workflow/1.5.1/angular-seagull2-workflow.ie8']
        },
        'angular-seagull2-infrastructure': {
            deps: [
                'angular',
                'angular-ui-tree',
                'angular-seagull2-common',
                'css!https://develop-cdn.sinooceangroup.com/libs/angular-seagull2-infrastructure/0.1.4/angular-seagull2-infrastructure',
                'ie8css!https://develop-cdn.sinooceangroup.com/libs/angular-seagull2-infrastructure/0.1.4/angular-seagull2-infrastructure.ie8']
        },
        'angular-seagull2-empprovider': {
            deps: [
                'angular',
                'angular-seagull2-common',
                'angular-seagull2-workflow',
                'css!https://develop-cdn.sinooceangroup.com/libs/angular-seagull2-infrastructure/0.1.4/angular-seagull2-infrastructure',
                'ie8css!https://develop-cdn.sinooceangroup.com/libs/angular-seagull2-infrastructure/0.1.4/angular-seagull2-infrastructure.ie8']
        },
        'angular-seagull2-careerdev': {
            deps: [
               'angular',
               'urijs/uri',
               'angular-ui-tree',
               'angular-seagull2-common',
                'css!https://develop-cdn.sinooceangroup.com/libs/angular-seagull2-infrastructure/0.1.4/angular-seagull2-infrastructure',
                'ie8css!https://develop-cdn.sinooceangroup.com/libs/angular-seagull2-infrastructure/0.1.4/angular-seagull2-infrastructure.ie8']
        },
        'angular-indentity-code': {
            deps: ['angular', 'angular-seagull2-common']
        },
        'angular-seagull2-corporation': {
            deps: [
               'angular',
               'urijs/uri',
               'angular-ui-tree',
               'angular-seagull2-common',
                'css!https://develop-cdn.sinooceangroup.com/libs/angular-seagull2-infrastructure/0.1.4/angular-seagull2-infrastructure',
                'ie8css!https://develop-cdn.sinooceangroup.com/libs/angular-seagull2-infrastructure/0.1.4/angular-seagull2-infrastructure.ie8']
        }
    }
});

require(['angular', 'webuploader',
    './javascript/app-routes'],    //注册路由
    function (angular, webuploader) {
        angular.element(document).ready(function () {
            angular.bootstrap(document, ['app']);
            angular.element(document).find('html').addClass('ng-app');
        });
        window.WebUploader = webuploader;
    });

 

 

B-自定义控件JS简单分析：

--->创建注入对象--->注册注入对象

 

C-使用示例：

define(function (require) {

    var app = require('javascript/app');

    app.controller('ActivityList-controller', function ($scope, $state, $http, seagull2Url, formatDateTime) {
    ///查询会议
        $scope.GetActivityList = function (pageIndex) {
            $scope.ActivityList = [];
            $http.get(seagull2Url.getPlatformUrl(configURL.GetProjectList) + '?pageIndex=' + pageIndex).success(function (data) {
                if (data.state) {
                    $scope.ActivityList = data.dataList;
                    $scope.pageCount = data.pageCount;
                }
            }).error(function (ex, state) {
                alert("数据加载失败！");
            });
        }
   });

});