Angular通过angular-cli来搭建web前端项目的方法

准备前提：已经搭建好angular-cli环境，还未搭建好的请参见http://www.jb51.net/article/114254.htm

1 新建一个文件夹

该文件夹用来存放所有利用angular-cli搭建的web前端项目

2 启动命令窗口，并进入该文件夹

3 创建新项目

ng new 项目名称

注意：项目名称最好全部用字母

　

3.1 到文件夹中去查看项目是否成功创建

4 通过文本编辑器打开src文件夹下的index.xml文件

三少使用sublime打开的效果如下

4.1 代码详解

这就是一个html文件

我们的应用会在app-root标签处进行渲染，app-root元素中的Loading...是一个站位符，用来告知用户应用正在加载，也可以用文字或者动画来代替

5 运行应用

5.1 打开命令窗口，并进入到项目根目录

5.2 启动HTTP服务器

angular-cli有一个内建的HTTP服务器，可以用它来启动我们的应用，启动的时间大概要花30秒左右

ng server

注意：利用 ctrl + c 来关闭服务

5.3 通过浏览器访问应用

http://localhost:4200/

6 制作第一个组件

6.1 为什么要制作组件

浏览器只能识别浏览器开发人员预先定义好的那些标签，如果我们想要浏览器识别一些新的标签，那么就需要我们制作一个组件来完成这个任务

注意：组件化的基本思想就是教浏览器认识一些拥有自定义功能的新标签（组件就相当于angularJS中的指令），组件制作好后就可以在HTML文档中使用啦

6.2 怎么创建一个组件

利用angular-cli的generate命令来创建组件

ng generate component 组件名称

例如：创建一个<app-hello-world></app-hello-world>组件的命令是

ng generate component hello-world

注意：创建组件成功后在项目文件中的　　src>app　　目录下回多出一个以组件名称为名字的文件夹

7 组件创建完的后续步骤

7.1 查看组件的定义：Component注解、组件定义类

注意：组件是利用TypeScript语言编写的，所以后缀是以 .ts 结尾的；浏览器是不知道怎么解析TypeScript文件的，但是 ng server 这个命令会自动把ts文件转换成js文件

7.2 组件定义代码详解

7.2.1 导入依赖

格式

import {组件1,，组件2} from 模块名

代码解释：从@angular/core模块中导入Component组件和OnInit组件

import 语句定义了我们在编写代码是需要用到哪些模块中的哪些组件

7.2.2 Component注解

什么是注解：通过注解来给代码添加功能

在类上使用@Component注解shi时，就会把相应的类装饰成一个Component

例如

代码解释

将HelloWorldComponent类装饰成了一个组件

@Component注解内容解释

selector　　指定该组件使用什么DOM元素

例如

代码解释

