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 相关文章推荐
JQUERY CHECKBOX全选,取消全选,反选方法三
Aug 30 Javascript
jQuery事件 delegate()使用方法介绍
Oct 30 Javascript
jquery插件tooltipv顶部淡入淡出效果使用示例
Dec 05 Javascript
JavaScript获取客户端计算机硬件及系统等信息的方法
Jan 02 Javascript
JavaScript中判断原生函数检查function是否是原生代码
Sep 09 Javascript
Javascript模块化编程详解
Dec 01 Javascript
node.js中的buffer.Buffer.isEncoding方法使用说明
Dec 14 Javascript
js判断文本框剩余可输入字数的方法
Feb 04 Javascript
教你如何终止JQUERY的$.AJAX请求
Feb 23 Javascript
详解vue2父组件传递props异步数据到子组件的问题
Jun 29 Javascript
layui中layer前端组件实现图片显示功能的方法分析
Oct 13 Javascript
Vue 中批量下载文件并打包的示例代码
Nov 20 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获取MAC地址的函数代码
2011/09/11 PHP
Javascript倒计时页面跳转实例小结
2013/09/11 Javascript
js中的布尔运算符使用介绍
2013/11/20 Javascript
Jquery方式获取iframe页面中的 Dom元素
2014/05/07 Javascript
原生JavaScript实现合并多个数组示例
2014/09/21 Javascript
javascript引用类型之时间Date和数组Array
2015/08/27 Javascript
js中substr,substring,indexOf,lastIndexOf,split,replace的用法详解
2015/11/09 Javascript
JavaScript中点击事件的写法
2016/06/28 Javascript
Java  Spring 事务回滚详解
2016/10/17 Javascript
JQuery validate 验证一个单独的表单元素实例
2017/02/17 Javascript
整理一些最近经常遇到的前端面试题
2017/04/25 Javascript
jQuery实现的弹幕效果完整实例
2017/09/06 jQuery
elementUI 设置input的只读或禁用的方法
2018/10/30 Javascript
Vuerouter的beforeEach与afterEach钩子函数的区别
2018/12/26 Javascript
详解vue几种主动刷新的方法总结
2019/02/19 Javascript
layui table动态表头 改变表格头部 重新加载表格的方法
2019/09/21 Javascript
Python安装使用命令行交互模块pexpect的基础教程
2016/05/12 Python
利用Python脚本生成sitemap.xml的实现方法
2017/01/31 Python
让代码变得更易维护的7个Python库
2018/10/09 Python
pyqt5使用按钮进行界面的跳转方法
2019/06/19 Python
爬虫代理的cookie如何生成运行
2020/09/22 Python
详解Html5 Canvas画线有毛边解决方法
2018/03/01 HTML / CSS
浅析图片上传及canvas压缩的流程
2020/06/10 HTML / CSS
康帕斯酒店预订:Compass Hospitality(支持中文)
2018/08/23 全球购物
Tomcat中怎么使用log4j输出所有的log
2016/07/07 面试题
印刷工程专业应届生求职信
2013/09/29 职场文书
个人求职简历中英文自我评价
2013/12/16 职场文书
先进德育工作者事迹材料
2014/01/24 职场文书
求职信需要的五点内容
2014/02/01 职场文书
预防传染病方案
2014/06/14 职场文书
公务员党员评议表自我鉴定
2014/09/14 职场文书
先进个人主要事迹范文
2015/11/04 职场文书
2016秋季运动会开幕词
2016/03/04 职场文书
2019企业给员工的慰问信
2019/06/24 职场文书
一篇文章弄懂MySQL查询语句的执行过程
2021/05/07 MySQL
Nginx如何配置Http、Https、WS、WSS的方法步骤
2021/05/11 Servers