【玩转 Angular】1. Angular-CLI 安装与使用

前端之家收集整理的这篇文章主要介绍了【玩转 Angular】1. Angular-CLI 安装与使用前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

全局安装 Angular CLI 脚手架并创建项目

1.使用 npm 安装命令

$ npm install -g @angular/cli

2.使用 ng new 项目名 命令创建项目

$ npm new my-app

3.进入创建的项目并运行

$ cd my-app && ng server --open

目录结构解析

项目结构

文件 用途
e2e/ 在 e2e/ 下是端到端(End-to-End)测试,它们不在 src/ 下,是因为端到端的测试实际上和应用相互独立的,它只适用于测试你的应用而已,这也就是为什么它会拥有自己的 tsconfig.json
src 项目的所有文件都放在 src 里面,所有的 Angular 组件、模板、样式、图片以及应用所需要的任何东西
node_modules/ Node.js 创建了这个文件夹,并把 package.json 中的依赖模块都放在这里面
.angular-cli.json Angular CLI 的配置文件。在这个文件中,我们可以设置一些默认值,还可以配置项目编译时要包含的那些文件
.editorconfig 用于编辑器的简单配置文件,它用于确保参与项目的每个人都具有基本的编辑器配置,详情参见 http://editorconfig.org
.gitignore Git 配置文件,用于确保某些生成文件不会被提交到 Git 上
Karma.conf.js 给 Karma 的单元测试配置,当运行 ng test 时会用到
package.json npm 配置文件。其中列出了项目使用到的第三方依赖包。还可以在这里添加自定义脚本
protractor.conf.js 给 Protractor 使用的的端到端测试配置文件,当运行 ng e2e 时会用到
README.md 项目的基础文档
tsconfig.json TypeScript 编译器的配置
tslint.json 给 TSLint 和 Codelyzer 用的配置信息,当运行 ng lint 时会用到。Lint 功能可以帮助你保持代码风格的统一

src 目录结构

文件 用途
app/app.component.{ts,html,css,spec.ts} 组件使用的 HTML 模板、CSS 样式和单元测试定义 AppComponent 组件。它是根组件
app/app.module.ts 定义 AppModule,这个根模块会告诉 Angular 如何组装该应用。目前,它之声明 AppModule。稍后它还会声明更多组件
assets/* 静态资源文件,这个文件夹下可以放如图片等任何资源,在构建应用时,它们会全都拷贝到发布包中
environments/* 这个文件夹中包括了各个目标环境准备的文件,它们导出了一些应用要用到的配置变量。这些文件会在构建应用时被替换
favicon.ico 站点图标
main.ts 应用的主要入口点
polyfills.ts 不同的浏览器对 Web 标准的支持程度不同。填充库(polyfill)能帮助我们把这些不同点进行标准化。可以查看 浏览器支持指南
style.css 全局样式
test.ts 单元测试的主要入口点
tsconfig.{app|spec}.json TypeScript 编译器的配置文件。tsconfig.app.json 是为 Angular 应用准备的。tsconfig.spec.json 是为单元测试准备的

app.module.ts 代码分析

// BrowserModule 浏览器解析的模块
    import { BrowserModule } from '@angular/platform-browser';
    
    // angular 核心模块
    import { NgModule } from '@angular/core';
    
    // 根组件
    import { AppComponent } from './app.component';
    
    @NgModule({
        // 引入当前项目运行的组件
        declarations: [
            AppComponent
        ],// 引入当前模块运行依赖的其他模块
        imports: [
            BrowserModule
        ],// 定义的服务
        providers: [],// 根据应用的主视图(称为跟组件)通过引导根 AppModule 来启动应用,这里一般写的都是跟组件
        bootstrap: [ AppComponent ]
        
    })
    
    // 根模块不需要导出任何东西,因为其他组件组件不需要导入根模块,但一定要写
    export class AppModule { }

创建自定义组件

1.通过 ng g component 组件名称 命令创建自定义组件

$ ng g component components/header

2.app.module.ts自动添加 header 组件的引用

// BrowserModule 浏览器解析的模块
    import { BrowserModule } from '@angular/platform-browser';
    // angular 核心模块
    import { NgModule } from '@angular/core';

    // 根组件
    import { AppComponent } from './app.component';

    // Header 组件
    import { HeaderComponent } from './components/header/header.component';
    
    
    @NgModule({
      // 引入当前项目运行的组件
      declarations: [
        AppComponent,HeaderComponent
      ],// 引入当前模块运行依赖的其他模块
      imports: [
        BrowserModule
      ],// 定义的服务
      providers: [],// 根据应用的主视图(称为根组件)通过引导根 AppModule 来启动应用,这里一般写的都是根组件
      bootstrap: [AppComponent]
    })

    // 根模块不需要导出任何东西,因为其他组件不需要导入根模块,但一定要写。
    export class AppModule { }

3.打开 app/components/header/header.component.ts

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

4.在 app/app.component.html 中引入 header 组件

<app-header></app-header>

5.通过命令运行项目

$ ng server --open
原文链接:https://www.f2er.com/angularjs/144706.html

猜你在找的Angularjs相关文章