zoukankan      html  css  js  c++  java
  • angular

    1.安装nodejs, node -v 显示版本号安装成功

    安装cnpm

    修改淘宝镜像源:npm install -g cnpm --registry=https://registry.npm.taobao.org

    安装angular:npm install -g @angular/cli    或者   cnpm install -g @angular/cli

    查看是否安装成功:ng v

    创建项目:ng new 项目名称

    创建过程中会问你是否安装配置路由

    安装依赖:npm install

    切换到根目录运行项目:ng serve --open

    2.angular项目目录结构分析

    详情查看:https://www.angular.cn/guide/file-structure

    app.module.ts

    定义 AppModule, 这个根模块会告诉 Angular 如何组装该应用。 目前, 它只声明了 AppComponent。 稍后它还会声明更多组件。

    /*这个是angular根模块,告诉angular如何组装应用 */
    //Angular核心模块
    import { NgModule } from '@angular/core';
    //BrowserModule,浏览器解析的模块
    import { BrowserModule } from '@angular/platform-browser';
    //根组件
    import { AppComponent } from './app.component';
    import { NewsComponent } from './components/news/news.component';
    import { HomeComponent } from './components/home/home.component';
    import { HeaderComponent } from './components/header/header.component';
    import { AppRoutingModule } from './app-routing.module'; 
    /*@NgModule装饰器, @NgModule接受一个元数据对象,告诉 Angular 如何编译和启动应用*/
    @NgModule({
      declarations: [   /*配置当前项目运行的的组件*/
        AppComponent,NewsComponent, HomeComponent, HeaderComponent
      ],
      imports: [    /*配置当前模块运行依赖的其他模块*/
        BrowserModule,
        AppRoutingModule
      ],
      providers: [],   /*配置项目所需要的服务*/
      bootstrap: [AppComponent]    /* 指定应用的主视图(称为根组件) 通过引导根AppModule来启动应用  ,这里一般写的是根组件*/
    })
    //根模块不需要导出任何东西,因为其他组件不需要导入根模块
    export class AppModule { }

    创建header组件:

    ng g component components/header
    import { Component, OnInit } from '@angular/core'; /*引入 angular 核心*/
    
    @Component({
      selector: 'app-header', /*使用这个组件的名称*/
      templateUrl: './header.component.html', /*html 模板*/
      styleUrls: ['./header.component.scss'] /*css 样式*/
    })
    export class HeaderComponent implements OnInit { /*实现接口*/
    
      constructor() { }/*构造函数*/
    
      ngOnInit() {/*初始化加载的生命周期函数*/
      }
    
    }
    dayehui
  • 相关阅读:
    unity中制作模拟第一人称视角下的指南针
    unity3D 中的C#脚本一个类调用另一类中简单方法
    unity中UI的屏幕自适应代码
    unity中导入插件时报错处理办法
    Unity3D在C#编程中的一些命名空间的引用及说明
    Unity中物体碰撞后去掉相互之间的反弹力
    unity3D打包发布Apk详细步骤
    unity3D开发的程序发布到Android平台上进行运行测试的详细步骤
    JAVA的环境变量配置(方式二)
    Java中的 JDK下载和环境配置(方式一)
  • 原文地址:https://www.cnblogs.com/zrh-960906/p/14472906.html
Copyright © 2011-2022 走看看