这里有新鲜出炉的 AngularJS 开发指南,程序狗速度看过来!
AngularJS 诞生于 Google 是一款优秀的前端 JS 框架,已经被用于 Google 的多款产品当中。AngularJS 有着诸多特性,最为核心的是:MVC、模块化、自动化双向数据绑定、语义化标签、依赖注入,等等。
这篇文章主要介绍了 angularjs 学习笔记之完整的项目结构的相关资料, 需要的朋友可以参考下
今天的主要讲解部分有以下几点: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 文件,代码如下:
- <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 和它的特性:
我们来看一下上面的代码:先是定义了一个控制器叫做 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 个主要模块的使用说明了。希望对大家的学习有帮助啦。。。如果对于上面的笔记有不懂的地方,尽管问我,我肯定会给大家解答的。祝大家生活愉快!
来源: http://www.phperz.com/article/17/0716/269268.html