I'm new to Angularjs and haven't touched front-end development since Dreamweaver was the go-to IDE. At work, I'm tasked with adding a new screen to an existing web service. Below are the files I'm working with. Since this is all new to me, and the web service is already really robust, I'm trying to take the same approach as my colleagues, so I've cloned the simplest service and cut a lot of it out. Therefore the conventions and such below are not chosen by me, so if you have a better practice I would love to hear about it (especially explanations of things that are happening here that may not be obvious).
Specifically, I'm looking for clarity on what I'm doing wrong with making a custom directive because the template isn't replacing the HTML tag. I think it's because the tutorials I see don't specify which JS code goes where w.r.t. the controller, module, and the service. Furthermore, I'm working on an already routed page, so all of the tutorials dealing directly with app.js and index.html aren't really helpful.
autoDeploy.js Controller:
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 Module:
// 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 Service:
/*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 page (does this naming indicate that my page is a template? All source files other than index.html have the .tpl extension; are they all templates?):
<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>
Inside of a sub-directory (named templates, and at the same directory level as the above files) is the tibCopyDirective.js directive. I think this is the most incorrect part of my operation:
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'
};
});
And the actual template, 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>
I just want the above template to show up on the DOM so I can learn how to dynamically generate duplicates via the click of a button.
EDIT:
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
},
