Angular01 通过angular-cli来搭建web前端项目

准备前提:已经搭建好angular-cli环境,还未搭建好的请参见三少的博客(开发基础分类)

1 新建一个文件夹

  该文件夹用来存放所有利用angular-cli搭建的web前端项目

  

2 启动命令窗口,并进入该文件夹

  

3 创建新项目

  ng new 项目名称

    注意:项目名称最好全部用字母

  

  

  

  3.1 到文件夹中去查看项目是否成功创建

    

  

    

  

4 通过文本编辑器打开src文件夹下的index.xml文件

  三少使用sublime打开的效果如下

    

  4.1 代码详解

    

    这就是一个html文件

    我们的应用会在app-root标签处进行渲染,app-root元素中的Loading...是一个站位符,用来告知用户应用正在加载,也可以用文字或者动画来代替

5 运行应用

  5.1 打开命令窗口,并进入到项目根目录

    

  5.2 启动HTTP服务器

    angular-cli有一个内建的HTTP服务器,可以用它来启动我们的应用,启动的时间大概要花30秒左右

    ng server

      

        注意:利用 ctrl + c 来关闭服务

  5.3 通过浏览器访问应用

    http://localhost:4200/

      

6 制作第一个组件

  6.1 为什么要制作组件

    浏览器只能识别浏览器开发人员预先定义好的那些标签,如果我们想要浏览器识别一些新的标签,那么就需要我们制作一个组件来完成这个任务

    注意:组件化的基本思想就是教浏览器认识一些拥有自定义功能的新标签(组件就相当于angularJS中的指令),组件制作好后就可以在HTML文档中使用啦

  6.2 怎么创建一个组件

    利用angular-cli的generate命令来创建组件

      ng generate component 组件名称

      例如:创建一个<app-hello-world></app-hello-world>组件的命令是

          ng generate component hello-world

        

          注意:创建组件成功后在项目文件中的  src>app  目录下回多出一个以组件名称为名字的文件夹

            

7 组件创建完的后续步骤

  7.1 查看组件的定义:Component注解、组件定义类

    

      注意:组件是利用TypeScript语言编写的,所以后缀是以 .ts 结尾的;浏览器是不知道怎么解析TypeScript文件的,但是 ng server 这个命令会自动把ts文件转换成js文件

  7.2 组件定义代码详解

    7.2.1 导入依赖

      格式

        import {组件1,,组件2} from 模块名

      

        代码解释:从@angular/core模块中导入Component组件和OnInit组件

      import 语句定义了我们在编写代码是需要用到哪些模块中的哪些组件

    7.2.2 Component注解

      什么是注解:通过注解来给代码添加功能

      在类上使用@Component注解shi时,就会把相应的类装饰成一个Component

        例如

          

          代码解释

            将HelloWorldComponent类装饰成了一个组件

      @Component注解内容解释

        selector  指定该组件使用什么DOM元素

      例如

        

        代码解释

          该组件使用的DOM元素为<app-hello-world></app-hello-world>,即:在HTML中使用<app-hello-world></app-hello-world>标签后浏览器就可以识别啦

  

    

    

  

时间: 2024-10-13 00:37:08

Angular01 通过angular-cli来搭建web前端项目的相关文章

如何打造一个&quot;逼格&quot;的web前端项目

最近利用空余的时间(坐公交车看教程视频),重新了解了前后端分离,前端工程化等概念学习,思考如何打造一个"逼格"的web前端项目. 前端理论篇 前端代码规范:制定前端开发代码规范文档. PS:重中之中,为了下一步实现前端工程化. 编码风格有很多.团队代码规范一定要统一.便于维护web项目.     接口文档规范:制定RESTful架构接口规范文档. PS:果断使用用apiDoc构建API文档.美观好看,易于维护. 还用Word或者Excel写文档,太low了. 前后端分离:简单理解为前端

angular CLI 快速搭建angular 项目

1. 首先确保你的电脑上安装了Node.js®和npm 2.打开终端/或命令窗,安装全局 angular CLI npm install -g @angular/cli 3. 创建新项目 //运行下列命令来生成一个新项目以及应用的骨架代码: ng new project-name // 请耐心等待. 创建新项目需要花费很多时间,大多数时候都是在安装那些npm包. 4. 启动开发服务器 // 进入项目目录 cd my-app //启动服务 ng serve --open 5. 文件结构如下 src

搭建web前端开发环境

目录: 搭建Web开发环境 1.辅助工具——PS(切图.修图.测量) 2.开发.调试工具——常用开发工具和调试工具的功能介绍和使用方法 内容: 切图设计稿(.pdf文件) ———————————— 产出物(如.png .jpg文件)                          素材切出        为什么切图?                给网页提供图片素材                HTML:img    <img src="images/avatar.jpg"

vue-cli3 搭建的前端项目基础模板

基于 vue-cli3 搭建的前端模板,fork 或 clone 本仓库,即可搭建完成一个新项目的基础模板,源码地址,欢迎 star 或 fork 特性 CSS 预编译语言:less Ajax: axios,做了一定的封装,详见 src/services/request.js SVG 雪碧图:采用 webpack 插件 svg-sprite-loader,及 svg 精简压缩工具 svgo 移动 web 的适配方案:引入了 postcss-pxtorem 及 lib-flexible,可以自由地

angular学习笔记---通过angular/cli建一个新的项目

理一下基于angular/cli建立新项目的思路: (1)安装nodejs (2)安装git (3)安装淘宝镜像cnpm (4)安装@angular/cli,在管理员模式下运行:cnpm install -g @angular/cli (5)测试@angular/cl是否安装成功,运行:ng (6)选择一个目标文件夹,进入该文件夹,如首先进入e盘:e:     ,其次进入e盘下的test文件夹:cd test   ,再在该文件夹下建立一个项目:ng new project 此时,项目建好之后会自

记录第一个web前端项目

大二上学期闲着没事儿干,便去了之前教我java的老师的项目组,去了之后才知道是做一个web前端的项目,但我对于这方面可以说完全是一个小白,但是老师催得也紧,简单学了学html,css,javascript跟vue,elementui便开始干活了. 在这个项目里,我的任务也挺简单的,就是画个几个设备管理界面.这里我就举一个界面的例子吧. <!--模板--> <template> <el-card class="box-card"> <div sl

如何实现vue-cli搭建的前端项目的自动打包

实现vue-cli + webpack +vue项目的自动打包: 后台java代码: public class OpenDirectory { public static void main(String[] args) throws IOException { String url = "F:\\Aomsc\\";        Runtime.getRuntime().exec("cmd /c start "+url+"a.bat");//通

Java学习01-使用maven插件tomcat搭建web maven项目

我使用社区版的IDEA,社区版的没有tomcat插件,只能使用maven插件进行tomcat的使用了,下面进入正题 一.pom.xml配置tomcat插件 <build> <finalName>JavaDemo</finalName> <plugins> <plugin> <groupId>org.apache.tomcat.maven</groupId> <artifactId>tomcat7-maven-p

.Net Core3.1下使用Swagger搭建web api项目

前言:微软于前天发布.net core 3.1正式版,并将长期支持3.1.所以我听到这个消息后就急忙下载.net core 3.1的SDK和Runtime,应该是公司最先用3.1的攻城狮了??. OK!废话少说,今天的目的是基于.net core 3.1建一个web api的项目 先下载.net core 3.1的SDK(开发.net core项目时会用到)和Runtime(用来运行.net core的应用程序) 地址:https://dotnet.microsoft.com/download/