zoukankan      html  css  js  c++  java
  • AngularJS学习之MVC模式

    AngularJS是谷歌开发维护的前端MVC框架,克服了HTML在构建应用上的不足,从而降低了开发的成本。

    在学习AngularJS之前,有必要和之前学过的jQuery进行对比。jQuery是javascript的一个类库(一系列函数的集合),而AngularJS是javascript的一个框架(一系列类库的集合)。还有一点重要的区别是,jQuery是以DOM操作为核心,而AngularJS则是以数据和逻辑为核心,这是它们本质上的区别,类似的框架还有BackBone、KnockoutJS、Vue、React。

    AngularJS有着诸多特性,最为核心的是:模块化、双向数据绑定、语义化标签、依赖注入等等,这些我在后面的学习中也会,做相应的记录。

    那么在深入学习AngularJS之前,有必要来了解一下MVC模式的概念,以及它在AngularJS中的体现。

    什么是MVC?

    MVC其实就是一种开发模式,有模型(model)、视图(view)、控制器(controller)3部分构成,采用这种方式为合理组织代码提供了方便,降低了代码间的耦合度,功能结构清晰可见。

    • Model:一般用来处理数据,包括读取和设置数据,一般指的是操作数据库。
    • View:一般用来展示数据,就是放数据,比如通过HTML来展示。
    • Controller:因为一个模块里面可能有多个视图和模型,控制器就起到了连接模型和视图的作用。

    下面引用网上的一张图片,清晰的说明了各部分的关系和作用。

    MVC.gif

    在AngularJS中的体现

    模块化是AngularJS的重要特性之一,所谓模块化,就是构建应用时,是以模块的方式进行组织的,就类比搭积木。

    一、首先定义应用,采用ng-app属性指定一个应用,表示此标签内所包裹的内容都属于APP的一部分。

    <html ng-app="App" lang="en">
    

    二、定义模块
    AngularJS提供了一个全局对象angular,在此全局对象下提供了很多属性和方法,其中的angular.module()方法用来定义一个模块

    //第一参数表示模块的名称,第二个参数表示此模块依赖的其它模块
    var app = angular.module('app',[]);
    

    其实应用就是一个很大的模块。

    三、定义控制器
    控制器作为模型和视图的桥梁,只要我们定义好了控制器,就相当于定义好了模型和视图。

    app.controller('StudentController',['$scope',function($scope){
    //定义模型,这个$scope对象就相当于用来获取数据的。
    $scope.students = [
      {name:'周杰伦',sex:'男',age:39}
    ];
    }]);
    

    控制器定义好了,但是要讲模型上的数据展示到视图上,就需要将控制器关联到视图上,通过为HTML标签添加ng-controller属性并赋值相应的控制器名称,就确定了关联关系。

    <table ng-controller='StudentController'>
      <tr><th>姓名</th><th>性别</th><th>年龄</th></tr>
    <tr ng-repeat="student in students">
        <td>{{student.name}}</td>
        <td>{{student.sex}}</td>
        <td>{{student.age}}</td>
    </tr>
    </table>
    

    以上就是MVC模式在AngularJS中的体现了。

  • 相关阅读:
    python从可迭代对象中取值
    python中可迭代对象和列表
    python中字典生成式
    Redis源码解析之跳跃表(一)
    Redis高可用集群
    Redis主从&哨兵集群搭建
    Java并发之ThreadPoolExecutor源码解析(三)
    Java并发之ThreadPoolExecutor源码解析(二)
    Java并发之ThreadPoolExecutor源码解析(一)
    并发编程之JMM&Volatile(三)
  • 原文地址:https://www.cnblogs.com/mcray/p/6731817.html
Copyright © 2011-2022 走看看