angularjs学习笔记之完整的项目结构  更新时间:2015年09月26日 11:40:07   投稿:hebedich   这篇文章主要介绍了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文件,代码如下: 第一行test 第二行test 第三行test   我们上面也说,这里的文件只是html的一部分,比如这里只是一个ul的部分代码。那有些人就奇怪了,这样写有什么用呢,我该怎么使用呢?不急,下面我来告诉大家怎么使用:   其实我们上节课提到过了,不知道的人点击这里,你可以看到第三点,我提到的directive方法。它的意思呢就是定义一个html标签,然后返回的html内容就是就是这里的ul部分啦。   下面来看具体使用代码: var appModule = angular.module(‘app’, []); //app是html中ng-app指令的名称 appModule.directive(‘hello’, function() { //定义一个指令,名称叫hello return { restrict: ‘E’, //template: ‘Hi there’, 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个主要模块的使用说明了。希望对大家的学习有帮助啦。。。如果对于上面的笔记有不懂的地方,尽管问我,我肯定会给大家解答的。祝大家生活愉快! 您可能感兴趣的文章: AngularJS实现树形结构(ztree)菜单示例代码 在AngularJS中使用jQuery的zTree插件的方法 AngularJS深入探讨scope,继承结构,事件系统和生命周期 AngularJS教程之MVC体系结构详解 AngularJS内置指令 AngularJS入门教程之学习环境搭建 AngularJS中的模块详解 angularjs中的单元测试实例 AngularJS学习笔记之基本指令(init、repeat) AngularJS递归指令实现Tree View效果示例 angularjs 项目结构 相关文章 AngularJS自定义过滤器用法经典实例总结 这篇文章主要介绍了AngularJS自定义过滤器用法,结合实例形式总结分析了AngularJS自定义过滤器进行包含、替换、筛选、过滤、排序等操作相关实现技巧与注意事项,需要的朋友可以参考下 2018-05-05 AngularJS的依赖注入实例分析(使用module和injector) 这篇文章主要介绍了AngularJS的依赖注入,结合实例形式分析了依赖注入的原理及使用module和injector实现依赖注入的步骤与操作技巧,需要的朋友可以参考下 2017-01-01 详解Angular5 服务端渲染实战 本篇文章主要介绍了详解Angular5 服务端渲染实战,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧 2018-01-01 利用require.js与angular搭建spa应用的方法实例 这篇文章主要给大家介绍了关于利用require.js与angular搭建spa应用的方法实例,文中通过示例代码给大家介绍的非常详细,对大家的理解和学习具有一定的参考学习价值,需要的朋友们下面跟着小编来一起看看吧。 2017-07-07 Angularjs单选改为多选的开发过程及问题解析 在项目中遇到这样的需求想把下拉框的单选改为多选,怎么实现呢?下面小编通过本文给大家分享angularjs单选改为多选的开发过程及问题解析,需要的朋友参考下 2017-02-02 Angular2内置指令NgFor和NgIf详解 Directive的概念在Angular 1.x就存在了,我对它的认识比较模糊,所以直接通过一些例子来说明。Angular提供的内置执行有很多,这次使用两个:ngFor、ngIf。 2016-08-08 详解如何使用webpack+es6开发angular1.x 本篇文章主要介绍了详解如何使用webpack+es6开发angular1.x,具有一定的参考价值,有兴趣的可以了解一下 2017-08-08 浅谈Angular.js中使用$watch监听模型变化 当angular数据模型发生变化时,我们需要如果需要根据他的变化触发其他的事件。本篇文章主要介绍了Angular.js中使用$watch监听模型变化,有兴趣的可以了解一下 2017-01-01 angularJs中json数据转换与本地存储的实例 今天小编就为大家分享一篇angularJs中json数据转换与本地存储的实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧 2018-10-10 angularJS提交表单(form) 这篇文章主要介绍了angularJS提交表单(form)的方法和示例,需要的朋友可以参考下 2015-02-02 最新评论

今天的主要讲解部分有以下几点: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个主要模块的使用说明了。希望对大家的学习有帮助啦。。。如果对于上面的笔记有不懂的地方,尽管问我,我肯定会给大家解答的。祝大家生活愉快!

您可能感兴趣的文章:

  • AngularJS实现树形结构(ztree)菜单示例代码
  • 在AngularJS中使用jQuery的zTree插件的方法
  • AngularJS深入探讨scope,继承结构,事件系统和生命周期
  • AngularJS教程之MVC体系结构详解
  • AngularJS内置指令
  • AngularJS入门教程之学习环境搭建
  • AngularJS中的模块详解
  • angularjs中的单元测试实例
  • AngularJS学习笔记之基本指令(init、repeat)
  • AngularJS递归指令实现Tree View效果示例
张贴在3