大部分的项目结构是以 directives , service, controller 为基础来搭建的项目架构的，但这里更偏向于以应用场景来进行项目架构，因此这里的目录结构可能与您之前遇到的结构不同，如果有不喜欢的小伙伴请只看技术不讨论架构，如果觉得好的可以在这个的架构基础上提出改进意见 ### 项目描述 项目以一个聊天室为场景的应用，实现用户列表，对话，朋友圈，基本设置等基础功能 ### 项目拓展 实现聊天室功能后，接入电商模式，实现产品列表，下单，支付 ### 项目结构 > 本项目以 angularjs 为核心框架，通过 gulp+webpack 进行打包和发布 结构如下 - project (项目目录) - dist （发布目录） - node_modules （NODE 模块） - src （源码目录） - app （应用目录） - images （图片目录） - scss （scss 样式目录） - mixin - _button.scss （mixin 文件） - app.scss （scss 统一调用文件） - pages （页面目录） - home （主页面） - chat （聊天页面） - contact （通讯录） - circle （圈子） - circle.js - circle.html - setting （基本设置） - sections （块目录） - public - footer.js - footer.html - services （factory,service,provider） - user - user.js - func (通用函数 service 目录) - base64.js - jssdk.js - md5.js - filters （过滤器目录） - range - range.js - components （组件目录） - alert - alert.js - alert.html - button - button.js - button.html - … - font （字体源文件目录） - scss - svg - index.html （入口文件） > 期望，麻雀虽小，五脏俱全，希望这样的一个结构能让开发人员更清晰的知道每个应用场景所在的工作目录，以期达到高效便捷开发方式。 补充：项目准备在 GIT@OSC 开源，并且会跟着博文一步步的往下完善项目内容，因为不是事先准备，过程中肯定会有错误出现，因此希望小伙伴们多 FORK 以及 PUSH 内容上来（仅合并能自动合并的部分），后台 REST 部分，准备采用 YII2.0 框架，不熟悉的小伙伴也可以不用管他，这是后端的事，搞前端的小伙伴只需要处理好数据展示即可，这里尽量采用 MOCK 数据来模拟

