I am using angularjs with requirejs to load modules dynamically.Currently i just want to load a controller for my page.But I am unable to register the controller.Is there anyway to do it?? Have pasted the code below:-
This is my bootstrap.js
require.config({
baseUrl: 'js',
paths: {
'jQuery': '../js/jquery-1.10.2',
'angular': '../js/angular.min',
//'CommonModule': '../js/commonControllers'
},
// files:["..js/bootsrap.js",
// "../js/commonControllers.js",
// "../js/commonTest.js"
// ],
shim: {
'angular' : {'exports' : 'angular'},
//'angular-route': { deps: ['angular']},
'jQuery': {'exports' : 'jQuery'},
// 'CommonModule':{deps: ['angular']}
},
deps: ['commonControllers']
});
CommonController.js
define('commonControllers',['angular','commonTest','require'], function (angular,require,$controllerProvider) {
alert("in define");
var commonControllers=angular.module('commonControllers',[]);
angular.bootstrap(commonControllers);
console.log(commonControllers);
// return angular.module('commonControllers', ['ngResource', 'ngRoute']);
return commonControllers;
});
commonTest.js
require(['commonControllers'], function (commonControllers,$http) {
alert("in CommonModule");
return commonControllers.controller('WorkFlowController', function() {
alert("in controller");
//List of work flows
$scope.workFlowList = [];
//Count of work flow counts
$scope.workFlowCount = 0;
//Get work flows
$scope.getWorkFlows = function () {
var currObj = this;
alert("in getWorkFlows");
// $scope.serviceUrl = 'http://localhost:9080/CWS2020POC/rest/workflowService
// /getWorkflowItemsForWorker/984516516';
$http.get($scope.serviceUrl).success(function(data) {
alert("in http");
eval(data);
currObj.workFlowList = data;
currObj.showOnUI();
});
}
$scope.add = function(){
this.workFlowList[this.workFlowList.length] = {caseId:'workflow2',caseName:'description2'};
}
//Add workflows to UI
$scope.addWorkFlowToUI = function(workFlow){
}
//refresh the work flows
$scope.refreshWorkFlows = function(){
$(this).getWorkFlows();
}
$scope.showOnUI = function(){
$("#loadingWorkFlowsDiv").hide();
$("#workFlowList").show();
this.workFlowCount = this.workFlowList.length
}
});
console.log(commonControllers.WorkFlowController);
console.log("commonControllers"+commonControllers.controller);
});
My Html file:-
<!DOCTYPE html>
<html>
<head>
<title>Angular and Require</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<meta name="format-detection" content="telephone=no">
<!--[if !IE]><!-->
<link rel="stylesheet" href="Styles/responsiveStyleIE.css">
<!--<![endif]-->
<link rel="stylesheet" type="text/css" media="screen" href="Styles/iconFonts.css" />
<!-- Color Themes Changes start -->
<style type="text/css">@import url("Styles/responsiveStyle.css");</style>
<style type="text/css">@import url("Styles/iconFonts.css");</style>
<style type="text/css">@import url("Styles/responsiveStyleIE.css");</style>
<style type="text/css">@import url("Styles/jquery-ui-1.10.4.custom.min.css");</style>
<style type="text/css">@import url("Styles/colorThemes.css");</style>
<link rel="stylesheet" type="text/css" media="screen" href="Styles/responsiveStyle.css" />
<!-- <link href='Styles/yellow.css' rel='stylesheet' type='text/css' />
<link href='Styles/lightYellow.css' rel='stylesheet' type='text/css' /> -->
<!-- <link href='Styles/colorThemes.css' rel='stylesheet' type='text/css' /> -->
<!-- Color Themes Changes end -->
<script data-main="js/bootstrap.js" src="js/require.js" ></script>
<!--<script src="js/commonTest.js" ></script>-->
</head>
<body>
<div class="container">
<div class="rightColumnLandingPage">
<div class="sideBarBox verticalSpace" ng-controller="WorkFlowController" ng-init="getWorkFlows();">
<!-- <div class="sidebarBoxHeader cursor-pointer" onclick="cw.openOverlay('sidebarOverlay', 'alertsList')"> -->
<div class="sidebarBoxHeader cursor-pointer">
<span class="floatLeft fontStyleH1">
<span class="icon-icon-05"></span>
<span>Workflow</span>
</span>
<span id="workFlowCnt" class="floatRight fontStyleH3" ng-model="workFlowCount">
{{workFlowCount}}
</span>
</div>
<div class="sidebarBoxContent customScroll">
<div id="workFlowList" style="display:none;">
<div class="sidebarRow cursor-pointer" onclick="cw.openCasePlan1(1);" ng-repeat="workFlow in workFlowList">
<span class="floatLeft">
<label id="label-alert-1" class="fontStyleLightText2 displayInline">{{workFlow.workflowName}}</label>
<label class="fontStyleDarkText2">{{workFlow.workflowDesc}}</label>
</span>
<span class="floatRight sidebarIcons">
<span class="icon-icon-04 iconSize1"></span>
<span class="icon-icon-25 iconSize1"></span>
</span>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
</code>
</code>
</code>
