angularjs学习笔记之三大模块(modal,controller,view)


Posted in Javascript onSeptember 26, 2015

今天主要跟大家详细讲解一下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="angular-1.2.19/angular.js"></script> <!-- 引入了AngularJS包 -->
     <script src="controll.js"></script> //引入控制器
   </head>
   <body>
     <div ng-controller="controller"> 
       <input type="text" ng-model="text">
       <b>{{greeting.text}} {{text}}</b>
     </div>
   </body>
 </html>

   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个主要模块的使用说明了。希望对大家的学习有帮助啦。。。如果对于上面的笔记有不懂的地方,尽管问我,我肯定会给大家解答的。祝大家生活愉快!

Javascript 相关文章推荐
ExtJs使用总结(非常详细)
Mar 22 Javascript
jquery中get和post的简单实例
Feb 04 Javascript
JS 打印界面的CSS居中代码适用所有浏览器
Mar 19 Javascript
基于insertBefore制作简单的循环插空效果
Sep 21 Javascript
常用javascript表单验证汇总
Jul 20 Javascript
使用Vue.js创建一个时间跟踪的单页应用
Nov 28 Javascript
angular.fromJson与toJson方法用法示例
May 17 Javascript
jQuery 利用ztree实现树形表格的实例代码
Sep 27 jQuery
vue2.0 兄弟组件(平级)通讯的实现代码
Jan 15 Javascript
vue一个页面实现音乐播放器的示例
Feb 06 Javascript
element UI upload组件上传附件格式限制方法
Sep 04 Javascript
JavaScript canvas实现雨滴特效
Jan 10 Javascript
JS实现可拖曳、可关闭的弹窗效果
Sep 26 #Javascript
JS实现网页Div层Clone拖拽效果
Sep 26 #Javascript
jQuery超简单选项卡完整实例
Sep 26 #Javascript
angularjs学习笔记之简单介绍
Sep 26 #Javascript
JavaScript判断手机号运营商是移动、联通、电信还是其他(代码简单)
Sep 25 #Javascript
JS实现仿QQ效果的三级竖向菜单
Sep 25 #Javascript
微信支付如何实现内置浏览器的H5页面支付
Sep 25 #Javascript
You might like
php中static 静态变量和普通变量的区别
2016/12/01 PHP
cssQuery()的下载与使用方法
2007/01/12 Javascript
jQuery下的几个你可能没用过的功能
2010/08/29 Javascript
jQuery1.6 使用方法二
2011/11/23 Javascript
浅析jquery的作用与优势
2013/12/02 Javascript
js showModalDialog参数的使用详解
2014/01/07 Javascript
jquery序列化表单去除指定元素示例代码
2014/04/10 Javascript
使用jquery+CSS实现控制打印样式
2014/12/31 Javascript
Javascript实现多彩雪花从天降散落效果的方法
2015/02/02 Javascript
纯JavaScript实现的分页插件实例
2015/07/14 Javascript
jQuery实现列表内容的动态载入特效
2015/08/08 Javascript
Jquery表单验证失败后不提交的解决方法
2016/10/18 Javascript
运用jQuery写的验证表单(实例讲解)
2017/07/06 jQuery
Vue 实现展开折叠效果的示例代码
2018/08/27 Javascript
微信小程序实现购物页面左右联动
2019/02/15 Javascript
vue的列表交错过渡实现代码示例
2019/05/05 Javascript
VSCode写vue项目一键生成.vue模版,修改定义其他模板的方法
2020/04/17 Javascript
Taro UI框架开发小程序实现左滑喜欢右滑不喜欢效果的示例代码
2020/05/18 Javascript
Using Django with GAE Python 后台抓取多个网站的页面全文
2016/02/17 Python
python实现字符串连接的三种方法及其效率、适用场景详解
2017/01/13 Python
python K近邻算法的kd树实现
2018/09/06 Python
opencv python统计及绘制直方图的方法
2019/01/21 Python
Python中的random.uniform()函数教程与实例解析
2019/03/02 Python
在Python中构建增广矩阵的实现方法
2019/07/01 Python
python GUI库图形界面开发之PyQt5中QMainWindow, QWidget以及QDialog的区别和选择
2020/02/26 Python
win7上tensorflow2.2.0安装成功 引用DLL load failed时找不到指定模块 tensorflow has no attribute xxx 解决方法
2020/05/20 Python
Python环境使用OpenCV检测人脸实现教程
2020/10/19 Python
Python 实现二叉查找树的示例代码
2020/12/21 Python
食品营养与检测应届生求职信
2013/11/08 职场文书
保密工作实施方案
2014/02/24 职场文书
工业设计专业自荐书
2014/06/05 职场文书
财务整改报告范文
2014/11/05 职场文书
2016年小学“感恩教师”主题队日活动总结
2016/04/01 职场文书
matlab xlabel位置的设置方式
2021/05/21 Python
Java中常用解析工具jackson及fastjson的使用
2021/06/28 Java/Android
Mysql查询时间区间日期列表,不会由于数据表数据影响
2022/04/19 MySQL