AngularJS基于创建一个完整的mvc模板，（$http访问数据）

最新推荐文章于 2020-12-20 17:18:09 发布

old_amazing

最新推荐文章于 2020-12-20 17:18:09 发布

阅读量267

点赞数

本文链接：https://blog.csdn.net/m0_37320204/article/details/79227723

版权

知识储备：$http要访问的url是我用easy mock模拟的假数据，也可以用json库。

本文要用到angular的promise对象的知识，建议大家去看一下Angularjs promise对象解析

什么是MVC:

MVC其实就是一种开发模式，有模型（model）、视图（view）、控制器（controller）3部分构成，采用这种方式为合理组织代码提供了方便，降低了代码间的耦合度，功能结构清晰可见。

Model：一般用来处理数据，包括读取和设置数据，一般指的是操作数据库。
View：一般用来展示数据，就是放数据，比如通过HTML来展示。
Controller：因为一个模块里面可能有多个视图和模型，控制器就起到了连接模型和视图的作用。
下面引用网上一张图片，说明各部分之间的关系：

在angular中的体现，HTML文件：

<!DOCTYPE html>
<html lang="en" ng-app="mvcApp">
<head>
    <meta charset="UTF-8" >
    <title>Title</title>
    <script src="../angular/angular.min.js"></script>
    <script src="../node_modules/q/q.js"></script>
    <script src="./mvc_severse.js"></script>
    <script src="./mvc_controller.js"></script>
</head>
<body ng-controller="MyCtrl">
    请输入姓名：<input type="text" ng-model="name"><br>
    输入的内容是：<span>{{name}}</span><br>
    请输入密码：<input type="text" ng-model="password">
    <button ng-click="btn()">登录</button>
    <div>
        <p>{{msg}}</p>
    </div>

</body>
</html>

2.定义模块，一般都是用angular.module()方法定义一个模块（controller文件）

page.controller('MyCtrl',["$scope",'MvcService',function ($scope,MvcService) {
    $scope.btn=function () {
        MvcService.getName().then(function (response) {
                console.log("请求成功" + response);
                $scope.msg=response;
                if (angular.isObject(response)) {
                    console.log("登陆成功，跳转");
                } else {
                    console.log("登录失败");
                }
            },
            function error(response) {
                console.log("请求失败")
            });
    }
}]);

3.我声明一个sercice文件，用来存放service访问url。

/**
 * Created by Administrator on 2018/1/31.
 */
var page = angular.module("mvcApp",[]);
page.factory('MvcService', ['$http','$q',function($http,$q) {
        var service = {
            getName:function () {
                var defer=$q.defer();  //声明延后执行
                $http.get("https://www.easy-mock.com/mock/5a1fa1425bc39d4cf3b75598/example/ui_grid")
                    .success(function(data){
                    defer.resolve(data);  //声明执行成功
                }).
                error(function(){
                    defer.reject();      //声明执行失败
                });
                return defer.promise; //返回承诺，返回获取数据的API
            }
        };
        return service;
    }
]);

以上就是一个完整的mvc模板的体现。我参考的文章有 angularJS学习之mvc模式。

希望大家指正。

old_amazing

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
AngularJS基于创建一个完整的mvc模板，（$http访问数据）

知识储备：$http要访问的url是我用easy mock模拟的假数据，也可以用json库。本文要用到angular的promise对象的知识，建议大家去看一下Angularjs promise对象解析什么是MVC:MVC其实就是一种开发模式，有模型（model）、视图（view）、控制器（controller）3部分构成，采用这种方式为合理组织代码提供了方便，降低了代码间
复制链接

扫一扫