zoukankan      html  css  js  c++  java
  • 零开始构建Angular项目

    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、最后来点干货  源代码下载

  • 相关阅读:
    shell80set变量
    shell79控制多进程的数量
    shell78管道
    sina sae开发中出现的问题
    html中代码高亮显示
    handlebars模板替换
    打印目录下所有的文件名(包含深层次目录)
    input为disabled提交后得不到该值的解决方法
    Global和Globals
    js算法运算
  • 原文地址:https://www.cnblogs.com/Martincheng/p/9956108.html
Copyright © 2011-2022 走看看