MyException - 我的异常网
当前位置:我的异常网» JavaScript » 从零开始学angularjs-笔记02

从零开始学angularjs-笔记02

www.MyException.Cn  网友分享于:2015-08-24  浏览:0次
从0开始学angularjs-笔记02

上一节课主要跟大家讲解了angularjs的几种特性和看了一个简单的双向绑定的例子。最近都没有时间写博客了。。。。忙成狗呀。。。今天周末,在写一篇吧~~

 

今天主要跟大家详细讲解一下angularjs的三大模块: modal,controller,view。

首先跟大家说一下这三个模块之间的关系。

1.数据模型(modal)主要提供数据。它不会和视图(view)直接操作。

2.controller保存modal提供的数据,与视图进行操作。

3.view是视图,也就是页面展示。

4.总而言之,controller负责数据和视图之间的通信,就是两者的接口人。他们分工明确,实现了模块化。

 

一.如何使用数据模型(modal)?

   讲到数据模型,我们再来看一下上一节教程的例子:

 1 <!DOCTYPE html>
 2  <html ng-app="app"> 
 3      <head>
 4      <meta charset="UTF-8">
 5      <title>Document</title>
 6          <script src="angular-1.2.19/angular.js"></script>  <!-- 引入了AngularJS包  -->
<script src="controll.js"></script> //引入控制器 7 </head> 8 <body> 9 <div ng-controller="controller"> 10 <input type="text" ng-model="text"> 11 <b>{{greeting.text}} {{text}}</b> 12 </div> 13 </body> 14 </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的内容是:

1 function controller($scope){
2     $scope.greeting = {
3         text : 'hello'
4     };
5 }

    angularjs找到一个ng-controller的指令,然后会找到定义这个指令的地方,就是controll.js文件,然后可以使用greeting.text直接获取到他的值。

 

三.如何使用视图(view)?

    说到如何使用视图,就必须提到directive。(这里是新的知识了哟!!!!)

    下面来看一段代码:

1 var appModule = angular.module('app', []); //app是html中ng-app指令的名称
2 appModule.directive('hello', function() { //定义一个指令,名称叫hello 3 return { 4 restrict: 'E', 5 template: '<div>Hi there</div>', 6 replace: true 7 }; 8 });

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

待续~~~

1楼码丶行者无疆
喜欢这种真实的分享

文章评论

为什么程序员都是夜猫子
为什么程序员都是夜猫子
程序员和编码员之间的区别
程序员和编码员之间的区别
程序员眼里IE浏览器是什么样的
程序员眼里IE浏览器是什么样的
程序员都该阅读的书
程序员都该阅读的书
程序员应该关注的一些事儿
程序员应该关注的一些事儿
Web开发者需具备的8个好习惯
Web开发者需具备的8个好习惯
鲜为人知的编程真相
鲜为人知的编程真相
10个调试和排错的小建议
10个调试和排错的小建议
60个开发者不容错过的免费资源库
60个开发者不容错过的免费资源库
十大编程算法助程序员走上高手之路
十大编程算法助程序员走上高手之路
旅行,写作,编程
旅行,写作,编程
写给自己也写给你 自己到底该何去何从
写给自己也写给你 自己到底该何去何从
老程序员的下场
老程序员的下场
初级 vs 高级开发者 哪个性价比更高?
初级 vs 高级开发者 哪个性价比更高?
为啥Android手机总会越用越慢?
为啥Android手机总会越用越慢?
每天工作4小时的程序员
每天工作4小时的程序员
代码女神横空出世
代码女神横空出世
做程序猿的老婆应该注意的一些事情
做程序猿的老婆应该注意的一些事情
老美怎么看待阿里赴美上市
老美怎么看待阿里赴美上市
程序员的一天:一寸光阴一寸金
程序员的一天:一寸光阴一寸金
Java 与 .NET 的平台发展之争
Java 与 .NET 的平台发展之争
程序猿的崛起——Growth Hacker
程序猿的崛起——Growth Hacker
要嫁就嫁程序猿—钱多话少死的早
要嫁就嫁程序猿—钱多话少死的早
2013年美国开发者薪资调查报告
2013年美国开发者薪资调查报告
Java程序员必看电影
Java程序员必看电影
当下全球最炙手可热的八位少年创业者
当下全球最炙手可热的八位少年创业者
Google伦敦新总部 犹如星级庄园
Google伦敦新总部 犹如星级庄园
程序员必看的十大电影
程序员必看的十大电影
总结2014中国互联网十大段子
总结2014中国互联网十大段子
团队中“技术大拿”并非越多越好
团队中“技术大拿”并非越多越好
程序员的鄙视链
程序员的鄙视链
看13位CEO、创始人和高管如何提高工作效率
看13位CEO、创始人和高管如何提高工作效率
我是如何打败拖延症的
我是如何打败拖延症的
亲爱的项目经理,我恨你
亲爱的项目经理,我恨你
如何区分一个程序员是“老手“还是“新手“?
如何区分一个程序员是“老手“还是“新手“?
那些争议最大的编程观点
那些争议最大的编程观点
漫画:程序员的工作
漫画:程序员的工作
科技史上最臭名昭著的13大罪犯
科技史上最臭名昭著的13大罪犯
“懒”出效率是程序员的美德
“懒”出效率是程序员的美德
我的丈夫是个程序员
我的丈夫是个程序员
那些性感的让人尖叫的程序员
那些性感的让人尖叫的程序员
聊聊HTTPS和SSL/TLS协议
聊聊HTTPS和SSL/TLS协议
10个帮程序员减压放松的网站
10个帮程序员减压放松的网站
5款最佳正则表达式编辑调试器
5款最佳正则表达式编辑调试器
程序员周末都喜欢做什么?
程序员周末都喜欢做什么?
中美印日四国程序员比较
中美印日四国程序员比较
一个程序员的时间管理
一个程序员的时间管理
编程语言是女人
编程语言是女人
Web开发人员为什么越来越懒了?
Web开发人员为什么越来越懒了?
软件开发程序错误异常ExceptionCopyright © 2009-2015 MyException 版权所有