Angular2 项目实战 后台管理

作者: yitalalww | 来源:发表于2016-12-05 21:36 被阅读1476次

    Angular2 高级种子工程

    github地址:https://github.com/linweiwei123/hotshots-admin-angular2


    dashboard


    工程结构


    特性模块与共享模块案例

    种子工程 拿来即用;

    1 良好的工程结构;

    1.1 header,导航栏做通用component独立出来;

    1.2 输出文件分门别类

    2 angular2+webpack1构建;

    2.1 编译文件分类输出;

    2.2 输出js放index.html顶部加defer;

    2.3 webpack loader处理css,fonts,img案例;

    3 模块高级使用;

    3.1 特性模块

    3.2 lazyload,code splitting;

    3.3 共享模块;

    3.4 多级router-outlet

    4 路由高级使用;

    4.1 转场动画

    4.2 相对路由

    4.3 必须参数和不定参数

    5 service简单使用;

    数据持久化到内存;

    6 404页面;

    处理未匹配的url案例

    7 外部CSS;

    多个css外部文件的关系处理;

    高级模块使用 路由高级使用 404页面

    2016-12-8新增内容

    8 路由守护

    增加路由守护

    9 结合JWT做权限控制,增加登陆页面;

    登陆页面

    10 form表单验证

    登陆页面就是一个最好的表单验证

    Coming soon...

    11 与服务端通信

    12 动画

    13 管道

    14 自定义指令


    相关文章

      网友评论

      • 7770b08e766e:一直有个问题不太清楚,请指教。就是用angular cli创建的项目里面东西好多,入口也和普通的项目不一样。启动是用ng server启动,我还没试过用普通的server启动能否访问。如果是原有项目目录已经固定,怎么把angular这种目录集成进来了,因为它自己创建的这些文件实在是看得让人头大。请指教。
      • cdf8a00bf307:太棒了,正缺这个
      • yitalalww:初学者注意,这篇文章的种子工程是用webpack构建的,别跟我的另一篇angular-cli的搞混了
      • 狼2016:你好,请问一下,启动项目的时候,报下面这个错误需要怎样解决
        Html Webpack Plugin:

        Error: Child compilation failed:
        Loader H:\javascripts\hotshots-admin-angular2\node_modules\html\lib\html.js di dn't return a function

        - compiler.js:78
        [hotshots-admin-angular2]/[html-webpack-plugin]/lib/compiler.js:78:16

        - Compiler.js:214 Compiler.
        [hotshots-admin-angular2]/[webpack]/lib/Compiler.js:214:10

        - Compiler.js:403
        [hotshots-admin-angular2]/[webpack]/lib/Compiler.js:403:12

        - Tapable.js:67 Compiler.next
        [hotshots-admin-angular2]/[tapable]/lib/Tapable.js:67:11

        - CachePlugin.js:40 Compiler.
        [hotshots-admin-angular2]/[webpack]/lib/CachePlugin.js:40:4

        - Tapable.js:71 Compiler.applyPluginsAsync
        [hotshots-admin-angular2]/[tapable]/lib/Tapable.js:71:13

        - Compiler.js:400 Compiler.
        [hotshots-admin-angular2]/[webpack]/lib/Compiler.js:400:9

        - Compilation.js:577 Compilation.
        [hotshots-admin-angular2]/[webpack]/lib/Compilation.js:577:13

        - Tapable.js:60 Compilation.applyPluginsAsync
        [hotshots-admin-angular2]/[tapable]/lib/Tapable.js:60:69

        - Compilation.js:572 Compilation.
        [hotshots-admin-angular2]/[webpack]/lib/Compilation.js:572:10

        - Tapable.js:60 Compilation.applyPluginsAsync
        [hotshots-admin-angular2]/[tapable]/lib/Tapable.js:60:69

        - Compilation.js:567 Compilation.
        [hotshots-admin-angular2]/[webpack]/lib/Compilation.js:567:9

        - Tapable.js:60 Compilation.applyPluginsAsync
        [hotshots-admin-angular2]/[tapable]/lib/Tapable.js:60:69

        - Compilation.js:563 Compilation.
        [hotshots-admin-angular2]/[webpack]/lib/Compilation.js:563:8

        - Tapable.js:60 Compilation.applyPluginsAsync
        [hotshots-admin-angular2]/[tapable]/lib/Tapable.js:60:69

        - Compilation.js:525 Compilation.seal
        [hotshots-admin-angular2]/[webpack]/lib/Compilation.js:525:7

        yitalalww:@狼2016 https://pan.baidu.com/s/1pLhMfof 不行的话用这个解压下npm run start
      • 秀楼:为什么我用angular cli打开博主的源码。运行不了呢
        秀楼:@yitalalww 我按照你的步骤试了下,报以下错误
        16 verbose cwd D:\master
        17 error Windows_NT 6.1.7601
        18 error argv "E:\\SoftWare\\Program Files\\node.js\\node.exe" "E:\\SoftWare\\Program Files\\node.js\\node_modules\\npm\\bin\\npm-cli.js" "start"
        19 error node v6.9.1
        20 error npm v3.10.8
        21 error code ELIFECYCLE
        22 error angular2-boilerplate-lww@1.0.0 start: `webpack-dev-server --inline --progress --profile --port 3000`
        22 error Exit status 1
        23 error Failed at the angular2-boilerplate-lww@1.0.0 start script 'webpack-dev-server --inline --progress --profile --port 3000'.
        23 error Make sure you have the latest version of node.js and npm installed.
        23 error If you do, this is most likely a problem with the angular2-boilerplate-lww package,
        23 error not with npm itself.
        23 error Tell the author that this fails on your system:
        23 error webpack-dev-server --inline --progress --profile --port 3000
        23 error You can get information on how to open an issue for this project with:
        23 error npm bugs angular2-boilerplate-lww
        23 error Or if that isn't available, you can get their info via:
        23 error npm owner ls angular2-boilerplate-lww
        23 error There is likely additional logging output above.
        24 verbose exit [ 1, true ]
        yitalalww:@秀楼 4步骤,1.确保node 5.0版本以上 2.webpack 有装,3.npm install 4.npm run start,5然后去浏览器localhost:3000
        yitalalww:@秀楼 哈哈,我的这个不是angular-cli生成的,你npm install ,npm run start 就能跑,不能的话问我
      • 489c30db879c:干货十足,感谢~
        yitalalww:@rofleed 小兄弟,有眼光,他日必成大器!
      • c02585b16f8a:不错
        c02585b16f8a:@yitalalww 已经收藏
        yitalalww:@DavidLin1989 好东西,送你不收钱
      • yitalalww:后台管理的用这个工程改改就行了

      本文标题:Angular2 项目实战 后台管理

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