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 相关文章推荐
js 提交和设置表单的值
Dec 19 Javascript
JavaScript 工具库 Cloudgamer JavaScript Library v0.1 发布
Oct 29 Javascript
javascript正则表达式中参数g(全局)的作用
Nov 11 Javascript
js实现商城星星评分的效果
Dec 29 Javascript
AngularJS实现单独作用域内的数据操作
Sep 05 Javascript
js入门之Function函数的使用方法【新手必看】
Nov 22 Javascript
利用Javascript裁剪图片并存储的简单实现
Mar 13 Javascript
微信小程序实现自定义加载图标功能
Jul 19 Javascript
JavaScript设计模式之构造器模式(生成器模式)定义与用法实例分析
Jul 26 Javascript
vue过滤器用法实例分析
Mar 15 Javascript
vue router动态路由设置参数可选问题
Aug 21 Javascript
js实现简单抽奖功能
Nov 24 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使用Smarty的相关注意事项及访问变量的几种方式
2011/12/08 PHP
php读取大文件示例分享(文件操作类)
2014/04/13 PHP
ThinkPHP模板引擎之导入资源文件方法详解
2014/06/18 PHP
thinkphp5 URL和路由的功能详解与实例
2017/12/26 PHP
php使用gearman进行任务分发操作实例详解
2020/02/26 PHP
XML+XSL 与 HTML 两种方案的结合
2007/04/22 Javascript
jQuery菜单插件superfish使用指南
2015/04/21 Javascript
浅谈JavaScript中的作用域和闭包问题
2015/07/07 Javascript
js实现全国省份城市级联下拉菜单效果代码
2015/09/07 Javascript
实例解析jQuery中proxy()函数的用法
2016/05/24 Javascript
第八篇Bootstrap下拉菜单实例代码
2016/06/21 Javascript
详解nodejs express下使用redis管理session
2017/04/24 NodeJs
Angular.JS中select下拉框设置value的方法
2017/06/20 Javascript
javaScript产生随机数的用法小结
2018/04/21 Javascript
JavaScript使用Math.random()生成简单的验证码
2019/01/21 Javascript
VUEX-action可以修改state吗
2019/11/19 Javascript
[36:52]DOTA2真视界:基辅特锦赛总决赛
2017/05/21 DOTA
Python+django实现文件上传
2016/01/17 Python
django之对FileField字段的upload_to的设定方法
2019/07/28 Python
Django和Flask框架优缺点对比
2019/10/24 Python
pytorch 模拟关系拟合——回归实例
2020/01/14 Python
tensorflow求导和梯度计算实例
2020/01/23 Python
django之导入并执行自定义的函数模块图解
2020/04/01 Python
使用Python三角函数公式计算三角形的夹角案例
2020/04/15 Python
购买瑞典当代设计的腕表和太阳眼镜:TRIWA
2016/10/30 全球购物
国际知名军事风格休闲装品牌:Alpha Industries(阿尔法工业)
2017/05/24 全球购物
体育教师个人的自我评价
2014/02/16 职场文书
银行求职自荐书
2014/06/25 职场文书
工作散漫检讨书
2014/09/16 职场文书
上班迟到检讨书300字
2014/10/18 职场文书
2014年财务经理工作总结
2014/12/08 职场文书
证券公司客户经理岗位职责
2015/04/09 职场文书
求职自我评价参考范文
2019/05/16 职场文书
如何用PHP实现多线程编程
2021/05/26 PHP
Vue中foreach数组与js中遍历数组的写法说明
2021/06/05 Vue.js
分享Python异步爬取知乎热榜
2022/04/12 Python