Question

我是Angularjs的新手，并且由于Dreamweaver是首选IDE，因此没有触及前端开发。在工作中，我的任务是为现有的Web服务添加新屏幕。以下是我正在使用的文件。由于这对我来说是全新的，并且Web服务已经非常强大，我正在尝试采用与我的同事相同的方法，因此我克隆了最简单的服务并削减了大量的服务。因此，我不会选择下面的约定，所以如果你有更好的练习，我很乐意听到它（特别是对这里发生的事情的解释可能并不明显）。

具体来说，我正在寻找明确我在制作自定义指令时所犯的错误，因为模板没有替换HTML标签。我认为这是因为我看到的教程没有指定哪个JS代码在哪里w.r.t.控制器，模块和服务。此外，我正在处理已经路由的页面，因此所有直接处理app.js和index.html的教程都没有用处。

autoDeploy.js控制器：

angular.module("gms.autoDeploy").controller('autoDeployController', function($scope) {
    var model = this;

    init();

    function init() {
        // A definitive place to put everything that needs to run when the controller starts. Avoid
        //  writing any code outside of this function that executes immediately.
        model.isInstantiated = true;

    }

    // This probably belongs in a different .js file.
    function tibCopy($timeout, $state) {
        return {
            restrict: 'E',
            replace: true,
            templateUrl: 'templates/tibcoCopy.tpl.html'
        };
    }
});

autoDeploy.module.js模块：

// why use iife?
(function(module) {
    'use strict';

    module.config(function($stateProvider) {
        $stateProvider.state('autoDeploy', {
            url: '/autoDeploy',
            views: {
                "main": {
                    controller: 'autoDeployController as autoDeploy',
                    templateUrl: 'autoDeploy/autoDeploy.tpl.html'
                }
            },
            data: { pageTitle: 'Automated Deployment' }
        });
    });

}(angular.module("gms.autoDeploy", [
    'ui.router'
])));

autoDeploy.service.js服务：

/*jslint node: true */
'use strict';

(function() { //start iife

    // Copied from simplest module in the web service, I don't know if the variables below will be needed, or what most of them are for.
    angular.module('gms.autoDeploy')
        .factory('autoDeployService', ["$http", "$q", "$log", "$cookies", "APP_CONFIGS", "SweetAlert", "$timeout", "GridSettingsService", "APP_USER", AutoDeployService]);


    // Copied like above, keeping it here because it seems important, like a constructor.
    function AutoDeployService($http, $q, $log, $cookies, APP_CONFIGS, $timeout, SweetAlert, GridSettingsService, APP_USER) {
        //return service object at bottom of function
        var gridStateEnabled = false;
        var l_gridState = { isSet: false };
        var srvDeferred = $q.defer();


        function processData() {
            //nothing here yet, but keeping to show the returned
            // 'service' variable holds a mapping of functions. Maybe it's how they can be called from the DOM?
        }


        var service = {
            processData: processData
        };

        return service;

    } //end autoDeployService
}()); //end iife

autoDeploy.tpl.html页面（此命名是否表示我的页面是模板？除index.html之外的所有源文件都具有.tpl扩展名;它们都是模板吗？）：

<h1>Automated Deployment</h1>

<head></head>

<body>
    <br/>
    <hr>
    <h3>TIBCO Promotion</p>
        <!-- Keeping both of these because I don't know which format is correct --> 
        <tib-copy></tib-copy>
        <tib-copy/>
</body>

子目录（命名模板，与上述文件位于同一目录级别）内是tibCopyDirective.js指令。我认为这是我操作中最不正确的部分：

var app = angular.module('tibCopy', []);

app.controller('autoDeployController', function($scope) {
    $scope.name = "world";
});

app.directive('tibCopy', function() {
    return {
        restrict: 'A',
        replace: 'true',
        templateUrl: 'templates/tibcoCopy.tpl.html'
    };
});

实际模板tibcoCopy.tpl.html：

<fieldset>
    <legend>Copy</legend>

    <div><input type="text" /></div>
    <br/>
    <div><input type="text" /></div>
    <br/>
    <div><input type="text" /></div>
    <br/>
    <div><input type="text" /></div>
</fieldset>

我只想让上面的模板显示在DOM上，这样我就可以通过点击按钮了解如何动态生成重复项。

编辑：

app_files: {
    js: [ './src/**/*.module.js', 'src/**/*.js', 'src/**/GMS2_0.js',       //include source files
         '!src/**/*.spec.js', '!src/assets/**/*.js', '!src/**/*.e2e.js', '!src/**/*.page.js' ],  //exclude test files
    jsunit: [ 'src/**/*.spec.js' ],     //unit tests for karma
    jse2e: [ 'src/**/*.e2e.js' ],       //end-to-end tests for protractor

    coffee: [ './src/**/*.module.coffee', 'src/**/*.coffee', '!src/**/*.spec.coffee' ],
    coffeeunit: [ 'src/**/*.spec.coffee' ],

    appTemplates: [ 'src/app/**/*.tpl.html' ],
    commonTemplates: [ 'src/common/**/*.tpl.html' ],
    mockData: [ 'src/common/dataMocks/**/*.json' ],

    webLogicData: [ 'enviroment_configs/WEB-INF/*' ],       //used for deploying to weblogic

    toBeCopied: [ 'src/common/layouts/**/*.html',
        'src/app/**/*.html', '!src/app/**/*.tpl.html' ],       //non-cached templates for modals

    html: [ 'src/index.html' ],
    less: ['src/less/main.less'] //Additional less files should be imported from main.less ... go there now, do not add here
},

AngularJS自定义指令组件布局

0 个答案: