您现在的位置是:网站首页> 内容页

零开始构建Angular项目

  • 澳门大富豪网站平台
  • 2019-10-31
  • 208人已阅读
简介1、环境准备1.1、安装VisualStudioCode  1.2、Nodejs安装(安装注意选择npmpackagemanager)   1.3、GitBASH安装 

1、环境准备

1.1、安装Visual Studio Code   

1.2、Nodejs 安装(安装注意选择npm package manager)

    

1.3、Git BASH安装

 

2、项目构建

 2.1、右键打开 git bash here

 2.2、全局安装angular cli   (cli工具能帮助我们创建和管理项目)

 

$ npm i -g @angular/cli

 

2.3、  当前目录创建AngularDemo项目 

$ ng new AngularDemo

2.4、创建angular项目目录介绍

VSCode 打开项目

  e2e:终到端(End-to-End)的测试目录,包含基本的测试桩。

  node_modules:项目依赖项,Node.js创建了这个文件夹,并且把package.json中列出的所有第三方模块都存放在该目录中(是由Node.js开发环境自行创建的目录) 

                               $  npm i  重新下载node_modules 项目依赖项目

 src:应用源代码目录,开发者写的代码都存储在这个目录下面,其中包含的目录和文件有如下几类

           app文件夹:包含5个文件

                               app.component.css    样式文件,作用于app文件夹的html                                      app.component.html   网页文件                               app.component.spec.ts (不知道干嘛用的????)                               app.component.ts    typescript文件(功能模块)                                         app.modules.ts       根模块.配置文件,告诉angular如何组装应用程序(引导运行应用)

          assets: 静态资源文件夹

          environments:包含为各个目标环境准备的文件

          index.html :整个应用程序的根html

          main.ts:整个web程序的入口点,也是脚本程序的入口点,有点像main方法

          style.css:全局样式文件,作用范围是整个项目

          polyfills.ts:用于导入一些必要的库,可以使angular可以运行在老版本浏览器

           test.ts:用于单元测试的入口点

           tsconfig.app.json  tsconfig.spec.json : typescript编辑器的配置文件

          angula.json : angular命令行工具的配置文件,在这个文件中可以设置一系列的默认值,也可以配置项目编译时要包含的文件;例如第三方包

           package.json : 第三方依赖包的声明文件

    

    3、创建angular首页

     3.1、创建app文件夹,把创建项目生成的4个文件拖进来

        

修改app.module.ts文件中的引用路径

      

3.2 查看我的 hello World页面

启动项目服务 

$ ng serve --open

 

首页效果

 

 4、增加学生页面

  

 

student.component.ts

import { Component } from "@angular/core";import { Student } from "./student";@Component({ selector: "student-root", templateUrl: "./student.component.html",})export class StudentComponent { me:Student[]=[{ name:"admin", age:15, className:"一年级" }, { name:"testing", age:16, className:"二年级" }, { name:"martin", age:28, className:"三年级" } ]; public addStudentInfo(name:string,age:number,className:string){ const me=age/3; this.me.push({ name:name, age:age ,className:className }); } }student.ts

export class Student{ name:string; age:number; className:string; }

 student.component.html

<label *ngFor="let student of me"> <p>学生姓名:{{student.name}} 年纪:{{student.age}} 班级:{{student.className}} </p></label>学生姓名<input type="text" #studentName>年纪<input type="text" #age>班级<input type="text" #className><button (click)="addStudentInfo(studentName.value,age.value,className.value)">Add</button>

 首页修改app.component.html 

<!--The content below is only a placeholder and can be replaced.--><div style="text-align:center"> <h1> Welcome to {{ title }}! </h1> <student-root></student-root></div>

 

最后把student.component依赖注入Ngmodule中     

 

  效果

   

样式太丑了,引用bootstrap样式框架

5、安装bootstrap框架

npm i bootstrap -s

 

 

 

引用bootstrap样式

 

浏览效果

6、最后来点干货  源代码下载

 

文章评论

Top