0

0

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

php中文网

php中文网

发布时间:2016-05-16 15:38:09

|

1556人浏览过

|

来源于php中文网

原创

今天的主要讲解部分有以下几点: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。

8023商城系统
8023商城系统

由于8023特殊的数字。所以该项目取名为:8023商城,这个项目是一个简单B2C商城,后台功能不是很完善,许多功能尚未加入,源码仅供参考学习之用,请等待后续版本!项目名称:8023商城 版本号码:1.0页面采用:DIV+TABLE+CSS进行布局。项目结构:B/S结构开发语言:ASP.NET(C#)开发人员:独自开发平台:windows server 2003、windows xp相关软件:Vis

下载

  我们来看下面这个图片,深入讲解一些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个主要模块的使用说明了。希望对大家的学习有帮助啦。。。如果对于上面的笔记有不懂的地方,尽管问我,我肯定会给大家解答的。祝大家生活愉快!

热门AI工具

更多
DeepSeek
DeepSeek

幻方量化公司旗下的开源大模型平台

豆包大模型
豆包大模型

字节跳动自主研发的一系列大型语言模型

通义千问
通义千问

阿里巴巴推出的全能AI助手

腾讯元宝
腾讯元宝

腾讯混元平台推出的AI助手

文心一言
文心一言

文心一言是百度开发的AI聊天机器人,通过对话可以生成各种形式的内容。

讯飞写作
讯飞写作

基于讯飞星火大模型的AI写作工具,可以快速生成新闻稿件、品宣文案、工作总结、心得体会等各种文文稿

即梦AI
即梦AI

一站式AI创作平台,免费AI图片和视频生成。

ChatGPT
ChatGPT

最最强大的AI聊天机器人程序,ChatGPT不单是聊天机器人,还能进行撰写邮件、视频脚本、文案、翻译、代码等任务。

相关专题

更多
AO3官网入口与中文阅读设置 AO3网页版使用与访问
AO3官网入口与中文阅读设置 AO3网页版使用与访问

本专题围绕 Archive of Our Own(AO3)官网入口展开,系统整理 AO3 最新可用官网地址、网页版访问方式、正确打开链接的方法,并详细讲解 AO3 中文界面设置、阅读语言切换及基础使用流程,帮助用户稳定访问 AO3 官网,高效完成中文阅读与作品浏览。

89

2026.02.02

主流快递单号查询入口 实时物流进度一站式追踪专题
主流快递单号查询入口 实时物流进度一站式追踪专题

本专题聚合极兔快递、京东快递、中通快递、圆通快递、韵达快递等主流物流平台的单号查询与运单追踪内容,重点解决单号查询、手机号查物流、官网入口直达、包裹进度实时追踪等高频问题,帮助用户快速获取最新物流状态,提升查件效率与使用体验。

24

2026.02.02

Golang WebAssembly(WASM)开发入门
Golang WebAssembly(WASM)开发入门

本专题系统讲解 Golang 在 WebAssembly(WASM)开发中的实践方法,涵盖 WASM 基础原理、Go 编译到 WASM 的流程、与 JavaScript 的交互方式、性能与体积优化,以及典型应用场景(如前端计算、跨平台模块)。帮助开发者掌握 Go 在新一代 Web 技术栈中的应用能力。

11

2026.02.02

PHP Swoole 高性能服务开发
PHP Swoole 高性能服务开发

本专题聚焦 PHP Swoole 扩展在高性能服务端开发中的应用,系统讲解协程模型、异步IO、TCP/HTTP/WebSocket服务器、进程与任务管理、常驻内存架构设计。通过实战案例,帮助开发者掌握 使用 PHP 构建高并发、低延迟服务端应用的工程化能力。

4

2026.02.02

Java JNI 与本地代码交互实战
Java JNI 与本地代码交互实战

本专题系统讲解 Java 通过 JNI 调用 C/C++ 本地代码的核心机制,涵盖 JNI 基本原理、数据类型映射、内存管理、异常处理、性能优化策略以及典型应用场景(如高性能计算、底层库封装)。通过实战示例,帮助开发者掌握 Java 与本地代码混合开发的完整流程。

5

2026.02.02

go语言 注释编码
go语言 注释编码

本专题整合了go语言注释、注释规范等等内容,阅读专题下面的文章了解更多详细内容。

62

2026.01.31

go语言 math包
go语言 math包

本专题整合了go语言math包相关内容,阅读专题下面的文章了解更多详细内容。

55

2026.01.31

go语言输入函数
go语言输入函数

本专题整合了go语言输入相关教程内容,阅读专题下面的文章了解更多详细内容。

27

2026.01.31

golang 循环遍历
golang 循环遍历

本专题整合了golang循环遍历相关教程,阅读专题下面的文章了解更多详细内容。

33

2026.01.31

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

相关下载

更多

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
AngularJS教程
AngularJS教程

共24课时 | 3.3万人学习

走进 ES6 新标准语法
走进 ES6 新标准语法

共15课时 | 1.6万人学习

AngularJS 中文手册
AngularJS 中文手册

共0课时 | 0人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号