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 相关文章推荐
csdn 批量接受好友邀请
Feb 19 Javascript
JAVASCRIPT  THIS详解 面向对象
Mar 25 Javascript
JavaScript 面向对象编程(2) 定义类
May 18 Javascript
查看大图功能代码jquery版
Nov 05 Javascript
javascript回车完美实现tab切换功能
Mar 13 Javascript
javascript从定义到执行 你不知道的那些事
Jan 04 Javascript
Vuejs第十二篇之动态组件全面解析
Sep 09 Javascript
JavaScript中${pageContext.request.contextPath}取值问题及解决方案
Dec 08 Javascript
将 vue 生成的 js 上传到七牛的实例
Jul 28 Javascript
vue实现仿淘宝结账页面实例代码
Nov 08 Javascript
用ES6写全屏滚动插件的示例代码
May 02 Javascript
解决百度Echarts图表坐标轴越界的方法
Oct 17 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 echo 输出字符串函数详解
2010/05/13 PHP
使用php测试硬盘写入速度示例
2014/01/27 PHP
在Linux系统下一键重新安装WordPress的脚本示例
2015/06/30 PHP
PHP is_array() 检测变量是否是数组的实现方法
2016/06/13 PHP
php+Ajax处理xml与json格式数据的方法示例
2019/03/04 PHP
PHP实现简单的协程任务调度demo示例
2020/02/01 PHP
js substr、substring和slice使用说明小记
2011/09/15 Javascript
JavaScript版DateAdd和DateDiff函数代码
2012/03/01 Javascript
删除javascript中注释语句的正则表达式
2014/06/11 Javascript
jquery获取文档高度和窗口高度汇总
2016/01/25 Javascript
jQuery Easy UI中根据第一个下拉框选中的值设置第二个下拉框是否可以编辑
2016/11/29 Javascript
js实现适配不同的屏幕大小
2017/04/10 Javascript
加载 vue 远程代码的组件实例详解
2017/11/20 Javascript
vue-router命名路由和编程式路由传参讲解
2019/01/19 Javascript
JavaScript实现简单的弹窗效果
2020/05/19 Javascript
解决removeEventListener 无法清除监听的问题
2020/10/30 Javascript
[01:25]DOTA2自定义游戏灵园鬼域等你踏足
2015/10/30 DOTA
在Python中操作文件之read()方法的使用教程
2015/05/24 Python
Python多线程、异步+多进程爬虫实现代码
2016/02/17 Python
Python利用multiprocessing实现最简单的分布式作业调度系统实例
2017/11/14 Python
Python----数据预处理代码实例
2019/03/20 Python
Python类中方法getitem和getattr详解
2019/08/30 Python
使用jupyter Nodebook查看函数或方法的参数以及使用情况
2020/04/14 Python
OpenCV+python实现实时目标检测功能
2020/06/24 Python
Selenium执行完毕未关闭chromedriver/geckodriver进程的解决办法(java版+python版)
2020/12/07 Python
德国家用电器购物网站:Premiumshop24
2019/08/22 全球购物
德国家具折扣店:POCO
2020/02/28 全球购物
使用C#编写创建一个线程的代码
2013/01/22 面试题
泸县召开党的群众路线教育实践活动总结大会新闻稿
2014/10/21 职场文书
在职人员跳槽求职信
2015/03/20 职场文书
2015年数学教研组工作总结
2015/05/23 职场文书
2015年电信员工工作总结
2015/05/26 职场文书
回门宴新娘答谢词
2015/09/29 职场文书
2019奶茶店创业计划书范本,值得你借鉴
2019/08/14 职场文书
SQL优化老出错,那是你没弄明白MySQL解释计划用法
2021/11/27 MySQL
macos系统如何实现微信双开? mac登录两个微信以上微信的技巧
2022/07/23 数码科技