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 相关文章推荐
JavaScript Chart 插件整理
Jun 18 Javascript
javascript实现对表格元素进行排序操作
Nov 18 Javascript
Node.js本地文件操作之文件拷贝与目录遍历的方法
Feb 16 Javascript
jquery对table做排序操作的实例演示
Aug 10 jQuery
浏览器调试动态js脚本的方法(图解)
Jan 19 Javascript
利用Electron简单撸一个Markdown编辑器的方法
Jun 10 Javascript
Vue程序调试的方法
Jun 17 Javascript
layui 数据表格 点击分页按钮 监听事件的实例
Sep 02 Javascript
vue.js实现只能输入数字的输入框
Oct 19 Javascript
JavaScript实现京东放大镜效果
Dec 03 Javascript
原生javascript实现类似vue的数据绑定功能示例【观察者模式】
Feb 24 Javascript
基于Element封装一个表格组件tableList的使用方法
Jun 29 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基础知识:类与对象(3) 构造函数和析构函数
2006/12/13 PHP
php获得当前的脚本网址
2007/12/10 PHP
了解Joomla 这款来自国外的php网站管理系统
2010/03/11 PHP
ThinkPHP连接Oracle数据库
2016/04/22 PHP
利用php-cli和任务计划实现订单同步功能的方法
2017/05/03 PHP
基于jQuery图片平滑连续滚动插件
2009/04/27 Javascript
jQuery 顺便学习下CSS选择器 奇偶匹配nth-child(even)
2010/05/24 Javascript
Jquery练习之表单验证实现代码
2010/12/14 Javascript
jQuery的学习步骤
2011/02/23 Javascript
使用js获取地址栏中传递的值
2013/07/02 Javascript
JavaScript 函数参数是传值(byVal)还是传址(byRef) 分享
2013/07/02 Javascript
jquery获取子节点和父节点的示例代码
2013/09/10 Javascript
jquery中使用循环下拉菜单示例代码
2014/09/24 Javascript
drag-and-drop实现图片浏览器预览
2015/08/06 Javascript
Angular Js文件上传之form-data
2015/08/28 Javascript
AngularJS自动表单验证
2016/02/01 Javascript
Atitit.js的键盘按键事件捆绑and事件调度
2016/04/01 Javascript
JavaScript String(字符串)对象的简单实例(推荐)
2016/08/31 Javascript
javascript实现数据双向绑定的三种方式小结
2017/03/09 Javascript
详解nuxt sass全局变量(公共scss解决方案)
2018/06/27 Javascript
在Django的form中使用CSS进行设计的方法
2015/07/18 Python
在Apache服务器上同时运行多个Django程序的方法
2015/07/22 Python
python使用matplotlib绘制柱状图教程
2017/02/08 Python
python使用threading获取线程函数返回值的实现方法
2017/11/15 Python
使用django-crontab实现定时任务的示例
2018/02/26 Python
python range()函数取反序遍历sequence的方法
2018/06/25 Python
python pandas时序处理相关功能详解
2019/07/03 Python
HTML5自定义data-* data(obj)属性和jquery的data()方法的使用
2012/12/13 HTML / CSS
什么是.net的Remoting技术
2016/07/08 面试题
傲盾软件面试题
2015/08/17 面试题
教师自荐信范文
2013/12/09 职场文书
高中英语教学反思
2014/02/04 职场文书
2014年秘书工作总结
2014/11/25 职场文书
医德医风自我评价2015
2015/03/03 职场文书
Java使用Unsafe类的示例详解
2021/09/25 Java/Android
SQL试题 使用窗口函数选出连续3天登录的用户
2022/04/24 Oracle