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 Clone Bug解决代码
Dec 22 Javascript
用js实现判断当前网址的来路如果不是指定的来路就跳转到指定页面
May 02 Javascript
获取表单控件原始(初始)值的方法
Aug 21 Javascript
javascript面向对象特性代码实例
Jun 12 Javascript
BootStrap实用代码片段之一
Mar 22 Javascript
JavaScript中 ES6 generator数据类型详解
Aug 11 Javascript
touch.js 拖动、缩放、旋转 (鼠标手势)功能代码
Feb 04 Javascript
jquery Form轻松实现文件上传
May 24 jQuery
angular2+node.js express打包部署的实战
Jul 27 Javascript
vue组件父与子通信详解(一)
Nov 07 Javascript
微信小程序学习笔记之本地数据缓存功能详解
Mar 29 Javascript
js中!和!!的区别与用法
May 09 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世纪万年历
2006/12/06 PHP
使用php get_headers 判断URL是否有效的解决办法
2013/04/27 PHP
PHP采用XML-RPC构造Web Service实例教程
2014/07/16 PHP
PHP实现合并discuz用户
2015/08/05 PHP
4种PHP异步执行的常用方式
2015/12/24 PHP
Zend Framework动作助手Url用法详解
2016/03/05 PHP
PHP实现广度优先搜索算法(BFS,Broad First Search)详解
2017/09/16 PHP
PHP设计模式之外观模式(Facade)入门与应用详解
2019/12/13 PHP
jQuery EasyUI API 中文文档 - Menu菜单
2011/10/03 Javascript
JS制作简单的三级联动
2015/03/18 Javascript
Javascript必知必会(四)js类型转换
2016/06/08 Javascript
vue数字类型过滤器的示例代码
2017/09/07 Javascript
Laravel整合Bootstrap 4的完整方案(推荐)
2018/01/25 Javascript
vue cli升级webapck4总结
2018/04/04 Javascript
layui固定下拉框的显示条数(有滚动条)的方法
2019/09/10 Javascript
JS实现拼图游戏
2021/01/29 Javascript
如何基于layui的laytpl实现数据绑定的示例代码
2020/04/10 Javascript
[13:21]DOTA2国际邀请赛采访专栏:RSnake战队国士无双,Fnatic.Fly
2013/08/06 DOTA
[01:01:18]VP vs NIP 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/17 DOTA
Python读写Excel文件的实例
2013/11/01 Python
树莓派中python获取GY-85九轴模块信息示例
2013/12/05 Python
Python实现的数据结构与算法之链表详解
2015/04/22 Python
利用Python将时间或时间间隔转为ISO 8601格式方法示例
2017/09/05 Python
python中装饰器级连的使用方法示例
2017/09/29 Python
详解通过API管理或定制开发ECS实例
2018/09/30 Python
python使用turtle绘制国际象棋棋盘
2019/05/23 Python
python实现复制文件到指定目录
2019/10/16 Python
python实现小世界网络生成
2019/11/21 Python
Python 实现opencv所使用的图片格式与 base64 转换
2020/01/09 Python
为什么python比较流行
2020/06/19 Python
CSS3 实现侧边栏展开收起动画
2014/12/22 HTML / CSS
Keds加拿大官网:购买帆布运动鞋和皮鞋
2019/09/26 全球购物
大学生四个方面的自我评价
2013/09/19 职场文书
就业协议书盖章的注意事项
2014/09/28 职场文书
设备收款委托书范本
2014/10/02 职场文书
第28个世界无烟日活动总结
2015/02/10 职场文书