前言: angular在2018年5月份出了angular6.0 。 7.0的beta版也在8月3号发布
因为公司项目用的是angular6,所以有必要记录一下学习的过程。以及遇到的困难。

  1. angular cli 脚手架创建新项目

  2. npm install -g @angular/cli 安装命令

  3. ng -v 查看版本
  4. npm install 安装依赖(node_modules)
  5. ng new (项目名称) 自己创建新项目
  6. ng serve 启动服务(localhost:4200 更改端口号 ng serve - -port 4201)

    npm 可能安装失败建议先用 npm 安装一下 cnpm 用淘宝镜像安装
    _ npm install -g cnpm –registry=https://registry.npm.taobao.org_

  1. angular cli 6.0项目结构

e2e —-> 自动化配置文件及用例demo
src/app —-> 根组件主要文件夹,所有的 Angular 组件、模 板、样式 、图片 以及你 的应用 所需的 任何东 西都在 那里。
assets —-> 静态文件目录,图片,第三方库什么的
_environments _ —-> 开发模式和生产模式的配置文件,你可以把接口的根路径写在这里
main.ts —-> 入口文件
_polyfills.ts _—-> 兼容腻子,可以兼容刀ie10 和es6&7的语法
_styles.css _ —-> 全局样式
test.ts —-> 测试用例
package.json —-> npm ,其中列出了项目使用到的第三方依赖包。 你还可 以在这里 添加自 己的自 定义脚 本。
tsconfig.json —-> TypeScript 编译器的配置

ts文件中先使用import引入 Component import {Component} from ‘@angular/core’
_@Component({}) 定义组件的selector名称 templateUrl模版地址 styleUrl样式地址 _

创建组件命令 ng g component components/header

组件内容详解:

‘’ import { Component, OnInit } from ‘@angular/core’; /引入 angular 核心/
‘’ @Component({
‘’ selector: ‘app-header’, /使用这个组件的名称/
‘’ templateUrl: ‘./header.component.html’, /html 模板/
‘’ styleUrls: [‘./header.component.css’] /css 样式/ })
‘’ export class HeaderComponent implements OnInit { /实现接口/ constructor() { /构造函数/
‘’ }
‘’ ngOnInit() { /初始化加载的生命周期函数/ }
‘’ }

  1. angular路由
    angular router
    import {RouterModule,Routers} from ‘@angular/router’ 在app.modules.ts内import导入
    ‘’ <router-outlet></router-outlet> 路由的出口