MVC模式（以angularjs为例）

最新推荐文章于 2019-11-02 16:09:56 发布

chengzhang_jian

最新推荐文章于 2019-11-02 16:09:56 发布

阅读量360

点赞数

分类专栏： angularjs 文章标签： angularjs mvc

本文链接：https://blog.csdn.net/chengzhang_jian/article/details/78069602

版权

angularjs 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

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>

chengzhang_jian

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
MVC模式（以angularjs为例）

1.何为MVC模式Model 模型数据：在ng中定义的一些变量View 视图：通过ng指令和表达式增强版的htmlontroller 控制器：负责数据的增删改查的2.MVC的好处:在实现大型应用程序，可以通过将视图和数据隔离开，有效的降低代码的复杂度、耦合度3：在ng中应该怎么做才能实现一个SPA？①创建一个模块因为在ng中是以模块为基本单位的 var app = angular.mod
复制链接

扫一扫