华山资源网

angularjs学习笔记之三大模块（modal，controller，view）
网络编程 2024/11/18 佚名
3 1

今天主要跟大家详细讲解一下angularjs的三大模块： modal，controller，view。

首先跟大家说一下这三个模块之间的关系。

1.数据模型（modal）主要提供数据。它不会和视图（view）直接操作。

2.controller保存modal提供的数据，与视图进行操作。

3.view是视图，也就是页面展示。

4.总而言之，controller负责数据和视图之间的通信，就是两者的接口人。他们分工明确，实现了模块化。

一.如何使用数据模型（modal）？

   讲到数据模型，我们再来看一下上一节教程的例子：

<!DOCTYPE html>
 <html ng-app="app"> 
   <head>
   <meta charset="UTF-8">
   <title>Document</title>
     <script src="/UploadFiles/2021-04-02/angular.js">


   1.首先引入，angularjs包，启动的时候先是去找ng-app指令，也就指定了整个的作用域；


   2.然后会继续找具体的指令，这里会找到ng-model，定义了一个“text”的数据模型。


   3.下面使用了text的这个模型，所以实现了双向绑定。（只要是在ng-app的作用域内，都能直接使用text）


二.如何使用控制器（controller）？


   首先说一下使用控制器的几个要点：


       1.不要视图复用controller，一个控制器一般只负责一小块视图（一一对应）；


       2.不要在controller中直接操作DOM，这不是控制器的职责，操作DOM要使用指令derective（见上节教程）；


       3.不要在controller中进行数据过滤的操作，有专门的filter服务来实现这一块；


       4.一般来说，不同的controller之间是不互相调用的，控制器的交互一般通过事件进行。


    然后我们来看上面代码蓝色的部分，controll.js的内容是：





 function controller($scope){
   $scope.greeting = {
     text : 'hello'
   };
 }






    angularjs找到一个ng-controller的指令，然后会找到定义这个指令的地方，就是controll.js文件，然后可以使用greeting.text直接获取到他的值。


三.如何使用视图（view）？


    说到如何使用视图，就必须提到directive。（这里是新的知识了哟！！！！）


    下面来看一段代码：





var appModule = angular.module('app', []); //app是html中ng-app指令的名称

appModule.directive('hello', function() { //定义一个指令，名称叫hello
  return {
    restrict: 'E',
    template: '<div>Hi there</div>',
    replace: true
  };
});







   上面的代码定义了一个指令标签，你可以直接在html中试试<hello></hello>，看看会发生什么吧！！！


   然后我再讲解一下每个属性的含义：


   1.restrict ：（字符串）可选参数，指明指令在DOM里面以什么形式被声明。取值有：E(元素),A(属性),C(类),M(注释)；上面的例子设置为元素形式（<hello></hello>）；


   2.template： （字符串或者函数）可选参数，返回的内容，上面的例子返回的是一个div；


   3.templateUrl: 同上，通过url返回内容，如果返回内容很多，则建议使用此属性。


   4.relace：（布尔值），默认值为false。上面的例子设为了true：页面使用hello标签后会被返回的div代替。


   5.transclude：（布尔值），当设为true时。这个配置选项可以让我们提取包含在指令那个元素里面的内容，再将它放置在指令模板的特定位置，与ng-transclude合用。


   6.还有一些其他属性，具体大家再慢慢了解吧。。。


OK，以上就是对这3个主要模块的使用说明了。希望对大家的学习有帮助啦。。。如果对于上面的笔记有不懂的地方，尽管问我，我肯定会给大家解答的。祝大家生活愉快！
华山资源网 Design By www.eoogi.com
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
华山资源网 Design By www.eoogi.com
www.eoogi.com 华山资源网
120,135影音资源
344,641技术资源
22,817软件资源
435,032站长资源

更新日志

友情链接

杰晶网络 DDR爱好者之家 桃源资源网 杰网资源 富贵资源网 南强小屋 铁雪资源网 幽灵资源网 万梅资源网 狼山资源网 白云岛资源网 昆仑资源网 相思资源网 明霞山资源网 内蒙古资源网 黑松山资源网 茶园资源网 饿虎岗资源网 大旗谷资源网 常春岛资源网 岱庙资源网 兴国资源网 快活林资源网 蝙蝠岛资源网 帝王谷资源网 白云城资源网 伏龙阁资源网 清风细雨楼 天枫庄资源网 圆月山庄资源网 无争山庄资源网 神水资源网 移花宫资源网 神剑山庄资源网 无为清净楼资源网 金钱帮资源网 丐帮资源网 华山资源网 极乐门资源网 小李飞刀资源网 凤求凰客栈 风云阁资源网 金狮镖局 鸳鸯亭资源网 千金楼资源网 更多链接
华山资源网 Design By www.eoogi.com