Asp.net开发Angular开发指南Angular.js专场

Requirejs与angularjs

2018-09-05  本文已影响2人  MsgSS

入门源码有三个基本项目,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实现懒加载,两者思路差不多,可以单模块也可以使用多模块,更可以实现自定义组件

上一篇 下一篇

猜你喜欢

热点阅读