> 前面的几篇文章已经对 angularjs 的入门有了一个基础的认识，了解了如何使用以及为什么使用它 [ 初识 Angularjs1.x ，了解5个W和1个H](#) [Angularjs 开始之Hello world](http://blog.csdn.net/w_yunlong/article/details/50443888) [Angularjs 中的 controller](http://blog.csdn.net/w_yunlong/article/details/50443958) [开始学习一个指令 directive 并了解指令的意义](http://blog.csdn.net/w_yunlong/article/details/50443989) [Angularjs1.x 中的 service,factory,provider,constant,value](http://blog.csdn.net/w_yunlong/article/details/50455662) [Angularjs1.x 中的 constant, value](http://blog.csdn.net/w_yunlong/article/details/50455742) 接下来的篇章，会深入的了解每一个角色在项目中的应用场景及作用，值得说明的是，本着不重复其他小伙伴们写的内容的文章，这里会以构造一个项目案例为基础来讲解 angularjs 在实际场景中的应用

### constant 常量 constant 在 angularjs 中指的是定义的常量，在应用启动时创建且不可随意更改 #### 定义 constant ~~~ angular.module('MyApplication') .constant('HELLO', 'hello world'); ~~~ ### value 变量 value 在 angularjs 中指的是定义的变量，可以在任意修改

> 了解 Angularjs1.x 中的 service,factory,provider,constant,value 的应用场景及区别 > 不管 service , factory 还是 provider 都属于 service ### 关于 service service 一旦被定义后就可以在任何地方通过依赖的方式调用且可以保存数据，直到应用结束，比如 ~~~ controller(['service', function(service){}]); ~~~ 而 controller 则一旦路由发生变化 controller 就会失效，下次打开页面就需要重新加载保存数据 ### factory factory 是 angularjs 中创建 service 最简单的一个方法 #### 创建 factory 通过使用 factory 我们只需要返回一个包含数据，方法的对象就可以了，如下 ~~~ angular.module('MyApplication') .factory('user', ['$http', function($http){ var loginUrl = 'http://localhost/api/v1/login'; return { login: function(username, password) { return $http.post(loginUrl, { username: username, password: password }); }, }; }]); ~~~ #### 调用 factory 通过以下方式即可调用上述 service ~~~ angular.module('MyApplication') .controller(['$scope', 'user', function($scope, user){ user.login('name', 'password').then(function(response){ if(response.data.err_code == 0) { console.log('登录成功') } else { console.log('登录失败') } }, function(response){ console.log('网络请求出错了', response) }); }]); ~~~ #### 应用场景 在 service 中，如果我们仅仅需要的是一些方法或数据集合，则可以通过 factory 简单的创建一个 service 来满足需求 注：如果需要在 config 中配置 service 则不能使用 factory 来创建 ### service #### 创建 service service 通过构造函数来创建 service，具体实现同 factory，示例如下 ~~~ angular.module('MyApplication') .service('user', ['$http', function($http){ var loginUrl = 'http://localhost/api/v1/login'; this.login: function(username, password) { return $http.post(loginUrl, { username: username, password: password }); }; }]); ~~~ #### 调用方式 其调用方式与 factory 同样 ~~~ angular.module('MyApplication') .controller(['$scope', 'user', function($scope, user){ user.login('name', 'password').then(function(response){ if(response.data.err_code == 0) { console.log('登录成功') } else { console.log('登录失败') } }, function(response){ console.log('网络请求出错了', response) }); }]); ~~~ #### 应用场景 可以看到，这里的 login 使用了 this. 的方式来创建的，在此场景中可以写更多的业务逻辑来控制数据 注：如需在 config 中配置 service 的话，除了 factory 不能用之外， service 也不能用 ### provider provider 是最底层的创建 service 的方法，可以在 config 中被调用和配置 #### 创建 provider 创建 provider，与 factory、service 不同的是，provider 需要使用 this,$get 来返回方法和数据 ~~~ angular.module('MyApplication') .provider('user', ['$http', function($http){ this.loginUrl = 'http://localhost/api/v1/login'; this.setLoginUrl = function(url){ this.loginUrl = url; } this.$get = function($http) { return { login: function(username, password) { return $http.post(this.loginUrl, { username: username, password: password }); }, }; } }]); ~~~ #### 调用方式 与 factory、service 不同的是， provider 可以在 config 中调用，示例如 ~~~ angular.module('MyApplication') .config(['user', function(user){ user.setLoginUrl('http://localhost/api/v2/login'); }]); ~~~ 普通调用则与 factory, service 的调用方式一样 #### 应用场景 当需要通过配置指定特殊的数据源时就可以使用 provider 来实现，比如开发环境和生产环境的数据交互地址的域名可能不一致，就可以通过这种方式来实现

> 这一节中，开始一些比较新的东西了，但都会从简入深的学习，不用担心理解不了，这里都会以白话的形式去描述 ### 指令 directive 可以干什么 directive 允许我们自定义一些非标准的HTML标签，便于我们的业务需要的处理 ### 一个简单的 button 指令 将Angularjs 开始之Hello world中的JS代码部分修改为以下内容 ~~~ angular.module('MyApplication', []) .controller('HelloWorld', ['$scope', function($scope){ $scope.text = "Hello world"; }]) .directive('button', function(){ return { link: function(scope, elements, attrs) { elements.addClass('btn'); } }; }); ~~~ 然后运行后，通过审查元素的方式，查看BUTTON 按钮，程序已经自动的为 BUTTON增加了命名为 btn 的 class

> 接触过程序开发的小伙伴们对 MVC 的开发方式想必一点也不陌生，是的， angularjs 所采用的方式便是 MVVM 的开发方式，这里的 controller 即控制器 ### 了解 controller > The ngController directive attaches a controller class to the view. This is a key aspect of how angular supports the principles behind the Model-View-Controller design pattern. 译文： > ngController 是关注于视图 controller 的一个指令 ### 指令的基本信息 ~~~ This directive creates new scope. This directive executes at priority level 500. ~~~ 译文： 指令会创建一个 scope 即作用域 ### 什么时候使用 controller 当我们需要一个新的模块并且不希望它跟其他模块的数据产生冲突的情况下，我们就可以使用一个 ngController 来独立这一块的内容，比如我们的文章正文模块可以使用 ng-controller=”AricleController”，而文章中的评论模块则可以使用 ng-controller=”CommentController” 来完成

### 为什么这样写 像所有程序的开始一样，使用 angularjs 也从 Hello world 开始 ### 书写 Html 结构 ~~~ ~~~ ### 输出一个 Hello world ~~~ ~~~ 复制以上 DEMO 到自己的 HTML 文件中，运行即可。 关于如何运行自己的程序，请看那些WEB服务器们

### What 什么是 angularjs > AngularJS是Google开发的纯客户端JavaScript技术的WEB框架 ### When 什么时候使用 > 当你需要开发一个单页应用的时候，就可以使用 angularjs 方便的开发一个优雅的 WEB 系统 ### Where 在哪里用 > 可以用在一些管理系统应用上，比如客户管理系统，订单管理系统等，还可以用在现在流行的移动开发上面 ### Who 谁要用 > 专注于WEB前端开发的前端工程师们 ### Why 为什么要用 > 高性能的WEB开发框架，让我们在架构系统时，无需考虑更多的核心处理数据，只需要专注于我们的业务逻辑处理即可，使用 ng 可以仅仅通过更新状态来更新我们的页面内容而无需操作 DOM，加速页面渲染速度，则时页面无需刷新，用户体验更顺畅 ### How 怎么用 > 引用 angularjs ,定义页面中 ng-app=”YourApplication” 更多细节，请继续关注同类下其他文章

> 原文出处：[Angularjs1.x](http://blog.csdn.net/column/details/angularjs1x.html) 作者：[w_yunlong](http://blog.csdn.net/w_yunlong) **本系列文章经作者授权在看云整理发布，未经作者允许，请勿转载！** # Angularjs1.x > Angularjs 单页应用框架，本栏主讲 angularjs 在实际项目应用中所涉及到的方方面面，由浅入深的讲解如何使用 angularjs 打造一个完整的项目示例