MVC模式（以angularjs为例）

来源：互联网发布：幼儿教育发展前景知乎编辑：程序博客网时间：2024/05/29 18:11

1.何为MVC模式

Model 模型数据：在ng中定义的一些变量
View 视图：通过ng指令和表达式增强版的html
ontroller 控制器：负责数据的增删改查的

MVC的工作原理：

View视图接收用户的输入，通过控制器（Controller）当中的方法，完成对于Model的增删改查的操作。
数据绑定：将数据和视图绑定起来，一旦数据被修改了，视图就会更新

angular四大特征：

①采用了MVC的设计模式
Model 模型数据
View 视图
Controller 控制器

MVC的工作原理：
View视图接收用户的输入，通过控制器（Controller）当中的方法，完成对于Model的增删改查的操作。
数据绑定：将数据和视图绑定起来，一旦数据被修改了，视图就会更新

②双向数据绑定
数据-》视图
视图用户的输入 -》数据

③依赖注入

④模块化设计

2.MVC的好处:

在实现大型应用程序，可以通过将视图和数据隔离开，有效的降低代码的复杂度、耦合度

3：在ng中应该怎么做才能实现一个SPA？

①创建一个模块

因为在ng中是以模块为基本单位的
var app = angular.module(‘模块的名称’，[‘依赖模块1’,’依赖模块2’])
如： var app = angular.module('myModule',['ng']);

②使用模块

采用ngApp指令：一般写在html或者body
如：<html ng-app="模块的名称"></html>

③创建一个控制器

app.controller(‘控制器的名称’,function(){})
第二个参数是控制器被调用时，要执行的方法

④调用控制器

采用ngController指令来调用控制器

<div ng-controller='控制器的名称'></div>

⑤实现数据的创建和显示等：

操作数据、显示出来
值得注意的是：
①scope是一个对象，称之为作用域对象，是一个非常重要的概念，建立起控制器中的数据和控制器的所指定的视图的桥梁。②由于ngInit和scope都可以完成数据的初始化，建议使用$scope,因为ngInit会增加代码的耦合度和复杂度。

绑定事件的时候，在ng的做法：

 <any ng-eventName="handle()"> <button> ng-click="handleClick()"></button>如：点击事件 ng-click="handle()"

下面享上一个demo

<!DOCTYPE html><html ng-app="myApp"><!--2调用模板--><head lang="en">  <meta charset="UTF-8">  <script src="js/angular.js"></script>  <title></title></head><body><!--4完成控制器的调用,同时指定了$scope中定义的模型数据的作用范围--><div ng-controller="myCtrl">  <p>{{number}}</p></div><script>  //1、模块的创建  //注意事项：module方法的第二个参数是一个有模块名称字符串所构成的数组  var app = angular.module('myApp',['ng']);  //2、调用模块  //借助于ngApp  //3、创建控制器  app.controller('myCtrl', function ($scope) {    console.log('myCtrl 指定的方法被调用了!');    //定义一个Model模型数据    //$scope是建立数据和视图的桥梁，    // 并不能直接拿来用，可以在控制器的处理函数中    // 的形参中指定$scope,然后就可以用了    $scope.number = 10;  });  //4、调用控制器  // ngController</script></body></html>

阅读全文

0 0