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 相关文章推荐
用JSON做数据传输格式中的一些问题总结
Dec 21 Javascript
jquery中的事件处理详细介绍
Jun 24 Javascript
Jquery对select的增、删、改、查操作
Feb 06 Javascript
JavaScript将一个数组插入到另一个数组的方法
Mar 19 Javascript
JS实现在状态栏显示打字效果完整实例
Nov 02 Javascript
在AngularJS框架中处理数据建模的方式解析
Mar 05 Javascript
微信小程序 检查接口状态实例详解
Jun 23 Javascript
vue vuex vue-rouert后台项目——权限路由(适合初学)
Dec 29 Javascript
纯 JS 实现放大缩小拖拽功能(完整代码)
Nov 25 Javascript
vue-property-decorator用法详解
Dec 12 Javascript
微信小程序实现watch监听
Jun 04 Javascript
微信小程序自定义胶囊样式
Dec 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
什么是短波收听SWL
2021/03/01 无线电
PHP中一些可以替代正则表达式函数的字符串操作函数
2014/11/17 PHP
PHP编程文件处理类SplFileObject和SplFileInfo用法实例分析
2017/07/22 PHP
laravel-admin 实现在指定的相册下添加照片
2019/10/21 PHP
JavaScript实际应用:innerHTMl和确认提示的使用
2006/06/22 Javascript
cnblogs TagCloud基于jquery的实现代码
2010/06/11 Javascript
js数组循环遍历数组内所有元素的方法
2014/01/18 Javascript
JQuery对表单元素的基本操作使用总结
2014/07/18 Javascript
JS实现自动定时切换的简洁网页选项卡效果
2015/10/13 Javascript
JS区分浏览器页面是刷新还是关闭
2016/04/17 Javascript
jQuery实现页面顶部下拉广告
2016/12/30 Javascript
JS实现图片高斯模糊切换效果的焦点图实例
2017/01/21 Javascript
Vue.js 中的 $watch使用方法
2017/05/25 Javascript
详解Angular系列之变化检测(Change Detection)
2018/02/26 Javascript
vue实现微信分享功能
2018/11/28 Javascript
详解jQuery中的getAll()和cleanData()
2019/04/15 jQuery
使用vue-router切换页面时,获取上一页url以及当前页面url的方法
2019/05/06 Javascript
微信小程序实现音乐播放页面布局
2020/12/11 Javascript
python访问类中docstring注释的实现方法
2015/05/04 Python
详细解析Python中的变量的数据类型
2015/05/13 Python
Python smallseg分词用法实例分析
2015/05/28 Python
Django model序列化为json的方法示例
2018/10/16 Python
启动Atom并运行python文件的步骤
2018/11/09 Python
django开发post接口简单案例,获取参数值的方法
2018/12/11 Python
python3实现多线程聊天室
2018/12/12 Python
python 将对象设置为可迭代的两种实现方法
2019/01/21 Python
Python闭包与装饰器原理及实例解析
2020/04/30 Python
python和php学习哪个更有发展
2020/06/17 Python
Python爬虫之Selenium设置元素等待的方法
2020/12/04 Python
运动会入场解说词300字
2014/01/25 职场文书
酒店保安员岗位职责
2014/01/31 职场文书
党风廉政建设责任书
2014/04/14 职场文书
政府绩效管理实施方案
2014/05/04 职场文书
2014广电局实施党的群众路线教育实践活动方案思想汇报
2014/09/22 职场文书
pytorch 如何把图像数据集进行划分成train,test和val
2021/05/31 Python
JavaScript利用html5新方法操作元素类名详解
2021/11/27 Javascript