入门源码有三个基本项目,start v1.0、start v2.0、start v3.0
statr v1.0入门项目,适合新手,代码写法简单易懂
statr v2.0进阶项目,采用分层方式
statr v3.0目标项目,采用分层、按需加载模式,符合当下主流开发模式。
下面主要介绍v3.0
![13908708-261c58ade6de48dd.png](https://i-blog.csdnimg.cn/blog_migrate/dd980ac08eb95fd19be6220485ef1cb2.webp?x-image-process=image/format,png)
效果图镇楼
项目目录结构
![13908708-052fa56b19d0007e.png](https://i-blog.csdnimg.cn/blog_migrate/86211a3a836eeba3c22adf16fe1cd786.webp?x-image-process=image/format,png)
目录结构
项目采用Bootstrap布局,框架采用angularjs,IDE为VS2010,数据来源为读取json文件
配置项目
页面采用按需加载模式,所以angular要手动启动,页面上不需要添加ng-app(添加了会报错),同时导入requirejs,配置入口文件
index.html(首页)
![13908708-1777bdabd7d3e4d9.png](https://i-blog.csdnimg.cn/blog_migrate/ef826f23c454b0ef157ad3474cb04267.webp?x-image-process=image/format,png)
主要代码:
![13908708-2d4339616230a5fa.png](https://i-blog.csdnimg.cn/blog_migrate/f46c3668685cc5c62b2132cd99201995.webp?x-image-process=image/format,png)
解析:data-main="js/common/main" 代表加载完Requirejs后以main.js文件为入口文件(加载文件默认为.js后缀,省缺)
main.js(入口文件)
![13908708-60c1cc1046f72447.png](https://i-blog.csdnimg.cn/blog_migrate/ee4a920d40d384f12e7850a553152cb0.webp?x-image-process=image/format,png)
![13908708-03c7641a5c7742e7.png](https://i-blog.csdnimg.cn/blog_migrate/cb6e18ca1de7533a635f665e6cc3466a.webp?x-image-process=image/format,png)
后期补充(按需加载样式表)
解析:
require.config({}) 加载配置
baseUrl:路径前缀,默认为require所在目录,一般设为项目根目录(是在理解不了相对路径可以设成域名加端口)
paths:文件别名,为提高编码效率,以别名形式代替长长的文件路径(文件后缀默认为.js,省缺)
shim:配置依赖
urlArgs:参数,帮助调试,清除缓存
deps:优先加载的文件
正式加载
define(["angular", "app.module", "app.config"], function (angular) {
angular.element(document).ready(function () {
angular.bootstrap(document, ["phonecatApp"]);
});
});
在加载完angular、app.module和app.config后手动启动angular,应用的作用域为整个文档,应用名称为phonecatApp
可以把上面加载的三个文件理解三个命名空间
app.module.js(根模块)
![13908708-b2f407b49c7e294a.png](https://i-blog.csdnimg.cn/blog_migrate/919959cfd4e66ed2d087edb5734e9898.webp?x-image-process=image/format,png)
这里再加载完相应模块后配置根模块,根模块名称为phonecatApp,和前面手动启动的应用名称要一致,配置完成把该模块暴露出去,方便其他逻辑调用
PS:根模块所依赖的子模块必须在开始的时候全部加载,如果添加了模块需要来这里加载并添加依赖(控制器、指令等不需要)
app.config.js(根配置、路由配置)
![13908708-3e1138162b235aba.png](https://i-blog.csdnimg.cn/blog_migrate/91432cda6c1e8d949bf17305da010c8e.webp?x-image-process=image/format,png)
在加载完app.module(根模块)后,开始对其进行配置
app.requireJs为自定义方法,用于异步加载文件,会用即可
app.config 配置路由(暂时无法使用component形式)
resolve重点,在加载时触发,可自定义开发
phoneList.module.js(列表模块)
![13908708-cdcb1921cc5fd757.png](https://i-blog.csdnimg.cn/blog_migrate/5c665b988d2149f5bb94ed7fe6e37939.webp?x-image-process=image/format,png)
配置列表模块并返回
ps:注意config部分,用于暴露注册方法,方便注册控制器和服务等
phoneList.module.js(列表控制器)
![13908708-9247c4519d0447e1.png](https://i-blog.csdnimg.cn/blog_migrate/7f2b43834942389ed0f51befa564300d.webp?x-image-process=image/format,png)
注册列表控制器,其中Phone为自定义服务,内部封装了http请求
phoneDetail.module.js(详情模块)
![13908708-a0c9a82b5872445a.png](https://i-blog.csdnimg.cn/blog_migrate/523f10361817d0cf140767495d48e2bf.webp?x-image-process=image/format,png)
同列表模块
phoneDetail.controller.js(详情控制器)
![13908708-1729778921b88cb1.png](https://i-blog.csdnimg.cn/blog_migrate/1e28981b29ed56b5d6a1c1c1dfd9dc04.webp?x-image-process=image/format,png)
同列表控制器
phone.server.js(自定义服务)
![13908708-9be6ff48e4e160b5.png](https://i-blog.csdnimg.cn/blog_migrate/341aff2045222656f2b51f393570a3b7.webp?x-image-process=image/format,png)
依赖angular-resource,服务名称为Phone,设计风格为RESTful
模块拓展
当要添加新模块的时候,先声明新模块,然后在根模块配置依赖,再到根配置文件设置对应视图与动态加载控制器(后期添加:同同时也要去main.js里配置模块依赖的样式表,实现动态加载css)
![13908708-2ed195f0cbe13cdc.png](https://i-blog.csdnimg.cn/blog_migrate/aa54274a26c05071fb09317b3d29693e.webp?x-image-process=image/format,png)
补充:
代码已经发生了一些小变化,把列表控制器改成了组件形式,其次项目版本也发生了变化
该项目采用的是requirejs按需加载所需文件,其实也可以用oclazyload实现懒加载,两者思路差不多,可以单模块也可以使用多模块,更可以实现自定义组件