如何构建一个完整的angular项目（一）--- 如何按需加载静态资源
2015-08-07 10:56
831 查看
（本文只讲架构，具体知识内容掠过）
之前在angular比较火的时候写过几个demo，无非就是简单用了下他的数据绑定，directive 等特定，有了个比较好用的印象。
后来由于自己做的项目有非常多的增删改操作，而且结构比较复杂，每次都需要选取各种各样的节点再取出数据其实是件特别糟心的事情，于是乎就想到用angular来做我的项目其实是非常合适的，只需要对数据进行操作就好了，于是整个项目都决定使用angular完整的搭建起来。
理想很丰满，但是现实是很骨感的。网上angular的有用的资料确实比较少，而且大部分是教你怎么用的，要是说完整搭建整个项目的就少之又少。于是乎，问题就来了，首先，资源的目录结构要怎么定呢？
这点还好，大部分的例子都是这样的
也就是说，controller是放在一起的，directive又是放在一起的，于是我也先采用了这种方式。
那么接下来的问题就是，路由要怎么用。
由于页面的结构是比较复杂的，自然要使用支持模板嵌套的 angular-ui-router.js组件（这里的用法不再细讲）。
angular由于主要是做单页面应用的，他的一个问题就是，几乎所有的静态资源都是一次性加载的，这对性能简直是极大的考验，所以作为一个前端，做一个真正的项目时，这几乎是不能忍的。自然是有前端路由的，那我们必须利用路由，按需加载啊。
按需加载css其实很简单，只需要你在页面的head里面进行数据绑定就可以了。
<head ng-controller="CustomCss">
<link ng-repeat="href in hrefs" ng-href="{{href}}" type="text/css" rel="stylesheet"/>
</head>
然后你写个配置列表，在controller里面监听 $stateChangeSuccess 事件，改变hrefs的值就可以了。so easy~
但但但但是！你以为js也可以这么做么？！那就大错特错了。虽然是按需加载，但是你的js一定要在模板加载前加载完毕，但是上面的方式明显不能保证加载顺序了！
于是就出
4000
现一下报错：
这个OverviewTableList 就是我们在当前模板上定义的controller，他会报 undefined 的错误。
所以那要怎么办呢？
当然，一说按需加载，一下子就想到了requireJS，我们需要的时候再require进来。ok，那咱就requireJs，并且要在路由转换的时候把js require进来就完美了。
ui-router正好给我们提供了这个时机，看图：
上图的resolve其实是angular自己的route就有的属性，他的作用就是用来解决你在加载页面模板之前要干的事情的，这里我们统一使用loadScript函数来require相应的js（$q是依赖注入，angular提供的类似promise的对象），如下图：
这个loadScript很简单的实现了一个require script的功能，等require完毕直接返回，之后ui-router会直接load相应的模板。
所以你就以为大功告成了，就这么简单。其实并不是的！！让我们来看看下效果：
仍旧还是报未定义的错误！！！这是为什么呢？为什么呢？我的内心几乎是崩溃的。
但是木有办法，项目还是要做，所以还是要找原因。先上网上找找有木有同病相怜的吧，于是乎就真的让我找到了。
我先转述下意思，是这样的。
你以为你将 controller 在模板后面加载这么想当然就行了么？然并卵啊。
因为angular有个启动函数，叫做bootstrap，根据angular的代码设计，你需要在启动之前定义所有的controller，就好似有个袋子，你在bootstrap之前想往里塞什么就塞什么，可是一旦bootstrap了，他就不再接受你任何往里塞的controller了（就是这么任性）。当然，为什么会这样我们之后在分析bootstrap的源码的时候会讲到，这里由于主要讲的是架构，就先不细说了。
所以解决方案是什么呢？我们有一个现成的解决方案， angularAMD，顾名思义，解决异步加载问题。
怎么用呢？一般就在两个地方用
只需要两个地方，一个是他的bootstrap（启动过程）一个是在配置路由的时候使用他的route方法。
虽然它还提供别的接口，当然，这两个就已经够我们用的了。
加上这个以后，我们就可以随心所欲的加载任何静态资源了，鼓掌~
之前在angular比较火的时候写过几个demo，无非就是简单用了下他的数据绑定，directive 等特定，有了个比较好用的印象。
后来由于自己做的项目有非常多的增删改操作，而且结构比较复杂，每次都需要选取各种各样的节点再取出数据其实是件特别糟心的事情，于是乎就想到用angular来做我的项目其实是非常合适的，只需要对数据进行操作就好了，于是整个项目都决定使用angular完整的搭建起来。
理想很丰满，但是现实是很骨感的。网上angular的有用的资料确实比较少，而且大部分是教你怎么用的，要是说完整搭建整个项目的就少之又少。于是乎，问题就来了，首先，资源的目录结构要怎么定呢？
这点还好，大部分的例子都是这样的
也就是说，controller是放在一起的，directive又是放在一起的，于是我也先采用了这种方式。
那么接下来的问题就是，路由要怎么用。
由于页面的结构是比较复杂的，自然要使用支持模板嵌套的 angular-ui-router.js组件（这里的用法不再细讲）。
angular由于主要是做单页面应用的，他的一个问题就是，几乎所有的静态资源都是一次性加载的，这对性能简直是极大的考验，所以作为一个前端，做一个真正的项目时，这几乎是不能忍的。自然是有前端路由的，那我们必须利用路由，按需加载啊。
按需加载css其实很简单，只需要你在页面的head里面进行数据绑定就可以了。
<head ng-controller="CustomCss">
<link ng-repeat="href in hrefs" ng-href="{{href}}" type="text/css" rel="stylesheet"/>
</head>
然后你写个配置列表，在controller里面监听 $stateChangeSuccess 事件，改变hrefs的值就可以了。so easy~
但但但但是！你以为js也可以这么做么？！那就大错特错了。虽然是按需加载，但是你的js一定要在模板加载前加载完毕，但是上面的方式明显不能保证加载顺序了！
于是就出
4000
现一下报错：
这个OverviewTableList 就是我们在当前模板上定义的controller，他会报 undefined 的错误。
所以那要怎么办呢？
当然，一说按需加载，一下子就想到了requireJS，我们需要的时候再require进来。ok，那咱就requireJs，并且要在路由转换的时候把js require进来就完美了。
ui-router正好给我们提供了这个时机，看图：
上图的resolve其实是angular自己的route就有的属性，他的作用就是用来解决你在加载页面模板之前要干的事情的，这里我们统一使用loadScript函数来require相应的js（$q是依赖注入，angular提供的类似promise的对象），如下图：
这个loadScript很简单的实现了一个require script的功能，等require完毕直接返回，之后ui-router会直接load相应的模板。
所以你就以为大功告成了，就这么简单。其实并不是的！！让我们来看看下效果：
仍旧还是报未定义的错误！！！这是为什么呢？为什么呢？我的内心几乎是崩溃的。
但是木有办法，项目还是要做，所以还是要找原因。先上网上找找有木有同病相怜的吧，于是乎就真的让我找到了。
我先转述下意思，是这样的。
你以为你将 controller 在模板后面加载这么想当然就行了么？然并卵啊。
因为angular有个启动函数，叫做bootstrap，根据angular的代码设计，你需要在启动之前定义所有的controller，就好似有个袋子，你在bootstrap之前想往里塞什么就塞什么，可是一旦bootstrap了，他就不再接受你任何往里塞的controller了（就是这么任性）。当然，为什么会这样我们之后在分析bootstrap的源码的时候会讲到，这里由于主要讲的是架构，就先不细说了。
所以解决方案是什么呢？我们有一个现成的解决方案， angularAMD，顾名思义，解决异步加载问题。
怎么用呢？一般就在两个地方用
只需要两个地方，一个是他的bootstrap（启动过程）一个是在配置路由的时候使用他的route方法。
虽然它还提供别的接口，当然，这两个就已经够我们用的了。
加上这个以后，我们就可以随心所欲的加载任何静态资源了，鼓掌~
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 架构纵横谈之二 ---- 架构的模式与要点
- 异步流程控制：7 行代码学会 co 模块
- [译] React 入门
- 注册表的组织结构
- BS项目中的CSS架构_仅加载自己需要的CSS
- 关于三种主流WEB架构的思考
- SQLSERVER的非聚集索引结构深度理解
- 调整SQLServer2000运行中数据库结构
- C#基础语法：结构和类区别详解
- 深入c# 类和结构的区别总结详解
- c#结构和类的相关介绍
- C#中结构(struct)的部分初始化和完全初始化实例分析
- C#中类与结构的区别实例分析
- C#枚举类型与结构类型实例解析
- javascript实现表现、结构、行为分离的选项卡效果！
- Android操作系统的架构设计分析
- w3c技术架构介绍
- linux学习笔记 linux目录架构
- 实用的js 焦点图切换效果 结构行为相分离