该组件使用的DOM元素为<app-hello-world></app-hello-world>，即：在HTML中使用<app-hello-world></app-hello-world>标签后浏览器就可以识别啦

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 详解Angular-Cli中引用第三方库

    最近在学习angular(AngularJS 2),根据教程使用angular-cli新建项目,然而在添加JQuery和Bootstrap第三方库时遇到了问题... 初试 我最初的想法是直接将相对路径写到index.html即可,如下: <link rel="stylesheet" href="../node_modules/bootstrap/dist/css/bootstrap.min.css" rel="external nofollow&qu

  • Angular2安装angular-cli

    Angular2安装angular-cli

    最近在学习angular2,并尝试用这个框架来做公司的一个新项目. 终于要开始开发了,等了1个多月. 因为第一次用这个新框架做项目,不太熟悉,就找了angular-cli这个脚手架来搭建项目. 安装了好多次,看了好多博文,终于成功了. 依据本宝宝帮多位小伙伴安装成功的经验,现总结安装angular-cli过程如下: 1.设置淘宝镜像,在 .npmrc文件(该文件在C盘>用户(或user)>你的电脑名字下就可找到)加入下面一句: registry = https://registry.npm.t

  • 详解基于angular-cli配置代理解决跨域请求问题

    详解基于angular-cli配置代理解决跨域请求问题

    1.跨域请求产生 随着不同终端(Pad/Mobile/PC)的兴起,对开发人员的要求越来越高,纯浏览器端的响应式已经不能满足用户体验的高要求,我们往往需要针对不同的终端开发定制的版本.为了提升开发效率,前后端分离的需求越来越被重视,后端负责业务/数据接口,前端负责展现/交互逻辑,同一份数据接口,我们可以定制开发多个版本. 而前后端分离带来的一个问题就是前端web部署的服务器和后端提供服务的服务器大概率不在同一个域名下,进而会产生跨域问题. 2.通用解决方案 如果浏览器支持HTML5,那么就可以一

  • Angular2使用Angular-CLI快速搭建工程（二）

    Angular2使用Angular-CLI快速搭建工程（二）

    使用iconfont iconfont是阿里巴巴的icon项目,阿里巴巴使用,也公开对外使用,现在一些公司都使用了,它有CDN,访问快,用起来也很方便,这章节讲下如何使用iconfont:(当然,本质上就是引用一个icon的font文件,无论用bootstrap的还是自己做的,都是一样的,希望读者触类旁通) iconfont上创建工程 具体怎么做已经超出本文范围:有兴趣的可以自己学习: 我们选择一个做实验 最终写出一个css文件,在styles.css中 安装@angular2-material

  • 简单谈谈关于Angular Cli打包的事

    本文主要给大家介绍了关于Angular Cli打包的事,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍吧. 一.引言 Angular从开发再到生产环境部署都离不开Angular Cli工具集,而Angular Cli本质上是使用 Webpack(当前使用版本为2) 来打包资源. Webpack 本身并不复杂,略用过一点都清楚,只需要创建一个 webpack.config.js 的文件并简单的配置,就可以把一个复杂的应用所有文件全部打包成若干静态资源文件. 然而一个复杂的应用免不了使

  • Angular通过angular-cli来搭建web前端项目的方法

    Angular通过angular-cli来搭建web前端项目的方法

    准备前提:已经搭建好angular-cli环境,还未搭建好的请参见http://www.jb51.net/article/114254.htm 1 新建一个文件夹 该文件夹用来存放所有利用angular-cli搭建的web前端项目 2 启动命令窗口,并进入该文件夹 3 创建新项目 ng new 项目名称 注意:项目名称最好全部用字母 3.1 到文件夹中去查看项目是否成功创建 4 通过文本编辑器打开src文件夹下的index.xml文件 三少使用sublime打开的效果如下 4.1 代码详解 这就

  • Docker搭建部署Node项目的方法步骤

    目录 什么是Docker 客户端Docker Docker基本操作 镜像名称 拉取镜像 其他操作 Dockerfile Docker-compose 构建nginx-node-postgres项目 前段时间做了个node全栈项目,服务端技术栈是 nginx + koa + postgresql.其中在centos上搭建环境和部署都挺费周折,部署测试服务器,接着上线的时候又部署生产环境服务器.这中间就有很多既无聊又费精力,吃力不讨好的"体力活".所以就开始思考怎么自动化这部分搭建部署的工

  • 利用docker搭建web服务环境的方法步骤

    前言 做过开发的人对开发环境的安装.配置应该都不会太陌生,不管你做什么开发,对开发环境都会具有一定的依赖性的.对于 PHP 的 Web 开发来说,开发环境至少要有一个 Web 服务器(如 Apache.Nginx).一个数据库服务器(如 MySQL)和一个 PHP 解析器吧,如果你的 PHP 代码使用的一些扩展,那你还需要给你的 PHP 安装上这些扩展,那样你的 PHP 代码才能够顺利地跑起来.对于一个只想静静地敲代码的开发人员来说,开发环境的安装与配置这种事情,只要经历一次就已经很折腾人了.可

  • CentOS6使用nginx搭建web网站服务的方法

    利用CentOS6搭建简易的web服务 提示: 其中没有涉及到MySQl.MongoDB的安装和使用,包括docker容器等,使用nginx反向代理静态服务 centOS服务器 可以选用国外或者国内的服务器,这里只展示centOS系统配置,本人实在window系统下完成下列操作 选购一台合适的云服务器,系统为centOS 在window系统下安装xshell和xftp, 保证可以系统访问centOS系统 使用xshell连接上云服务器,使用超级管理员root登录 登录完成之后安装nginx 下面

  • nginx部署多前端项目的几种方法

    nginx部署多前端项目的几种方法

    个人总结了3种方法来实现在一台服务器上使用nginx部署多个前端项目的方法. 基于域名配置 基于端口配置 基于location配置 在正式开始之前,我们先来看一下nginx安装的默认配置文件: /etc/nginx/nginx.conf 文件 可以看到图中的:include /usr/nginx/modules/*.conf,这句话的作用就是可以在nginx启动加载所有 /usr/nginx/modules/ 目录下的 *.conf 文件. 所以,平时我们为了方便管理,可以在此目录下面定义自己的

  • Angular2使用Angular CLI快速搭建工程（一）

    Angular2使用Angular CLI快速搭建工程（一）

    前言: 本文适合Angular2的初学者阅读: 时下web前端发展迅猛,新框架层出不穷,大家都知道三驾马车VueJS,Angular2,React.国内VueJS非常热门,百度热点趋势以1000%的涨幅在增加.Angular2在国外非常受欢迎,在国内的粉丝还非常少,文章不多,究其原因有这么几点主要是学习曲线陡峭,上手困难,(1)angular本身概念难懂,(2)使用typescript开发,用到很多es6特性:(3)配置太多,复杂,工程架构搭建上手难度大.本文为了解决项目搭建的问题,详细的一步步

  • @angular前端项目代码优化之构建Api Tree的方法

    @angular前端项目代码优化之构建Api Tree的方法

    前颜(yan) 在前端项目的开发过程中,往往后端会给到一份数据接口(本文简称api),为了减少后期的维护以及出错成本,我的考虑是希望能够找到这么一种方法,可以将所有的api以某种方式统一的管理起来,并且很方便的进行维护,比如当后端修改了api名,我可以很快的定位到该api进行修改,或者当后端添加了新的api,我可以很快的知道具体是一个api写漏了. 于是,我有了构建Api Tree的想法. 一.前后端分离(Resful api) 在前后端分离的开发模式中,前后端的交互点主要在于各个数据接口,也就

  • angular.js + require.js构建模块化单页面应用的方法步骤

    angular.js + require.js构建模块化单页面应用的方法步骤

    前言 本文主要给大家介绍的是关于利用angular.js + require.js构建模块化单页面应用的方法,分享出来供大家参考学习,需要的朋友们下面来一起看看详细的介绍吧. AngularJS描述: angularjs是可以用来构建WEB应用的,WEB应用中的一种端对端的完整解决方案.通过开发者呈现一个更高层次的抽象来简化应用的开发.最适合的就是用它来构建一个CRUD应用,它提供了非常方便的且统一高效的解决方案,其数据绑定.基本模版标识符.表单验证.路由.深度链接.组件重用.依赖注入.以及HT

  • Vue CLI 3搭建vue+vuex最全分析(推荐)

    一.介绍 Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统.有三个组件: CLI:@vue/cli 全局安装的 npm 包,提供了终端里的vue命令(如:vue create .vue serve .vue ui 等命令) CLI 服务:@vue/cli-service是一个开发环境依赖.构建于 webpack和 webpack-dev-server之上(提供 如:serve.build 和 inspect 命令) CLI 插件:给Vue 项目提供可选功能的 npm 包 (如:

  • node使用Koa2搭建web项目的方法

    node使用Koa2搭建web项目的方法

    随着Node.js的日益火热,各种框架开始层出不穷的涌现出来,Node.js也开始逐渐的被应用到处理服务端请求的场景中.搭建Web项目的框架也随之开始出现--express.koa.koa2.egg等,当然要了解其好坏还是要自己去啃源码的.本文将不会涉及到源码,只是带领初学者简单了解下Koa2的基本使用,欢迎大家在评论中互相交流学习. 注意:koa2使用了ES7的语法,所以使用时请升级Node版本到最新.了解更详细的源码信息可以到git上的koajs/koa去了解 1. 项目目录结构 2. 代码

随机推荐