美文网首页我爱编程
angular项目开发流程

angular项目开发流程

作者: Lusia_ | 来源:发表于2017-02-06 10:46 被阅读260次

资源参考:
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 - 轻松实现即时通讯

相关文章

  • angular项目开发流程

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

  • 使用CircleCI2.0持续集成Angular项目

    对于Angular项目,之前处理一个ticket的流程我们的做法: 启动项目本地开发 npm start 开发完成...

  • Angular2.0—https服务

    Angular2.0—https服务 首先使用脚手架创建项目 友情链接:Angular2.0 —构建项目的流程以及...

  • Angular2.0—服务

    Angular2.0—服务 首先使用脚手架创建项目 友情链接:Angular2.0 —构建项目的流程以及使用ng-...

  • Angular2.0—管道

    Angular2.0—管道 首先使用脚手架创建项目 友情链接:Angular2.0 —构建项目的流程以及使用ng-...

  • Angular2.0—路由跳转

    Angular2.0—路由跳转 [# Angular2.0 —构建项目的流程以及使用ng-zorro 友情链接:A...

  • AngularJS初级入门实践

    Angular 配置 模块 Angular项目流程: 模块化(分工合作) + 自动构建工具(优化性能与代码) ...

  • Angular2.0—路由传参

    Angular2.0—路由传参 首先使用脚手架创建项目 友情链接:Angular2.0 —构建项目的流程以及使用n...

  • Angular2.0—父子传参

    Angular2.0—父子传参 首先使用脚手架创建项目 友情链接:Angular2.0 —构建项目的流程以及使用n...

  • 项目开发流程

    项目开发流程图: 项目开发流程:完成一个项目的流程,及人员 项目立项:负责项目 需求确认:业务逻辑及各项功能 交互...

网友评论

    本文标题:angular项目开发流程

    本文链接:https://www.haomeiwen.com/subject/orvvmttx.html