繁体   English   中英

Spring Boot angularJS应用程序JAVA JS

[英]Spring boot angularJS application JAVA JS

我发布了一些在学习angularjs时编写的代码。 我已经制作了一个资源文件,可以从后端和我正在调用此函数的控制器中获取剩余调用,但是我不知道如何在index.html文件中调用该控制器。

调节器

   (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>

资源

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


}
})();

您都可以利用控制器提供控制器name.In你的情况NG控制器HomeController的

例如:如果您有一些登录页面,并且想要在登录页面中调用loginController,则可以像下面的代码片段中那样调用它。

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

    </div>
</div>

您的控制器将是这样的:

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

它显示了如何在项目中实现登录呼叫功能。

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

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