什么是Model1和Model2?请解释它们各自的特点

Posted 2023-04-10

MODEL1在一定程序上实现了MVC,即JSP是控制层与表示层合二为一了,BEAN则为模式层.这样的效果显然不如将控制层单独划分出来的好.而MODEL2则是将控制层(SERVLET)单独的划分出来了,专门负责业务流程的控制,接受页面的请求,创建所需的JAVABEAN实例,并将处理后的数据再返回给JSP,这样的效果显然要好的多.
model 2体系结构，是一种把JSP与servlets联合使用来实现动态内容服务的方法。它吸取了两种技术各自的突出优点，用JSP生成表达层的内容，让servlets完成深层次的处理任务。在这里，servlets充当控制者的角色，负责管理对请求的处理，创建JSP页需要使用的bean和对象，同时根据用户的动作决定把那个JSP页传给请求者。特别要注意，在JSP页内没有处理逻辑；它仅负责检索原先由servlets创建的对象或beans，从servlet中提取动态内容插入静态模板。在我看来，这是一种有代表性的方法，它清晰地分离了表达和内容，明确了角色的定义以及开发者与网页设计者的分工。事实上，项目越复杂，使用Model 2体系结构的好处就越大。 参考技术A 就是jsp+javabean和jsp+servlet+javabean两种模式，前者是纯JSP，后者是简单的MVC，
是SUN公司对于MVC模式所先后推出的二种规范,第一种是JSP MODEL1,第二种则是JSP MODEL2.
MODEL1在一定程序上实现了MVC,即JSP是控制层与表示层合二为一了,BEAN则为模式层.这样的效果显然不如将控制层单独划分出来的好.而MODEL2则是将控制层(SERVLET)单独的划分出来了,专门负责业务流程的控制,接受页面的请求,创建所需的JAVABEAN实例,并将处理后的数据再返回给JSP,这样的效果显然要好的多.
简单的说就是耦合度松紧的问题...
除非项目非常简单 建议用MODEL2，控制层与表示层混合写起来，很烦的 参考技术B Model1是jsp+javabean jsp既充当显示层又充当控制层！（不推荐使用）
Model2是jsp+servlet+javabean 这里jsp只用充当显示层而控制层则交给了servlet处理

ng-model 和 ng-bind 有啥区别

【中文标题】ng-model 和 ng-bind 有啥区别

【英文标题】：What's the difference between ng-model and ng-bindng-model 和 ng-bind 有什么区别

【发布时间】：2012-09-07 07:54:25

【问题描述】：

我目前正在学习 AngularJS，但很难理解 ng-bind 和 ng-model 之间的区别。

谁能告诉我它们有何不同以及何时应该使用其中一个而不是另一个？

【参考方案1】：

如果您在使用ng-bind 或ng-model 之间犹豫不决，请尝试回答以下问题：

---

您只需要显示数据吗？

是：ng-bind（单向绑定）

编号：ng-model（双向绑定）

您是否需要绑定文本内容（而不是值）？

是：ng-bind

否：ng-model （你不应该在需要值的地方使用 ng-bind）

你的标签是 HTML <input>吗？

是：ng-model （你不能使用带有<input>标签的ng-bind）

编号：ng-bind

【参考方案2】：

ng-model

AngularJS 中的

ng-model 指令是将应用程序中使用的变量与输入组件绑定的最大优势之一。这作为双向数据绑定工作。如果您想更好地了解双向绑定，您有一个输入组件，并且更新到该字段的值必须反映在应用程序的其他部分。更好的解决方案是将变量绑定到该字段并在您希望通过应用程序显示更新值的任何位置输出该变量。

ng-bind

ng-bind 的工作方式与 ng-model 大不相同。 ng-bind 是一种数据绑定方式，用于将 html 组件内部的值显示为内部 HTML。该指令不能用于与变量绑定，只能用于与 HTML 元素内容绑定。事实上，这可以与 ng-model 一起使用，将组件绑定到 HTML 元素。该指令对于使用内部 HTML 内容更新 div、span 等块非常有用。

This example 会帮助你理解。

【参考方案3】：

我们可以使用 ng-bind 和 <p> 来显示，我们可以使用 ng-bind model 的快捷方式，我们不能使用 ng-bind 和 html 输入控件，但我们可以使用 ng-bind model 的快捷方式和 html 输入控件。

<input type="text" ng-model="name" placeholder="Enter Something"/>
<input type="text" value="name" placeholder="Enter Something"/>
  Hello name
<p ng-bind="name"</p>

【参考方案4】：

ngModel 通常用于输入标签以绑定变量，我们可以从控制器和 html 页面更改变量，但 ngBind 用于在 html 页面中显示变量，我们可以仅从控制器更改变量，html 仅显示变量。

【参考方案5】：

ngModel

ngModel 指令将输入、选择、文本区域（或自定义表单控件）绑定到范围上的属性。

此指令以优先级 1 执行。

例如Plunker

JAVASCRIPT

angular.module('inputExample', [])
   .controller('ExampleController', ['$scope', function($scope) 
     $scope.val = '1';
]);

CSS

.my-input 
    -webkit-transition:all linear 0.5s;
    transition:all linear 0.5s;
    background: transparent;

.my-input.ng-invalid 
    color:white;
    background: red;

HTML

<p id="inputDescription">
   Update input to see transitions when valid/invalid.
   Integer is a valid value.
</p>
<form name="testForm" ng-controller="ExampleController">
    <input ng-model="val" ng-pattern="/^\d+$/" name="anim" class="my-input"
         aria-describedby="inputDescription" />
