概念

  • 组件:是angular应用的基本构建快,你可以把组件理解为一段带有业务逻辑和数据的HTML
  • 模块:模块用来将应用中不同的部分组织成一个Angular框架可以理解的单元
  • 路由:

命令

  • ng new appName ————生存新项目

    • 注意:生成项目同时会下载npm依赖,如果失败需要换代理《nrm》
  • ng serve --open ————启动服务器并监听文件变化, --open(或 -o)打开浏览器

  • npm install -g @angular/cli ————安装最新版本

  • npm install -g @angular/cli@1.5.2 ————安装指定版本 1.5.2

  • npm uninstall -g @angular/cli ————卸载

  • ng serve --port 4202 ————以4202端口打开服务

angular-cli

  • ng -v ————查看angular cli版本
  • ng new xxx ————新建项目名称为XXX
  • ng generate component xxx ————生成组件
  • ng build ————打包项目
    • ng build --prod ————打包项目并且压缩
    • 注意:在最新版本ng6+ 的cli加上--prod参数就自动AOT了
  • ng test ————单元测试

类型描述文件

  • 目的:让typescript认识jQuery和bootstrap,可以在ts文件中调用
  • 安装本地
    • npm install @types/jquery --save-dev
    • npm install @types/bootstrap --save-dev

组件

  • 值绑定[src]、事件绑定(click)、双向绑定[()]

  • 内置结构指令

    • *ngIf、 *ngFor、 ngSwitch
  • 内置属性指令

    • NGClass、NgStyle、NgModel
    • ==注意:NgModel只能用在表单上,一般结合双休绑定[(Ngmodel)]使用==
  • 管道 过滤作用

    • public currentTime: Date = new Date(); //将currentTime过滤成指定格式
  • 安全导航

    • {{currentRace?.name}} // 如果currentRace没有name这个值则显示空,不会报错
  • 组件通讯

    • 父子组件之间交互(@Input/@Output/模板变量/@ViewChild)
    • 非父子组件之间的交互(Service/localStorage)
    • 还可以利用Session、路由参数来进行通讯、请展开自己想象

模块

路由

  • routers 路由配置,保存着哪个URL对应展示哪个组件,以及在哪个RouterOutlet中展示组件
  • RouterOutlet 在HTML中标记路由内容呈现位置的占位符
  • Router 负责在运行时执行的路由对象,可以通过调用navigate()和navigateByUrl()方法导航一个指定路由
  • RouterLink 在Html中声明路由导航用的指令
  • ActivatedRoute 当前激活的路由对象,保存着当前路由的信息,如路由地址,路由参数等。
  • 传路由参数

    • 值绑定[queryParams]='{id:1}'
  • 接路由参数

    • ActivatedRoute
  • 重定向路由

    • 主要用途路由后面为空的时候默认为主页
    • {path:'',redirectTo:'/home',pathMatch:'full'}

依赖注入

  • providers————提供者
  • Servic————服务
    • Angular 里面的 Service 与后端框架里面的 Service 设计思想是一致的:
    • Service 应该是无状态的。
    • Service 应该可以被很多组件复用,不应该和任何组件紧密相关。
    • 多个 Service 可以组合起来,实现更复杂的服务。
    • 如果你希望 Service 是全局单例的,需要把它定义到根模块里面。

使用

  • 注入器
    • constructor(private productService:ProductService){...}
      • angular中只能用构造器注入服务
  • 提供器
    • 要注入服务的时候一定要在providers里声明掉
    • providers:[ProductService]
    • providers:[{provide: ProductService,useClass:AnotherProductService}]