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 相关文章推荐
JavaScript 调试器简介
Feb 21 Javascript
Jquery ajaxsubmit上传图片实现代码
Nov 04 Javascript
javascript初学者常用技巧
Sep 02 Javascript
推荐一个自己用的封装好的javascript插件
Jan 29 Javascript
javascript事件冒泡实例分析
May 13 Javascript
理解Javascript的动态语言特性
Jun 17 Javascript
JavaScript继承学习笔记【新手必看】
May 10 Javascript
vue.js实现备忘录功能的方法
Jul 10 Javascript
使用vue中的v-for遍历二维数组的方法
Mar 07 Javascript
Javascript 对象(object)合并操作实例分析
Jul 30 Javascript
JS实现水平遍历和嵌套递归操作示例
Aug 15 Javascript
详解小程序云开发攻略(解决最棘手的问题)
Sep 30 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
php5 图片验证码实现代码
2009/12/11 PHP
PHP操作xml代码
2010/06/17 PHP
关于zend studio 出现乱码问题的总结
2013/06/23 PHP
php仿QQ验证码的实例分析
2013/07/01 PHP
php快递单号查询接口使用示例
2014/05/05 PHP
php实现的redis缓存类定义与使用方法示例
2017/08/09 PHP
判断多个元素(RADIO,CHECKBOX等)是否被选择的原理说明
2009/02/18 Javascript
获取offsetTop和offsetLeft值的js代码(兼容)
2013/04/16 Javascript
Jquery模仿Baidu、Google搜索时自动补充搜索结果提示
2013/12/26 Javascript
jQuery实现鼠标划过修改样式的方法
2015/04/14 Javascript
nodejs学习笔记之路由
2017/03/27 NodeJs
js实现下拉框效果(select)
2017/03/28 Javascript
jQuery实现动画、消失、显现、渐出、渐入效果示例
2018/09/06 jQuery
layui时间控件选择时间范围的实现方法
2019/09/28 Javascript
解决layui批量传值到后台操作时出现传值为空的问题
2019/09/28 Javascript
[03:49]2016完美“圣”典风云人物:AMS专访
2016/12/06 DOTA
跟老齐学Python之一个免费的实验室
2014/09/14 Python
python使用socket进行简单网络连接的方法
2015/04/29 Python
对Python 2.7 pandas 中的read_excel详解
2018/05/04 Python
python编辑用户登入界面的实现代码
2018/07/16 Python
keras 自定义loss model.add_loss的使用详解
2020/06/22 Python
python实现磁盘日志清理的示例
2020/11/05 Python
IE滤镜与CSS3效果(详细整理分享)
2013/01/25 HTML / CSS
HTML5应用之文件上传
2016/12/30 HTML / CSS
中国综合性网上购物商城:当当(网上卖书起家)
2016/11/16 全球购物
为您搜罗全球潮流時尚品牌:HBX
2019/12/04 全球购物
如何利用XMLHTTP检测URL及探测服务器信息
2013/11/10 面试题
社区十八大感言
2014/01/19 职场文书
2014年廉洁自律承诺书
2014/05/26 职场文书
“四风”问题自我剖析材料思想汇报
2014/09/23 职场文书
人事任命通知书
2015/04/21 职场文书
贷款收入证明格式
2015/06/24 职场文书
实习感想范文
2015/08/10 职场文书
2016年秋季开学典礼新闻稿
2015/11/25 职场文书
中国梦党课学习心得体会
2016/01/05 职场文书
阿里云服务器部署RabbitMQ集群的详细教程
2022/06/01 Servers