AngularJS学习（MVVM框架入门）

最新推荐文章于 2021-05-26 20:01:42 发布

zyz0728

最新推荐文章于 2021-05-26 20:01:42 发布

阅读量1.1k

点赞数

分类专栏： AngularJS JavaScript

本文链接：https://blog.csdn.net/zyz0728/article/details/50849088

版权

JavaScript 同时被 2 个专栏收录

10 篇文章 0 订阅

订阅专栏

AngularJS

1 篇文章 0 订阅

订阅专栏

首先我们需要了解什么事mvvm框架

MVVM是Model-View-ViewModel的简写。微软的WPF带来了新的技术体验，如Silverlight、音频、视频、3D、动画……，这导致了软件UI层更加细节化、可定制化。同时，在技术层面，WPF也带来了诸如Binding、Dependency Property、Routed Events、Command、DataTemplate、ControlTemplate等新特性。MVVM（Model-View-ViewModel）框架的由来便是MVP（Model-View-Presenter）模式与WPF结合的应用方式时发展演变过来的一种新型架构框架。它立足于原有MVP框架并且把WPF的新特性糅合进去，以应对客户日益复杂的需求变化。

我们再来概述一下MVVM框架的优点

MVVM模式和MVC模式一样，主要目的是分离视图（View）和模型（Model），有几大优点

1. 低耦合。视图（View）可以独立于Model变化和修改，一个ViewModel可以绑定到不同的"View"上，当View变化的时候Model可以不变，当Model变化的时候View也可以不变。

2. 可重用性。你可以把一些视图逻辑放在一个ViewModel里面，让很多view重用这段视图逻辑。

3. 独立开发。开发人员可以专注于业务逻辑和数据的开发（ViewModel），设计人员可以专注于页面设计，使用Expression Blend可以很容易设计界面并生成xaml代码。

4. 可测试。界面素来是比较难于测试的，而现在测试可以针对ViewModel来写。

接下来我们需要做的是如何来写一个运用到AngularJS的网页

首先我们需要下载angularjs的包这个自行百度就行啦

然后按照使用Jquery一样将包引入到自己的网页中

下面我们会用到一些常规的Angularjs语法

ng-app ng-app指令标记了AngularJS脚本的作用域，在<html>中添加ng-app属性即说明整个<html>都是AngularJS脚本作用域。开发者也可以在局部使用ng-app指令，如<div ng-app>，则AngularJS脚本仅在该<div>中运行。

双大括号表示绑定的表达式

<p>Nothing here {{'yet' + '!'}}</p>

<html ng-app>
<head>
  ...
  <script src="lib/angular/angular.js"></script>
  <script src="js/controllers.js"></script>
</head>
<body ng-controller="PhoneListCtrl">

  <ul>
    <li ng-repeat="phone in phones">
      {{phone.name}}
    <p>{{phone.snippet}}</p>
    </li>
  </ul>
</body>
</html>

上面是一个一简单的视图和模板的例子

ng-repeat 使这段代码重复利用这是一个迭代器告诉angularjs重复这样的操作将会生成标签内部所有HTML元素的一份拷贝，包括放指令的一个标签

ng-controller

ng-module 你的模型

ng-bind=={{}}

ng-show 测试

ng-hide

function PhoneListCtrl($scope) {
  $scope.phones = [
    {"name": "Nexus S",
     "snippet": "Fast just got faster with Nexus S."},
    {"name": "Motorola XOOM™ with Wi-Fi",
     "snippet": "The Next, Next Generation tablet."},
    {"name": "MOTOROLA XOOM™",
     "snippet": "The Next, Next Generation tablet."}
  ];
}

这里就是一个简单的控制器的例子

$scope

zyz0728

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
AngularJS学习（MVVM框架入门）

首先我们需要了解什么事mvvm框架MVVM是Model-View-ViewModel的简写。微软的WPF带来了新的技术体验，如Silverlight、音频、视频、3D、动画……，这导致了软件UI层更加细节化、可定制化。同时，在技术层面，WPF也带来了诸如Binding、Dependency Property、Routed Events、Command、DataTemplate、C
复制链接

扫一扫

专栏目录