CODEWITHSUNDEEP
angularjsangularjs-1.6
E.Meir
E.Meir

Reputation: 2216

controller and service for popup modal

I am fairly new to AngularJS (version 1.6), i have a little mission - to implement a new popup modal when clicking an "edit" button that will have some text-boxes to edit something.

I am failing to understand how to call each of js files and because of that i don't able to finish the "mission".

The app is currently built like that (new app- so i need to construct the base to be good).

index.cshtml Containing this code( on the portion that relevant to my mission)

 <p><a href="#" class="btn btn-primary btn-sm" role="button" ng-click="editCard(card)">Edit</a>

main.js

// application global namespace
var sulhome = sulhome || {};
sulhome.kanbanBoardApp = angular.module('kanbanBoardApp', []);
....

boardCtrl.js (portion from the start of page)

sulhome.kanbanBoardApp.controller('boardCtrl', function ($scope, boardService) {
// Model
$scope.board = {};
$scope.isLoading = false;

function init() {
...
......

There is a boardService.js also

What i am failing to understand is:

Now i need to add a popup form edit.html and a controller and a service (i want to add another controller cause i want to keep a separation and for understandability also).

How can i connect them all together? for example: from the boardCtrl.js call the edit-controller.js and from the edit-controller, use the edit service?

Upvotes: 0

Views: 1258

Answers (3)

Zakaria ASSANI
Zakaria ASSANI

Reputation: 286

This is the real eaxmple , hope it help you !

<!DOCTYPE html>
<html ng-app="injectService">
<head>
    <title>Test Angular Inject Service</title>
    <style type="text/css">
        body{
            margin:0;
            padding:0;
            width: 100%;
            height: 100%;
            position: absolute;
            text-align: center;
        }

        body > input{
                width: 25%;
                height: 50px;
                background: #adbfbf;
                border: 0px;
                margin-top: 5%;
        }

    </style>
</head>
<body ng-controller="testCtrl as Test">
    <input type="button" name="test" value="Click me !" ng-click="Test.test()">
</body>

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.2/angular.min.js"></script>
<script type="text/javascript">
    angular.module('injectService', []);


    //service
    (function () {
    'use strict';

    angular
        .module('injectService')
        .factory('testService', testService);

    function testService() {
        var service = {
            getAction              : getAction
        };

        return service;

        function getAction() {
           alert('test yoho !')
        }

    }

})();

    //controller
    (function () {
    'use strict';

    angular
        .module('injectService')
        .controller('testCtrl', testCtrl);

    testCtrl.$inject = ['testService'];

    function testCtrl(testService) {
        var vm = this;

        vm.test = function(){
            testService.getAction();    
        }
    }

})();

</script>
</html>

Upvotes: 1

Mistalis
Mistalis

Reputation: 18299

As I understand, your question is more about how to structure your code using controllers and services. So here is a little example of what it can be:

<head>
    <!-- Import your JS files in index.html -->
    <script src="topController.js/>
    <script src="middleController.js/>
    <script src="dataService.js/>
</head>

<div ng-app="myApp">
  <div ng-controller="TopController">
       Controlled by TopController
  </div>

  <div ng-controller="MiddleController">
      Controlled by MiddleController
  </div>
</div>

Where controllers and service are defined as the following:

myApp.controller('TopController', function($scope, Data) {
  $scope.data = Data;
});

myApp.controller('MiddleController', function($scope, Data) {
  $scope.data = Data;
});

myApp.factory('Data', function() {
  obj = {
    "topValue": "top",
    "middleValue": "middle",
    clear: function() {
      this.topValue = "";
      this.middleValue = "clear";
    }
  };
  return obj;
});

Test it on JSFiddle

Upvotes: 0

Zakaria ASSANI
Zakaria ASSANI

Reputation: 286

if i understand your question you want to inject your service to your controllers.

example:

sulhome.kanbanBoardApp.factory('requestService', function($http, $cookies){

    var factory = {


        sendRequest: function(method, url, params){

            }
    };

    return factory;

});

And in your controller inject the service as variable dependencies

sulhome.kanbanBoardApp.controller('boardCtrl', function ($scope, boardService, requestService) {

//write your code here
//you can call your service like

 requestFactory.sendRequest();
}

Upvotes: 1

Related Questions