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 相关文章推荐
10款非常有用的 Ajax 插件分享
Mar 14 Javascript
Extjs单独定义各组件的实例代码
Jun 25 Javascript
js实现禁止中文输入的方法
Jan 14 Javascript
使用RequireJS优化JavaScript引用代码的方法
Jul 01 Javascript
jQuery Validate初步体验(二)
Dec 12 Javascript
JS实现AES加密并与PHP互通的方法分析
Apr 19 Javascript
angularjs定时任务的设置与清除示例
Jun 02 Javascript
微信小程序 Buffer缓冲区的详解
Jul 06 Javascript
JS实现瀑布流布局
Oct 21 Javascript
浅析为什么a=&quot;abc&quot; 不等于 a=new String(&quot;abc&quot;)
Oct 25 Javascript
vue的安装及element组件的安装方法
Mar 09 Javascript
帮你提高开发效率的JavaScript20个技巧
Jun 18 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-perl哈希算法实现(times33哈希算法)
2013/12/30 PHP
神盾加密解密教程(三)PHP 神盾解密工具
2014/06/08 PHP
详解Yii2 之 生成 URL 的方法
2017/06/16 PHP
再谈javascript 动态添加样式规则 W3C校检
2009/12/25 Javascript
高性能WEB开发 flush让页面分块,逐步呈现 flush让页面分块,逐步呈现
2010/06/19 Javascript
jQuery Ajax提交表单查询获得数据实例代码
2012/09/19 Javascript
A标签触发onclick事件而不跳转的多种解决方法
2013/06/27 Javascript
点击表单提交时出现jQuery没有权限的解决方法
2014/07/23 Javascript
node.js中的buffer.length方法使用说明
2014/12/14 Javascript
javascript实现禁止复制网页内容
2014/12/16 Javascript
浅谈JavaScript的事件
2015/02/27 Javascript
js实现简单秒表走动的时钟特效
2020/03/25 Javascript
jQuery实现大转盘抽奖活动仿QQ音乐代码分享
2015/08/21 Javascript
jQuery-1.9.1源码分析系列(十)事件系统之事件体系结构
2015/11/19 Javascript
jquery对复选框(checkbox)的操作汇总
2016/01/13 Javascript
js中window.open的参数及注意注意事项
2016/07/06 Javascript
js实现上传图片预览方法
2016/10/25 Javascript
微信小程序scroll-view实现字幕滚动
2018/07/14 Javascript
Vue3.x源码调试的实现方法
2019/10/13 Javascript
Vue根据条件添加click事件的方式
2019/11/09 Javascript
JS实现前端路由功能示例【原生路由】
2020/05/29 Javascript
[02:43]DOTA2亚洲邀请赛场馆攻略——带你走进东方体育中心
2018/03/19 DOTA
Windows系统配置python脚本开机启动的3种方法分享
2015/03/10 Python
举例讲解Python的lambda语句声明匿名函数的用法
2016/07/01 Python
opencv与numpy的图像基本操作
2019/03/08 Python
用python写测试数据文件过程解析
2019/09/25 Python
Python操作Excel把数据分给sheet
2020/05/20 Python
Python如何使用正则表达式爬取京东商品信息
2020/06/01 Python
HTML5组件Canvas实现图像灰度化(步骤+实例效果)
2013/04/22 HTML / CSS
法国一家多品牌成衣精品中/高档商店:Graduate Store
2019/08/28 全球购物
Android面试题附答案
2014/12/08 面试题
家长高考寄语
2015/02/27 职场文书
校运会宣传稿大全
2015/07/23 职场文书
高性能跳频抗干扰宽带自组网电台
2022/02/18 无线电
Windows server 2012搭建FTP服务器
2022/04/29 Servers
Java存储没有重复元素的数组
2022/04/29 Java/Android