controller and service for popup modal

Question

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?

Maybe you want to use [UI Bootstrap](https://angular-ui.github.io/bootstrap/#!#modal) or [AngularStrap](http://mgcrea.github.io/angular-strap/#/modals) for implementing modals. There you can easily define your template files and controllers when opening a modal. And the service can be injected into the controller as usual. — Brakebein, Mar 07 '17 at 12:42
i will eventually - when done to implement the "simple part", will have to use `http://schemaform.io`. Do i need new controller for the form? — E.Meir, Mar 07 '17 at 12:46
Well, I haven't used schemaform yet. But you will probably have a controller for your modal where you can process the output of the schemaform directives (e.g. into a request). — Brakebein, Mar 07 '17 at 13:13
i other words- my question is, do i need to add a `new controller` and `new service` file for the modal form handle? — E.Meir, Mar 07 '17 at 13:14

score 1 · Answer 1 · answered Mar 07 '17 at 12:40

1

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();
}

answered Mar 07 '17 at 12:40

Zakaria ASSANI

276
2
12

yes- you understand it correctly, but yet- i am failing to understand, to `boardCtrl` you inject `requestService`, but where do you inject the `request`? do i need a whole new controller for that? – E.Meir Mar 07 '17 at 12:43
No you need only to include your js file to your DOM like normal script before your ap^lication declaration of course. like – Zakaria ASSANI Mar 07 '17 at 12:47
So, i will not need to use another controller? in an application- best practice is to use one main controller, and from it > use services? – E.Meir Mar 07 '17 at 12:49
Eh no, best practice is to separate your application to many folders read this [link] (https://github.com/johnpapa/angular-styleguide/blob/master/a1/README.md) He wiil teach you the best way to use AngularJS. – Zakaria ASSANI Mar 07 '17 at 12:51
I will, Thanks! just to be sure - here in your example, you meant just to add a service that will be injected into the controller? – E.Meir Mar 07 '17 at 12:56
Yes, create your service, add to your HTML, and inject to controller and enjoy !! – Zakaria ASSANI Mar 07 '17 at 12:59
Tried to enjoy :) but something is not correct. i added a service file, injected it to the controller and i am getting this error in console `Error: [$injector:unpr] Unknown provider: boardCtrlProvider <- boardCtrl <- cardService` - not sure why.. – E.Meir Mar 07 '17 at 13:13
Inject the service directly in your controller and change the controller name to your real controller ! – Zakaria ASSANI Mar 07 '17 at 14:10
tried that and i am getting this error: `Error: [$injector:unpr] Unknown provider: boardCtrlProvider <- boardCtrl <- cardService` – E.Meir Mar 07 '17 at 14:34

score 1 · Accepted Answer · edited Mar 10 '17 at 08:20

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>

score 0 · Answer 3 · answered Mar 07 '17 at 12:54

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

controller and service for popup modal

3 Answers3