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 相关文章推荐
jQuery判断元素是否是隐藏的代码
Apr 24 Javascript
人人网javascript面试题 可以提前实现下
Jan 05 Javascript
javascript标签在页面中的位置探讨
Apr 11 Javascript
鼠标选择动态改变网页背景颜色的JS代码
Dec 10 Javascript
jQuery中closest()函数用法实例
Jan 07 Javascript
使用js画图之饼图
Jan 12 Javascript
HTML+CSS+JS实现完美兼容各大浏览器的TABLE固定列
Apr 26 Javascript
switch语句的妙用(必看篇)
Oct 03 Javascript
浅谈Angular.js中使用$watch监听模型变化
Jan 10 Javascript
浅谈jQuery中事情的动态绑定
Feb 12 Javascript
JS设计模式之状态模式概念与用法分析
Feb 05 Javascript
基于vue-cli 打包时抽离项目相关配置文件详解
Mar 07 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 正则表达式的学习探讨
2013/06/06 PHP
Laravel修改验证提示信息为中文的示例
2019/10/23 PHP
基于PHP实现用户在线状态检测
2020/11/10 PHP
User Scripts: Video Download by User Scripts
2007/05/14 Javascript
javascript 单选框,多选框美化代码
2008/08/01 Javascript
javascript 函数速查表
2010/02/07 Javascript
js查错流程归纳
2012/05/04 Javascript
jquery实现带二级菜单的导航示例
2014/04/28 Javascript
javascript动态创建链接的方法
2015/05/13 Javascript
在Mac OS下使用Node.js的简单教程
2015/06/24 Javascript
如何用jQuery实现ASP.NET GridView折叠伸展效果
2015/09/26 Javascript
再次谈论Javascript中的this
2016/06/23 Javascript
详解VueJs异步动态加载块
2017/03/09 Javascript
vue+element-ui+ajax实现一个表格的实例
2018/03/09 Javascript
JavaScript继承定义与用法实践分析
2018/05/28 Javascript
微信小程序 bindtap 传参的实例代码
2020/02/21 Javascript
[49:29]LGD vs Winstrike 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/18 DOTA
python中的sort方法使用详解
2014/07/25 Python
Python复制目录结构脚本代码分享
2015/03/06 Python
python根据日期返回星期几的方法
2015/07/06 Python
Python 安装setuptools和pip工具操作方法(必看)
2017/05/22 Python
Python实现通讯录功能
2018/02/22 Python
Python实现的微信好友数据分析功能示例
2018/06/21 Python
python 日志 logging模块详细解析
2020/03/31 Python
Python基于pip实现离线打包过程详解
2020/05/15 Python
pycharm 对代码做静态检查操作
2020/06/09 Python
电大自我鉴定范文
2013/10/01 职场文书
演讲稿怎么写才完美
2014/01/02 职场文书
学校卫生检查制度
2014/02/03 职场文书
收银出纳员岗位职责
2014/02/23 职场文书
房屋分割离婚协议书范本
2014/12/01 职场文书
综合素质评价自我评价
2015/03/06 职场文书
2015年世界环境日活动方案
2015/05/05 职场文书
纪检干部学习心得体会
2016/01/23 职场文书
Java 在生活中的 10 大应用
2021/11/02 Java/Android
Python自动化工具之实现Excel转Markdown表格
2022/04/08 Python