入门源码有三个基本项目,start v1.0、start v2.0、start v3.0
statr v1.0入门项目,适合新手,代码写法简单易懂
statr v2.0进阶项目,采用分层方式
statr v3.0目标项目,采用分层、按需加载模式,符合当下主流开发模式。
下面主要介绍v3.0
效果图镇楼
项目目录结构
目录结构
项目采用Bootstrap布局,框架采用angularjs,IDE为VS2010,数据来源为读取json文件
配置项目
页面采用按需加载模式,所以angular要手动启动,页面上不需要添加ng-app(添加了会报错),同时导入requirejs,配置入口文件
index.html(首页)
主要代码:
解析:data-main="js/common/main" 代表加载完Requirejs后以main.js文件为入口文件(加载文件默认为.js后缀,省缺)
main.js(入口文件)
后期补充(按需加载样式表)
解析:
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(根模块)
这里再加载完相应模块后配置根模块,根模块名称为phonecatApp,和前面手动启动的应用名称要一致,配置完成把该模块暴露出去,方便其他逻辑调用
PS:根模块所依赖的子模块必须在开始的时候全部加载,如果添加了模块需要来这里加载并添加依赖(控制器、指令等不需要)
app.config.js(根配置、路由配置)
在加载完app.module(根模块)后,开始对其进行配置
app.requireJs为自定义方法,用于异步加载文件,会用即可
app.config 配置路由(暂时无法使用component形式)
resolve重点,在加载时触发,可自定义开发
phoneList.module.js(列表模块)
配置列表模块并返回
ps:注意config部分,用于暴露注册方法,方便注册控制器和服务等
phoneList.module.js(列表控制器)
注册列表控制器,其中Phone为自定义服务,内部封装了http请求
phoneDetail.module.js(详情模块)
同列表模块
phoneDetail.controller.js(详情控制器)
同列表控制器
phone.server.js(自定义服务)
依赖angular-resource,服务名称为Phone,设计风格为RESTful
模块拓展
当要添加新模块的时候,先声明新模块,然后在根模块配置依赖,再到根配置文件设置对应视图与动态加载控制器(后期添加:同同时也要去main.js里配置模块依赖的样式表,实现动态加载css)
补充:
代码已经发生了一些小变化,把列表控制器改成了组件形式,其次项目版本也发生了变化
该项目采用的是requirejs按需加载所需文件,其实也可以用oclazyload实现懒加载,两者思路差不多,可以单模块也可以使用多模块,更可以实现自定义组件