</form>

ngModel 负责：

将视图绑定到模型中，其他指令如 输入、文本区域或选择要求。 提供验证行为（即要求、号码、电子邮件、网址）。 保持控件的状态（有效/无效，脏/原始， 触摸/未触摸，验证错误）。 在元素上设置相关的 css 类（ng-valid、ng-invalid、 ng-dirty、ng-pristine、ng-touched、ng-untouched）包括 动画。 使用其父窗体注册控件。

ngBind

ngBind 属性告诉 Angular 将指定 HTML 元素的文本内容替换为给定表达式的值，并在该表达式的值更改时更新文本内容。

此指令以优先级 0 执行。

例如Plunker

JAVASCRIPT

angular.module('bindExample', [])
    .controller('ExampleController', ['$scope', function($scope) 
    $scope.name = 'Whirled';
]);

HTML

<div ng-controller="ExampleController">
  <label>Enter name: <input type="text" ng-model="name"></label><br>
  Hello <span ng-bind="name"></span>!
</div>

ngBind 负责：

将指定 HTML 元素的文本内容替换为 给定表达式的值。

【讨论】：

虽然我很欣赏这种彻底的回应，但我之前选择的答案仍将保留，因为它提供了足够的信息来理解差异。

【参考方案6】：

angular.module('testApp',[]).controller('testCTRL',function($scope)
                               

  
$scope.testingModel = "This is ModelData.If you change textbox data it will reflected here..because model is two way binding reflected in both.";
$scope.testingBind = "This is BindData.You can't change this beacause it is binded with html..In above textBox i tried to use bind, but it is not working because it is one way binding.";            
);

div input
width:600px;  

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<head>Diff b/w model and bind</head>
<body data-ng-app="testApp">
    <div data-ng-controller="testCTRL">
        Model-Data : <input type="text" data-ng-model="testingModel">
        <p>testingModel</p>
          <input type="text" data-ng-bind="testingBind">
          <p ng-bind="testingBind"></p>
    </div>
</body>

【参考方案7】：

ng-bind 具有单向数据绑定（$scope --> 视图）。它有一个快捷方式 val 它显示插入到 html 中的范围值 $scope.val，其中 val 是一个变量名。

ng-model 旨在放置在表单元素中，并具有双向数据绑定（$scope --> view 和 view --> $scope），例如<input ng-model="val"/>.

【讨论】：

谢谢你。如果说 ng-bind 仅在要显示的值不需要用户输入的情况下才需要，这是一个公平的假设吗？并且，ng-modal 将用于执行此操作的值 ()。角度文档似乎暗示了这一点，但我在更好地理解之后。

@Marc 实际上 ng-bind 绑定的是元素的文本内容，而不是它的值。因此，它不能在 元素中使用。

@Marc，在这种情况下，只需使用：

@JakubBarczyk ::va 是一次性绑定，而不是一种方式。

@Wachburn 这是单向的，但更重要的是它是一次性的。在模型获取任何值后，它会停止观察模型的变化。因此，如果我们需要常规的单向绑定，它不能用作单向绑定。

【参考方案8】：

tosh 的回答很好地触及了问题的核心。这里有一些额外的信息......

过滤器和格式化程序

ng-bind 和ng-model 都具有在将数据输出给用户之前转换数据的概念。为此，ng-bind 使用过滤器，而ng-model 使用格式化程序。

过滤器（ng-bind）

使用ng-bind，您可以使用过滤器 来转换您的数据。例如，

<div ng-bind="mystring | uppercase"></div>,

或更简单地说：

<div>mystring | uppercase</div>

注意uppercase is a built-in angular filter，虽然你也可以build your own filter。

格式化程序（ng-model）

要创建 ng-model 格式化程序，您需要创建一个执行 require: 'ngModel' 的指令，该指令允许该指令访问 ngModel 的 controller。例如：

app.directive('myModelFormatter', function() 
  return 
    require: 'ngModel',
    link: function(scope, element, attrs, controller) 
     controller.$formatters.push(function(value) 
        return value.toUpperCase();
      );
    
  

然后在你的部分：

<input ngModel="mystring" my-model-formatter />

这基本上是ng-model 等效于uppercase 过滤器 在上面的ng-bind 示例中所做的事情。

---

解析器

现在，如果您打算允许用户更改mystring 的值怎么办？ ng-bind 只有一种方式绑定，从 model-->view。但是，ng-model 可以从 view-->model 绑定，这意味着您可以允许用户更改模型的数据，并使用 解析器 em> 您可以以一种简化的方式格式化用户的数据。看起来是这样的：

app.directive('myModelFormatter', function() 
  return 
    require: 'ngModel',
    link: function(scope, element, attrs, controller) 
     controller.$parsers.push(function(value) 
        return value.toLowerCase();
      );
    
  

---

Play with a live plunker of the ng-model formatter/parser examples

---

还有什么？

ng-model 也有内置验证。只需修改您的$parsers 或$formatters 函数以调用ngModel's controller.$setValidity(validationErrorKey, isValid) function。

Angular 1.3 has a new $validators array 可用于验证，而不是 $parsers 或 $formatters。

Angular 1.3 also has getter/setter support for ngModel

【讨论】：

+ 1. 感谢您提供额外信息。有一个快速的答案（Tosh's）总是很好/很好，然后像你这样详细的为什么和如何回答，以便在推理/用例中学习/理解更多。