从0开始学angularjs-笔记03

大家好,今天上班第一天,可能大家都不是很想上班吧,我也是一样啦~~~不想上班就来继续写我的angualrjs教程,造福大家吧!!

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

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

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

  下面我们来看这个截图,

  

  这就是一个完整的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文件,代码如下:

 1 <ul>
 2     <li>
 3         第一行test
 4     </li>
 5     <li>
 6         第二行test
 7     </li><li>
 8         第三行test
 9     </li>
10 </ul>

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

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

  下面来看具体使用代码:

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

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

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

二.看一些$scope。

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

  我们来看一下上面的代码:先是定义了一个控制器叫做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.模块化和依赖注入

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

 1 var myApp = angular.module(‘angularApp‘, []);
 2
 3 myApp.controller(‘HelloCtrl‘, [‘$scope‘,function($scope) {
 4         $scope.greeting = {
 5             text: ‘Hello‘
 6         };
 7     }
 8 ]);
 9 myApp.controller(‘ByeCtrl‘, [‘$scope‘,function($scope) {
10         //.....
11     }
12 ]);

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

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

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

  第9行同上。

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

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

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

待续~~~

时间: 2024-11-14 09:17:37

从0开始学angularjs-笔记03的相关文章

从0开始学angularjs-笔记04

由于公司加班,刚到家不久,然而却毫无睡意,可能是老了吧--- 不废话了,没睡意那就做点有意义的事情吧,继续我们的angular学习之路,深夜博文,希望能造福大家! 这次我们来详细讲解angular的双向数据绑定.我会从以下列表依次讲解. 简单的例子 取值表达式与ng-bind的使用 双向绑定的典型场景-表单 动态切换标签样式 ng-show和ng-hide 一.简单的例子 这个例子我们在第一节已经展示过了,要看的移步这里 这里实现的效果就是,在输入框输入内容,下面也会相应的改变对应的内容.这就实

跟我从0开始学angularjs-笔记01

一.angularjs简介 AngularJS 是一个为动态WEB应用设计的结构框架.它能让你使用HTML作为模板语言,通过扩展HTML的语法,让你能更清楚.简洁地构建你的应用组件.它的创新点在于,利用 数据绑定 和 依赖注入,它使你不用再写大量的代码了.这些全都是通过浏览器端的Javascript实现,这也使得它能够完美地和任何服务器端技术结合. 说了这么多,估计你啥都没有理解...对吗?别着急,我来说说他的几个特点吧:模块化,数据双向绑定,依赖注入,指令.下面我们就跟着这几个特点进行学习.

从0开始学Swift笔记整理(三)

这是跟在上一篇博文后续内容: --Swift中相关的属性 存储属性 Swift中的属性分为存储属性和计算属性,存储属性就是Objective-C中的数据成员,计算属性不存储数据,但可以通过计算其他属性返回数据.存储属性可以存储数据,分为常量属性(用关键字let定义)和变量属性(用关键var定义). 存储属性概念: 我们在前面曾用到过属性,Employee类和Department结构体.它们的类图如下,Employee 的部门属性dept与Department之间进行了关联. 我们可以在定义存储属

从0开始学Swift笔记整理(一)

Swift 是一种适用于 iOS 和 OS X 应用的全新编程语言,它建立在最好的 C 和 Objective-C 语言之上,并且没有 C 语言的兼容性限制.Swift 采用安全的编程模式,增加了现代功能使 编程更容易.更灵活.更有趣.Swift 以成熟且备受宠爱的 Cocoa 和 Cocoa Touch 框架为 支撑,这是一个重新构想软件开发的机会. --我的第一行Swift代码 import Foundation             //表示引入Foundation框架 var str

从0开始学Swift笔记整理(五)

这是跟在上一篇博文后续内容: --Core Foundation框架 Core Foundation框架是苹果公司提供一套概念来源于Foundation框架,编程接口面向C语言风格的API.虽然在Swift中调用这种C语言风格的API比较麻烦,但是在OS X和iOS开发过程中,有时候使用Core Foundation框架的API是非常方便的,例如在与C语言混合编码的时候. Core Foundation框架与Foundation框架紧密相关,他们具有与相同的接口,但是不同.Core Founda

从0开始学Swift笔记整理(四)

这是跟在上一篇博文后续内容: --重写方法 重写实例方法 在子类中重写从父类继承来的实例方法和静态方法.先介绍实例方法的重写. 下面看一个示例: class Person { var name: String var age: Int func description() -> String { //实例方法 return "\(name) 年龄是: \(age)" } class func printClass() ->() { //静态方法 print( "P

HTTP 学习笔记03

通用信息头 Cache-Control : no-cache(不缓存当前请求) [*] Connection:close(返回当前请求后立即断开)[*] Date:...(HTTP消息产生的时间) Pragma:no-cache (不缓存) [*] Trailer:Date(哪些能放到实体内容后的头字段) Transfer-Encoding:chunked (指定传输编码方式)[*] Upgrade:HTTP/2.0,SHTTP/1.3 (支持的版本) Via:HTTP/1.1 Proxy1,H

《30天自制操作系统》笔记(03)——使用Vmware

<30天自制操作系统>笔记(03)--使用Vmware 进度回顾 在上一篇,实现了用IPL加载OS程序到内存,然后JMP到OS程序这一功能:并且总结出下一步的OS开发结构.但是遇到了真机测试和U盘启动的一些问题.本篇就来解决之. 遇到的问题 物理机测试 简单来说,把软盘(U盘)做成启动盘后,自然想要用来启动物理机器.毕竟这才是真正的测试.(用QEMU总没多大的成就感)但物理机测试的麻烦在于太慢了,每次都要关掉Windows,重启,测试,然后再重启Windows.而且还没办法截图. 而用Vmwa

cocos2dx3.0 超级马里奥开发笔记(一)——loadingbar和pageview的使用

学完cocos2dx课程的第一个项目选择了超级玛丽.可以说有自己的想法,简单但是确实不简单. 我花了一天把一份2.1版本的超级玛丽源码升级到了3.0,改改删删,参考那个源码虽然好多不懂,但是马虎升级成功,游戏正常玩耍. 本着不为把游戏做出来而写代码的想法,罗列了一下这个游戏可以使用到的知识点.数据持久化的三种方式.loading页面.tmx地图解析.cocosStudio场景.屏幕适配.关卡如何选择.代码结构的优化(各种类的抽象继承),在基本功能出来后可以自己去设计变态关卡等. 两天实现了loa