简体   繁体   中英

Spring boot angularJS application JAVA JS

I have posted some code which i write while i am learning angularjs. I`ve made a resource file to get rest calls from the back-end and a controller where i am calling this function but i do not know how to call the controller in the index.html file.

controller

   (function () {
        'use strict';

        angular.module('carApp').controller('HomeController',
            HomeController);

        HomeController.$inject = ['$rootScope', '$scope', 'HomeResourceService'];

        function HomeController($rootScope, $scope, HomeResourceService) {

            var vm = this;

             function loadTestData(key, value) {
                vm.test = undefined;

                return HomeResourceService.getTestData(key,
                    value).then(function (response) {
                    vm.test = response.data;
                }).catch(function () {
                    console.log('Error when try to get test data!');
                });
            }
        }
    })();

index.html

<!DOCTYPE html>
    <html lang="en" xmlns="http://www.w3.org/1999/html">
    <head>
        <meta charset="UTF-8">
        <title>SCARS HOME</title>
    </head>
    <body ng-app="carApp">

    <script
            src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.4/angular.js">

    </script>
    <script src="app/app.js"></script>
    <script src="app/home/home-resource.js"></script>
    <script src="app/home/home-controller.js"></script>
    </body>
    </html>

resource

    (function() {
        'use strict';

        angular.module('carApp').factory('HomeResourceService',
            HomeResourceService);

        HomeResourceService.$inject = [ '$http' ];

        function HomeResourceService($http) {
            var service = {};

            var getTestDataUrl = '/api/data';

            service.getTestData = function(key, value) {
                return $http({
                    method : "GET",
                    url : getTestDataUrl,
                    params : {
                        operator : key,
                        market : value
                    }
                });
            };

            return service;


}
})();

you can all controller using ng-controller provided with controller name.In your case it is HomeController .

For example: if you have some login page and you want to call loginController in your login page, you can call it like below code snippet.

<div ng-controller="LoginController as login" class="col-xs-12 loginForm">
    <div class="center-deck">

    </div>
</div>

and your controller will be like that:-

(function() {
"use strict";
angular.module("login").controller("LoginController", LoginController);

LoginController.$inject = ["$location",'$rootScope', '$window', '$scope'];

function LoginController($location, $rootScope, $window, $scope) {
    var _this = this;
    $rootScope.showHeader = false;
    $scope.loginError = false;
    _this.authenticate = authenticate;

    function authenticate() {
        if($scope.login.username === "mail id" && $scope.login.password === "your password") {
            $location.path('/dashboard');
            $scope.loginError = false;
        } else {
            $scope.loginError = true;
            $location.path("/login");
        }
    }
}
})();

It show how you can implement login call functionality in your project.

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM