创建一个基本的anjularjs项目

矫情吗；* 2022-05-19 08:46 162阅读 0赞

VIEW层：indexHtml.html

<!DOCTYPE html>
    <html >
    
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=9; IE=8; IE=7; IE=EDGE">
        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
        <title>SQL</title>
        
        <script type="text/javascript" src="../js/lib/angular.min.js"></script>
        <script type="text/javascript" src="../js/base.js"></script>
        <script type="text/javascript" src="../js/controller/indexController.js"></script>
        <script type="text/javascript" src="../js/service/indexService.js"></script>
    </head>
    <body class="findsql" ng-app="myApp"  ng-controller="indexController">
    <div class="total">
        <div class="admin" >
            <label>数据库用户:</label>
            <select ng-model="id">
                <option value="">---管理员---</option>
                <option value="1">*****</option>
                <option value="2">*****</option>
                <option value="3">*****</option>
            </select>
        </div>
        <br>
        <div class="inputSQL">
            <label style="align-self: auto">SQL:</label>
            <textarea ng-model="sql" placeholder="请输入SQL语句" style="width:600px;height:40px;"></textarea>
            <button ng-click="findsql()">查询</button>
        </div>
    </div><br>
    <div>
        <label>结果:</label>
            {
       {list}}
    </div>
    </body>

base.js:用于定义模块,方便划分$scope域

/**
     * Created by User on 2018/7/23.
     */
    var app = angular.module("myApp",[]);

控制层:indexController.js,用于进行业务逻辑判断,并调用服务层

/**
     * Created by User on 2018/7/23.
     */
    app.controller('indexController' ,function($scope,indexService ){
        $scope.findsql=function (){
            if($scope.id=="" || $scope.id==null){
                alert("请选择数据库用户");
                return;
            }
            if($scope.sql=="" || $scope.sql==null){
                alert("请输入SQL语句");
                return;
            }
            indexService.findsql($scope.sql,$scope.id).success(function (response) {
                $scope.list=response;
            });
        }
    });

服务层:indexService.js,用于获取接口数据

/**
     * Created by User on 2018/7/23.
     */
    app.service('indexService',function ($http) {
        this.findsql=function (sql,id) {
            return $http.get('http://localhost:************+id+'?sql='+sql);
        }
    });