您的位置：首页 > 理论基础 > 计算机网络

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

2018-02-01 14:25 603 查看

知识储备：$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

4000
}
};
return service;
}
]);

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

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航