angularjs学习笔记之完整的项目结构


Posted in Javascript onSeptember 26, 2015

今天的主要讲解部分有以下几点:1.演示一个完整的项目结构 2.$scope的含义 3.模块化和依赖注入。

一.演示一个完整的项目结构。

下面的所有这些代码,都是转载于@大漠穷秋 老师的。我转载来之后放到了github上,大家可以去这个链接看源代码。一边看,一边学习,效果最好了~~~~

下面我们来看这个截图,

angularjs学习笔记之完整的项目结构

这就是一个完整的angularjs项目应该有的目录结构。下面我来讲解每一个文件夹对应的分别是什么含义。

1.css:不用说了,就是放一些css的样式文件。

2.framework:这里一般放一些除了angularjs之外的第三方需要的前端框架(ui),比如bootstrap、ueditor等等。

3.imgs:也不用说,放图片文件。

4.index.html:主要文件,当然,如果项目文件比较多,也可以单独建个文件夹放页面。

5.js:不用多说,放自己新建的js文件。

6.tpls:全称是templates,意思是模版。里面放的是部分html代码。与angualrjs的directive命令中的templateUrl属性合用。

下面我们主要看一下tpls的使用方法:这里的tpls文件夹下有一个test.html文件,代码如下:

<ul>
  <li>
    第一行test
  </li>
  <li>
    第二行test
  </li><li>
    第三行test
  </li>
</ul>

我们上面也说,这里的文件只是html的一部分,比如这里只是一个ul的部分代码。那有些人就奇怪了,这样写有什么用呢,我该怎么使用呢?不急,下面我来告诉大家怎么使用:

其实我们上节课提到过了,不知道的人点击这里,你可以看到第三点,我提到的directive方法。它的意思呢就是定义一个html标签,然后返回的html内容就是就是这里的ul部分啦。

下面来看具体使用代码:

var appModule = angular.module('app', []); //app是html中ng-app指令的名称

 appModule.directive('hello', function() { //定义一个指令,名称叫hello
   return {
     restrict: 'E',
     //template: '<div>Hi there</div>',
     templateUrl:'/tpls/test.html',
     replace: true
   };
 });

对上面代码的解释:就是定义了一个hello标签,使用此标签的时候,返回的是test.html的内容(使用template和templateUrl都行)。

为什么我们要把上面的ul内容放到单独的文件夹呢?现在想明白了吗??就是为了当返回的内容很多时,直接使用链接对应就好了,让代码看起来很清晰。

二.看一些$scope。

我们来看下面这个图片,深入讲解一些scope和它的特性:

angularjs学习笔记之完整的项目结构

我们来看一下上面的代码:先是定义了一个控制器叫做HelloCtrl,里面给$scope添加了一个属性greeting,greeting属性是一个对象,添加了text属性,值为‘Hello',就这么简单。然后在页面中就可以直接调用greeting.text,就能够得到‘Hello'的值了。是不是很神奇呢?那$scope到底是个什么东西呢?为什么能够实现这些功能呢?下面这些都是它的特性,看了之后一定要对它有一定的理解。

1.$scope是一个作用域,也可以理解为一个对象。

2.$scope提供了一些工具和方法,比如$watch()和$apply()等等。

3.$scope也是一个执行环境(作用域)。

4.子$scope可以继承父$scope的属性和方法。

5.每一个Angular应用只有一个跟$scope($rootscope,位于ng-app中)。

3.模块化和依赖注入

来看下面这段定义控制器的代码:

var myApp = angular.module('angularApp', []);

myApp.controller('HelloCtrl', ['$scope',function($scope) {
    $scope.greeting = {
      text: 'Hello'
    };
  }
]);
myApp.controller('ByeCtrl', ['$scope',function($scope) {
    //.....
  }
]);

还记得最开始讲解的定义控制器吗?直接使用funciton name(){}的方法。 慢慢的我们发现,如果控制器太多,这样就不好管理了,为了实现angualrjs的模块化,我们需要换成上面的写法,然后我给大家解释一下这段代码的含义。

第1行: 先获取整个页面的modula名称‘myApp',,,angularApp是html中ng-app的值

第3行: 定义一个控制器,名称为‘HelloCtrl';

第9行同上。

这样,我们就不知不觉的实现了模块化!!!

这里我们只调用了controller方法,还有第一节提到的directive、filter等等方法,都应该在myApp上调用,以实现响应的功能。然后使用多个模块完成一个项目,我们就实现了依赖注入!!

