[angular] - angular项目开发流程

资源参考：
http://blog.163.com/kill_everything_l/blog/static/20189610320154293575924/

一、新建项目目录

1、推荐的目录结构

Paste_Image.png

2、目录介绍

• 1 framework
  存放各种库

  
  
  Paste_Image.png
• 2 tpls
  存放各种html模板

• 3 js
  各种js文件

  
  
  Paste_Image.png
  
  

  controller就是MVC里的C，services就是Model
  app.js 可以做路由配置页

angular.module('app')
    .run(
        ['$rootScope', '$state', '$stateParams',
            function($rootScope, $state, $stateParams) {
                $rootScope.$state = $state;
                $rootScope.$stateParams = $stateParams;
            }
        ]
    )
    .config(
        ['$stateProvider', '$urlRouterProvider',
            function($stateProvider, $urlRouterProvider) {
                $urlRouterProvider.otherwise('/auth/loading');
                $stateProvider.state('auth', {
                        abstract: true,
                        url: '/auth',
                        template: '<div ui-view class="fade-in"></div>',
                        resolve: {
                            deps: ['$ocLazyLoad',
                                function($ocLazyLoad) {
                                    return $ocLazyLoad.load('admin/auth/ctrl.js');
                                }
                            ]
                        }
                    })
                    .state('auth.loading', {
                        url: '/loading',//地址栏路径
                        templateUrl: 'admin/auth/loading.html'  //对应文件
                    })

• 4 index.html
  整个项目的运行，在这里引入所需要的所有js和css
  
  Paste_Image.png
  
  顶部和底部不变，可以固定
  <div ui-view></div>把对应页面的html加载到含有ui-view的div中
  ng-app="routerApp"angular的作用域

其他、webSDK

1、SDK

这是一个非常大的概念--"软件开发工具包"，这个工具包中集成了各种开发工具和接口，是用来简化使用某种语言或平台的开发过程的

2、网易云信示例

http://dev.netease.im/docs?doc=web_demo&pos=toc-1
视频播放，聊天。客服

3、IMSDK - 轻松实现即时通讯