Angular通过angular-cli来搭建web前端项目的方法


Posted in Javascript onJuly 27, 2017

准备前提:已经搭建好angular-cli环境,还未搭建好的请参见https://3water.com/article/114254.htm

1 新建一个文件夹

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

Angular通过angular-cli来搭建web前端项目的方法

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

Angular通过angular-cli来搭建web前端项目的方法

3 创建新项目

ng new 项目名称

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

Angular通过angular-cli来搭建web前端项目的方法 

Angular通过angular-cli来搭建web前端项目的方法

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

Angular通过angular-cli来搭建web前端项目的方法

Angular通过angular-cli来搭建web前端项目的方法

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

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

Angular通过angular-cli来搭建web前端项目的方法

4.1 代码详解

Angular通过angular-cli来搭建web前端项目的方法

这就是一个html文件

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

5 运行应用

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

Angular通过angular-cli来搭建web前端项目的方法

5.2 启动HTTP服务器

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

ng server

Angular通过angular-cli来搭建web前端项目的方法

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

5.3 通过浏览器访问应用

http://localhost:4200/

Angular通过angular-cli来搭建web前端项目的方法

6 制作第一个组件

6.1 为什么要制作组件

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

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

6.2 怎么创建一个组件

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

ng generate component 组件名称

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

ng generate component hello-world

Angular通过angular-cli来搭建web前端项目的方法

注意:创建组件成功后在项目文件中的

src>app

目录下回多出一个以组件名称为名字的文件夹

Angular通过angular-cli来搭建web前端项目的方法

7 组件创建完的后续步骤

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

Angular通过angular-cli来搭建web前端项目的方法

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

7.2 组件定义代码详解

7.2.1 导入依赖

格式

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

Angular通过angular-cli来搭建web前端项目的方法

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

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

7.2.2 Component注解

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

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

例如

Angular通过angular-cli来搭建web前端项目的方法

代码解释

将HelloWorldComponent类装饰成了一个组件

@Component注解内容解释

selector

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

例如

Angular通过angular-cli来搭建web前端项目的方法

代码解释

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
利用cookie记住背景颜色示例代码
Nov 04 Javascript
JavaScript中具名函数的多种调用方式总结
Nov 08 Javascript
DOM基础教程之使用DOM设置文本框
Jan 20 Javascript
js控制div弹出层实现方法
May 11 Javascript
javascript实现九宫格相加数值相等
May 28 Javascript
不能不知道的10个angularjs英文学习网站
Mar 23 Javascript
使用JavaScript实现弹出层效果的简单实例
May 31 Javascript
简单实现bootstrap导航效果
Feb 07 Javascript
微信小程序中上传图片并进行压缩的实现代码
Aug 28 Javascript
vue使用recorder.js实现录音功能
Nov 22 Javascript
2019年度web前端面试题总结(主要为Vue面试题)
Jan 12 Javascript
js实现鼠标切换图片(无定时器)
Jan 27 Javascript
使用JavaScript开发跨平台的桌面应用详解
Jul 27 #Javascript
详解VueJS 数据驱动和依赖追踪分析
Jul 26 #Javascript
前端主流框架vue学习笔记第二篇
Jul 26 #Javascript
浅谈vue.js中v-for循环渲染
Jul 26 #Javascript
前端主流框架vue学习笔记第一篇
Jul 26 #Javascript
关于vue.js组件数据流的问题
Jul 26 #Javascript
Vue.js弹出模态框组件开发的示例代码
Jul 26 #Javascript
You might like
php生成html文件方法总结
2014/12/01 PHP
php 删除cookie方法详解
2014/12/01 PHP
php示例详解Constructor Prototype Pattern 原型模式
2015/10/15 PHP
thinkPHP5.0框架事务处理操作简单示例
2018/09/07 PHP
javascript 日期时间函数(经典+完善+实用)
2009/05/27 Javascript
js控制表单不能输入空格的小例子
2013/11/20 Javascript
jquery 实现input输入什么div图层显示什么
2014/06/15 Javascript
jquery滚动加载数据的方法
2015/03/09 Javascript
jQuery实现简单的点赞效果
2020/05/29 Javascript
jquery实现一个简单的表单验证实例
2016/03/30 Javascript
将input框中输入内容显示在相应的div中【三种方法可选】
2017/05/08 Javascript
使用prop解决一个checkbox选中后再次选中失效的问题
2017/07/05 Javascript
Vue filter介绍及其使用详解
2017/10/21 Javascript
vue移动UI框架滑动加载数据的方法
2018/03/12 Javascript
js使用ajax传值给后台,后台返回字符串处理方法
2018/08/08 Javascript
jQuery实现点击旋转,再点击恢复初始状态动画效果示例
2018/12/11 jQuery
Vue核心概念Action的总结
2019/01/18 Javascript
vue登录以及权限验证相关的实现
2019/10/25 Javascript
vue中监听路由参数的变化及方法
2019/12/06 Javascript
Vue双向绑定实现原理与方法详解
2020/05/07 Javascript
浅析Python中的getattr(),setattr(),delattr(),hasattr()
2016/06/14 Python
Python读取Json字典写入Excel表格的方法
2018/01/03 Python
Python基于mysql实现学生管理系统
2019/02/21 Python
python中append实例用法总结
2019/07/30 Python
matplotlib 多个图像共用一个colorbar的实现示例
2020/09/10 Python
python Matplotlib模块的使用
2020/09/16 Python
英国在线汽车和面包车零件商店:Car Parts 4 Less
2018/08/15 全球购物
安全生产先进个人材料
2014/02/06 职场文书
法制宣传实施方案
2014/03/13 职场文书
成语的广告词
2014/03/19 职场文书
大学生考试作弊检讨书1000字
2014/10/14 职场文书
2014年幼儿园教师工作总结
2014/11/08 职场文书
中秋客户感谢信
2015/01/22 职场文书
培养联系人考察意见
2015/06/01 职场文书
python单元测试之pytest的使用
2021/06/07 Python
Windows和Linux上部署Golang并运行程序
2022/04/22 Servers