OK,以上就是对这3个主要模块的使用说明了。希望对大家的学习有帮助啦。。。如果对于上面的笔记有不懂的地方,尽管问我,我肯定会给大家解答的。祝大家生活愉快!

Javascript 相关文章推荐
JQuery this 和 $(this) 的区别
Aug 23 Javascript
js封装的textarea操作方法集合(兼容很好)
Nov 16 Javascript
jQuery自定义事件的简单实现代码
Jan 27 Javascript
jQuery扁平化风格下拉框美化插件FancySelect使用指南
Feb 10 Javascript
JavaScript实现DIV层拖动及动态增加新层的方法
May 12 Javascript
jQuery中Nicescroll滚动条插件的用法
Nov 10 Javascript
JavaScript数据结构之链表的实现
Mar 19 Javascript
新年快乐! javascript实现超级炫酷的3D烟花特效
Jan 30 Javascript
jquery3和layui冲突导致使用layui.layer.full弹出全屏iframe窗口时高度152px问题
May 12 jQuery
编写更好的JavaScript条件式和匹配条件的技巧(小结)
Jun 27 Javascript
前端深入理解Typescript泛型概念
Mar 09 Javascript
微信小程序实现watch监听
Jun 04 Javascript
jQuery实现的登录浮动框效果代码
Sep 26 #Javascript
angularjs学习笔记之三大模块(modal,controller,view)
Sep 26 #Javascript
JS实现可拖曳、可关闭的弹窗效果
Sep 26 #Javascript
JS实现网页Div层Clone拖拽效果
Sep 26 #Javascript
jQuery超简单选项卡完整实例
Sep 26 #Javascript
angularjs学习笔记之简单介绍
Sep 26 #Javascript
JavaScript判断手机号运营商是移动、联通、电信还是其他(代码简单)
Sep 25 #Javascript
You might like
PHP新手上路(二)
2006/10/09 PHP
php 文件缓存函数
2011/10/08 PHP
PHP输出当前进程所有变量/常量/模块/函数/类的示例
2013/11/07 PHP
php利用ob_start()清除输出和选择性输出的方法
2018/01/18 PHP
javascript基于HTML5 canvas制作画箭头组件
2014/06/25 Javascript
js使用正则实现ReplaceAll全部替换的方法
2014/08/22 Javascript
js限制文本框的输入内容代码分享(3类)
2015/08/20 Javascript
jquery京东商城双11焦点图多图广告特效代码分享
2015/09/06 Javascript
JS简单编号生成器实现方法(附demo源码下载)
2016/04/05 Javascript
vue中vee validate表单校验的几种基本使用
2018/06/25 Javascript
微信内置浏览器图片查看器的代码实例
2019/10/08 Javascript
js实现上下左右键盘控制div移动
2020/01/16 Javascript
js常用方法、检查是否有特殊字符串、倒序截取字符串操作完整示例
2020/01/26 Javascript
jQuery冲突问题解决方法
2021/01/19 jQuery
Python中的getopt函数使用详解
2015/07/28 Python
Django返回json数据用法示例
2016/09/18 Python
深入理解Python对Json的解析
2017/02/14 Python
用 Python 爬了爬自己的微信朋友(实例讲解)
2017/08/25 Python
python opencv实现运动检测
2018/07/10 Python
美国新兴城市生活方式零售商:VILLA
2017/12/06 全球购物
【魔兽争霸3重制版】原版画面与淬火MOD画面对比
2021/03/26 魔兽争霸
简历中自我评价范文3则
2013/12/14 职场文书
项目考察欢迎辞
2014/01/17 职场文书
汽车队司机先进事迹材料
2014/02/01 职场文书
大学生活动策划方案
2014/02/10 职场文书
大学生社会实践自我鉴定
2014/03/24 职场文书
学校就业推荐信范文
2014/05/19 职场文书
2014年超市员工工作总结
2014/11/18 职场文书
2014年残疾人工作总结
2014/12/06 职场文书
化验员岗位职责
2015/02/14 职场文书
欧也妮葛朗台读书笔记
2015/06/30 职场文书
安全生产隐患排查制度
2015/08/05 职场文书
laravel添加角色和模糊搜索功能的实现代码
2021/06/22 PHP
JavaWeb 入门篇:创建Web项目,Idea配置tomcat
2021/07/16 Java/Android
Oracle中update和select 关联操作
2022/01/18 Oracle
移除Selenium中window.navigator.webdriver值
2022/06/10 Python