angularjs实际工程目录结构

angularjs是一个优秀的前端框架，主要核心有双向绑定、依赖注入、MVC等，不再赘述。

下面是实际开发项目中的目录结构示例：


我的项目根目录是helloangular，下面所使用的各层级目录均创建在根目录下，实际上也可以在根目录下创建名为“app”的目录，各层级目录放在“app”目录下，根目录下再放置其他公共文件、配置文件等。

index.html是项目的入口文件，代码如下：




入口html中引入需要的js、css等资源，并声明应用（ng-app），在需要插入视图的标签上声明ng-view，这样路由中的视图将都插入至此标签下。

app.js是angular项目的主js，代码如下：


主js中创建主模块，引入所有依赖的模块，以“ng”打头的模块是angular的内置模块，需要引入相应的js文件，如示例代码中依赖了“ngRoute”，则需要引入angular.route.js，另外，配置了访问路由，示例中的路由只创建了一个路径即“hello”,访问“项目路径/index.html/hello”即会使用“helloController”控制器来控制“views/hello.html”视图。这里需要注意的是“templateUrl”属性后所写的路径不要以“/”开头，否则将找不到路径，如果直接访问"项目路径/index.html"，因为不符合任何路由，按照市里代码中的otherwise部分，也会自动跳转至hello路由。
按照以上配置，当项目访问hello路由时，实际是将hello.html插入到了入口html的ng-view中。

hello.html是一个示例视图文件，代码如下：


示例视图中只是显示了控制器中的一个属性值。

路由中用来控制hello.html视图的是helloController，所有的控制器被定义在script目录下的controllers.js中，当然实际开发中，团队中多人协作开发，可以将controllers.js进一步细分。

controllers.js中代码如下：




访问index.html效果如下：





其他文件：
script/directives.js 用来盛放angular中自定义组件
script/filters.js 用来盛放angular的过滤器
script/services.js 用来盛放angular的服务

framework中当然可能不是只有angularjs，还可能有bootstrap等框架。

　　总之，实际项目中，创建一个入口文件（相当于java中的main函数），在入口文件中声明好应用主模块、依赖模块，利用angularjs提供的路由，分模块匹配控制器和视图，其实这样配置，与struts的MVC是不是就挺类似了。另外，angularjs以“模块”为基础，script目录下的五个文件，都是先申明成为模块，再进行操作。
本文出自 “ThatWay” 博客，请务必保留此出处http://thatway.blog.51cto.com/4815281/1722768