Angular 2 实践纲要

来源:互联网 发布:智能视频分析软件 编辑:程序博客网 时间:2024/06/05 17:19

Angular 2 实践纲要

  • Angular 2 实践纲要
    • 目前Angular 2项目的工程搭建有三种方式
      • 1首推 Angular -CLI
      • 2使用 angular-seed 作为基础工程
      • 3自己手动搭建工程目录和自动化编译工具等
    • 1Angular -CLI 快速起步耗时最多1个小时
      • 设置开发环境
      • 创建新项目以及应用的骨架
      • 启动开发服务器
      • 编辑该应用
    • 2使用Angular-CLI 新建工程 开发一个 英雄列表项目
      • 1构建本地开发环境
      • 2多组件开发
      • 3使用服务service
      • 4使用路由router
      • 5使用Http
      • 6生成环境构建部署
    • 3使用Angular 2 做一个后台内容管理系统
      • 1搭建项目工程
      • 2登录表单login
      • 3仪表盘dashboard
      • 4组件
    • - 常用组件
    • 4深入学习Angular 2 核心概念与TypeScript
    • 5优化应用进一步进阶

目前Angular 2项目的工程搭建有三种方式:

1、首推 Angular -CLI

因为使用简单,功能强大而方便,详情参考Angular -CLI

ng 三部曲

// 新建工程ng new [project-name]//启动本地开发ng serve // 构建生产环境ng build --prod

2、使用 angular-seed 作为基础工程

// 克隆工程并定位至工程目录git clone --depth 1 https://github.com/mgechev/angular-seed.gitcd angular-seed// 安装依赖npm install// 开启本地服务,预览工程开发npm start// 构建未压缩的开发环境代码npm run build.dev// 构建生产环境代码npm run build.prod

3、自己手动搭建工程目录和自动化编译工具等

1、Angular -CLI 快速起步(耗时最多1个小时)

Angular -CLI 快速起步

angular-cli 命令参考

【Angular -CLI 快速起步】能够达到以下目的:

设置开发环境

创建新项目以及应用的骨架

启动开发服务器

编辑该应用

2、使用Angular-CLI 新建工程 开发一个 英雄列表项目

2.1、构建本地开发环境

2.2、多组件开发

2.3、使用服务(service)

2.4、使用路由(router)

2.5、使用Http

2.6、生成环境构建部署

3、使用Angular 2 做一个后台内容管理系统

3.1、搭建项目工程

3.2、登录表单(login)

3.3、仪表盘(dashboard)

  • 头部导航
  • 侧栏
  • 底部
  • 内容布局
  • 面包屑

3.4、组件

- 常用组件

4、深入学习Angular 2 核心概念与TypeScript

5、优化应用进一步进阶

0 0