Angular2入门(一)
原先用vue.js写的项目,最近领导要求改用Angular,于是开始自学之路。网上搜索了众多资料,包括谷歌原版书籍,但是Angular自从17年开始分为AngularJs和Angular两个版本,相差巨大,并且Angular已从2.0更新到6.0,网上资料庞杂且年代久远,不得要领。
花费了大量寻找资料的时间之后,终于摸索到了正确路线,在此记录学习历程。
此处不会详细介绍Angular的细节,只提供快速创建能运行Angular项目的教程。
需要理解细节可以到以下链接下载相关书籍学习:
揭秘Angular2 : https://download.csdn.net/download/qq_36625806/10472981
迈向Angular2 : https://download.csdn.net/download/qq_36625806/10472982
1.配置开发环境
操作系统:win7
开发平台:node.js v8版本以上
Angular版本:6.0
node.js下载地址:https://nodejs.org/en/
安装完node之后,打开windows命令窗口,输入下面的命令确认安装成功:
-->> node -v
安装Angular命令行工具:Angular CLI :
-->> npm install -g @angular/cli
在命令行输入 ng -v 确认Angular CLI 安装成功。安装成功会有一个Logo展示。
2.创建Angular项目:
-->> ng new student (student 是项目名称)
3.如何启动Angular的项目?
进入student项目,在命令行输入以下命令:
-->> npm start
当命令执行完毕,打开浏览器,输入:
localhost:4200 即可!(如果你没有手工修改端口的话)
3.如何在已有的项目引入其它插件?
进入student项目,在命令行输入以下命令:
-->> npm install bootstrap --save
找到项目的根目录找到angular.json,如下图填写:
4.如何自动创建自己的组件?
这个问题需要你试一下手工创建组件的痛苦,然后你就知道自动创建组件有多爽了!
以下直接说自动创建组件的用法:
自动创建页面的导航栏:
Angular2入门(一)的更多相关文章
- Angular2入门系列教程7-HTTP(一)-使用Angular2自带的http进行网络请求
上一篇:Angular2入门系列教程6-路由(二)-使用多层级路由并在在路由中传递复杂参数 感觉这篇不是很好写,因为涉及到网络请求,如果采用真实的网络请求,这个例子大家拿到手估计还要自己写一个web ...
- Angular2入门系列教程6-路由(二)-使用多层级路由并在在路由中传递复杂参数
上一篇:Angular2入门系列教程5-路由(一)-使用简单的路由并在在路由中传递参数 之前介绍了简单的路由以及传参,这篇文章我们将要学习复杂一些的路由以及传递其他附加参数.一个好的路由系统可以使我们 ...
- Angular2入门系列教程5-路由(一)-使用简单的路由并在在路由中传递参数
上一篇:Angular2入门系列教程-服务 上一篇文章我们将Angular2的数据服务分离出来,学习了Angular2的依赖注入,这篇文章我们将要学习Angualr2的路由 为了编写样式方便,我们这篇 ...
- Angular2入门系列教程4-服务
上一篇文章 Angular2入门系列教程-多个组件,主从关系 在编程中,我们通常会将数据提供单独分离出来,以免在编写程序的过程中反复复制粘贴数据请求的代码 Angular2中提供了依赖注入的概念,使得 ...
- Angular2入门系列(五)———— 路由参数设置
Angular2入门系列(五)---- 路由参数设置路由配置: { path: '', component: CarProFile, children: [ { path: 'add', compon ...
- Angular2 入门
1. 说明 该文档为Angular2的入门文档,可以根据该文档的内如做出一个“helloworld”类型的Angualr2入门程序,通过该文档可以初步了解Angular2的相关知识以及开发流程,同时搭 ...
- Angular2 入门详解
AngularJS 2 快速入门 npm是什么? npm其实是Node.js Package Manager的简称,是Node.js包管理工具(package manager) 安装Node.js ...
- Angular2入门系列教程3-多个组件,主从关系
上一篇 Angular2项目初体验-编写自己的第一个组件 好了,前面简单介绍了Angular2的基本开发,并且写了一个非常简单的组件,这篇文章我们将要学会编写多个组件并且有主从关系 现在,假设我们要做 ...
- Angular2入门系列教程2-项目初体验-编写自己的第一个组件
上一篇 使用Angular-cli搭建Angular2开发环境 Angular2采用组件的编写模式,或者说,Angular2必须使用组件编写,没有组件,你甚至不能将Angular2项目启动起来 紧接着 ...
- Angular2入门系列教程1-使用Angular-cli搭建Angular2开发环境
一直在学Angular2,百忙之中抽点时间来写个简单的教程. 2016年是前端飞速发展的一年,前端越来越形成了(web component)组件化的编程模式:以前Jquery通吃一切的田园时代一去不复 ...
随机推荐
- 【转载】Scrapy安装及demo测试笔记
Scrapy安装及demo测试笔记 原创 2016年09月01日 16:34:00 标签: scrapy / python Scrapy安装及demo测试笔记 一.环境搭建 1. 安装scrapy ...
- 我们为什么不愿意相信AI?
人工智能--即AI已经变得越来越聪明,甚至能够预测未来.比如警察可以用AI来提前预判出犯罪的时间或地点,医生可以用AI预测病人最有可能心脏病发作或是中风.甚至研究人员还试图为AI添加上更多的想象力,因 ...
- Proto3:编码
本文介绍protocol buffer消息二进制传输格式.在应用程序中使用protocol buffer时,你并不需要了解这些,但它对你了解protocol buffer格式如何影响你的编码消息的大小 ...
- web端手机方向传感器闲谈
因为工作需要,这段时间接触的手机传感器比较多.总体来说,市场上的传感器表现参差不齐.IPhone在传感器表现方面卓越,而安卓由于什么机型都有,则显得差强人意. 首先还是说说怎么在web端调用手机传感器 ...
- Html学习笔记(二) 简单标签
标签的重点 标签的用途 标签在浏览器中的默认样式 <body>标签: 在网页上显示的内容 <p>标签: 添加段落 <hx>标签: 添加标题 标签一共有6个,h1.h ...
- YiGo环境搭建
软件环境 操作系统:Windows 2000+,Mac OS,AIX,RedHat linux,HP-UX等 JDK/JRE:Oracle JDK/JRE 1.8+,IBM J9 VM 1.8+,Op ...
- 一些大厂的css reset 代码
不同的浏览器对标签的默认值不同,为了避免页面出现浏览器差异,所以要初始化样式表属性.使用通配符*并不可取,因为会遍历到每一个标签,大型网页会加载过慢,影响性能. 雅虎工程师提供的CSS初始化示例代码: ...
- FC及BFC
1.什么是FC 2.BFC块级格式化上下文(Block formatting context) Box 是 CSS 布局的对象和基本单位, 直观点来说,就是一个页面是由很多个 Box 组成的.元素的类 ...
- vue中的自定义分页插件组件
介绍一下,已经有很多的vue分页的组件了,大家都是大同小易,那么我就结合自身的使用,写出了一片文章 首先在新建一个分页模块 在模块中引入相应的代码,(内有详细的注释) template中 <di ...
- 网站开发---js与java实现的一些小功能
记录一下网站开发过程中的一些小功能 1.js获取当前年份: <span>Copyright © 2017-<script>document.write( new Date(). ...