zoukankan      html  css  js  c++  java
  • Angular核心概念

    一、集成开发环境@angular/cli

    • IE8之后才有debugger工具
    • 2009,nodejs发布,前端Big Bang

    1.1 基于NodeJS的工具链

    打包工具

    • grunt 对js代码做合并、压缩、混淆
    • gulp grunt的改进版
    • webpck 打包工具,静态模块打包器,一个标准

    自动化测试工具

    • karma
    • jasmine

    CSS预编译

    • Material Design 中文 质感设计
      • 每一段时间,都有一种风格
      • 苹果 倡导 扁平化,极简化
      • Google 倡导 Material Design
    • less/sass 做css预编译

    1.2 NodeJS问题 npm

    • 墙,有些模块装不上
    • 对package管理不好,目录嵌套太深

    1.3 开发Angular需要的开发工具

    依次是:

    • webpack
    • TypeScript编译器
    • karma/jasmine 自动化单元测试
    • Protractor 为Angular应用量身订制的集成测试工具

    1.4 Angular CLI

    官网:https://cli.angular.io/

    npm install -g @gngular/cli
    ng --version
    ng help
    ng new my-dream-app
    cd my-dream-app
    ng serve
    
    # 国内推荐使用cnpm
    

    二、三大核心概念

    • Angular1.x没有灵魂
    • Angular核心概念是“组件化”
      • 分治,分而治之
      • 可复用
    • 组件分到每个模块里去,用路由来控制这些模块的加载和初始化

    2.1 Component

    组件树

    单向数据流

    刷新策略

    组件树生成器

    https://github.com/compodoc/ngd

    2.2 NgModule

    https://angular.io/guide/ngmodule-faq

    什么是模块?

    NgModule作用

    • 帮助组织业务模块
    • 是Angular/CLI工具的打包依据,保证js是异步加载
    • 是异步加载的最小单位

    切分模块

    • 浏览器对http请求有并发数限制
      • IE9 2个
      • Firefox/Chrome 4个

    切分

    切分原则

    2.3 Route

    前端为什么需要Router?

    如果没有路由

    • 浏览器的前进后退按钮没法用
    • 无法把URL拷贝并分享给你的朋友

    路由是什么?

    • 从本质上讲,表示的是页面上的一个状态
    • 从数据结构讲,是一个tree型结构

    静态路由

    • 自动把这些组件打包到一个trunk里去

    异步路由

    路由守护

    三、架构特色

    依赖注入、数据绑定

    3.1 依赖注入

    只有一种注入方法:构造器注入

    注射器本身也会构成一个tree型结构

    查看注射器里面有什么属性和方法:chrome debugger

    • 每个HTML标签上面都会有一个注射器实例
    • 注射是通过constructor进行的
    • @Injectable是@Component的子类

    DI与DataBinding相关文章

    https://vsavkin.com/dependency-injection-in-angular-1-and-angular-2-d69589979c18

    http://web.jobbole.com/88605/ 中文翻译

    https://blog.thoughtram.io/angular/2016/02/22/angular-2-change-detection-explained.html

    https://pascalprecht.github.io/slides/angular-2-change-detection-explained/#/

    3.2 数据绑定

    • Angular是第一个将双向数据绑定概念引用到前端开发来的
    • 新版本的Angular已经彻底重写了脏检查机制
    • 在JS里面,有3个异步调用可能造成数据模型的修改
      • 事件回调
      • Timer的回调
      • Ajax回调

    四、UI库

    • PrimeNG :到目前为止最完善的开源免费UI组件库
    • NG-Zorro:来自阿里云的开源组件库
    • Jigsaw:来自ZTE中兴通讯的开源组件库
    • Clarity:来自Vmware的组件库
    • Angular-Material:Angular官方提供的组件库
    • Ionic :专门为Angular设计的移动端组件库

    五、参考资源推荐

    • ng2-admin
    • JHipster-后端基于SpringMVC
    • NiceFish

    参考

    35分钟掌握Angular核心概念 - Youbute

    35分钟掌握Angular核心概念 - Bilibili

    PPT

  • 相关阅读:
    Shiro权限验证
    5种设计模式整理
    多模块的SpringBoot项目
    Go使用数据库
    使用Go mod
    docker基本使用
    Go的IO操作
    实现一个网盘存储……
    Go的网络编程
    学习golang的历程
  • 原文地址:https://www.cnblogs.com/okokabcd/p/9011938.html
Copyright © 2011-2022 走看看