angular学习之从零搭建一个angular4.0项目

话说现在angular更新迭代太快了,从前几年用angular版本去搭建项目时还是1.x版本,到现在都已经是angular4.0了(直接跳过了3.0),由于公司要求用到angular4.0,所以就不能只是了解一下了,谁让我那么热爱学习了(咳咳!此处有一个推眼镜的动作),废话不多说,直接上手,首先用到的工具会有angular4.0、angular-cli、npm(v3.10.8)、node(v6.2.0)

上述node和npm包管理器版本是我本机的版本号,这个版本不要太低应该都没问题

angular脚手架各版本

node和npm版本

接着,新建一个文件夹,随便命名,我这里就起了一个angular4.0-demo,然后就可以愉快的安装所需要的工具了。

第一步

安装全局的angular-cli, npm install -g @angular/cli

第二步

查看各插件是否已经安装,ng -v会出来一堆东西,如第一个图所示!

第三步

生成项目 代码为:ng new 项目名称


第四步

现在已经创建完成了,cd进入项目,会看到一些这样的东西,说明已经创建完成了,接下来就是执行项目就可以了,跟vue2.0一样,此时执行用到的代码为:ng serve --open(和vue的npm run dev效果是一样,自动监听修改内容),这一点也是不同于angularjs(官方称1.x为angularjs,过了2.0就直接称为angular)

最后执行完之后就会弹出来一个页面,就是要生成的页面了

生成的页面

好了,那么基本的搭建已经完成了,去试试吧!

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

(0)

相关推荐

  • Angular 4中如何显示内容的CSS样式示例代码

    前言 在开始本文的正文之前,我们先来看一下angular2中将带标签的文本输出在页面上的相关内容,为了系统性的防范XSS问题,Angular默认把所有值都当做不可信任的. 当值从模板中以属性(Property).DOM元素属性(Attribte).CSS类绑定或插值表达式等途径插入到DOM中的时候, Angular将对这些值进行无害化处理(Sanitize),对不可信的值进行编码. h3>Binding innerHTML</h3> <p>Bound value:</p

  • Web前端框架Angular4.0.0 正式版发布

    前言 angular4.0.0正式版现在可以使用了.这是自我们宣布angular改版后,首次发布的专业版本.它向下兼容,支持所有使用了angular2.x.x版本的应用程序. 我们很高兴和大家分享这个版本,它包括最近的3个月中我们做的功能上的主要改进.我们努力让开发者们能够很容易的接受angular4.0.0. 新版本的特性 •更轻量化.更快 在这个新版本上,我们履行了我们的承诺,我们做到了让Angular的程序变的更轻量化,更快.但是我们还没有完全的优化完,在接下来的日子中,你会看到我们将着重

  • Angular4 中内置指令的基本用法

    前言 大家都知道ng内置了许多自定义的指令,这避免了我们自己去造轮子.同时,ng也提供了自定义指令的功能,可以让我们的页面元素标签更加实例化. 在这篇文章中,我们将分别列举每一个内置指令的用法,并提供一个例子作为演示.尽量用最少最简单的描述,让你在更快更准确地学会每一种内置指令的基本用法. ngFor 作用:像 for 循环一样,可以重复的从数组中取值并显示出来. 例子: // .ts this.userInfo = ['张三', '李四', '王五']; // .html <div class

  • Angular4学习笔记之新建项目的方法

    Angular4我自己还在摸索学习中,这个系列中的笔记会不定期修改和更新-- 一.安装nodejs(下面方式 二选一,个人推荐第二种) 1.nodejs官网下载安装 2.使用nvm安装管理(具体方式参照我的另一篇) 二.全局安装angular-cli npm install -g @angular/cli 三.进入一个存放项目的文件夹,运行以下代码,初始化项目 ng new <项目名> 四.启动项目 cd <项目名> npm install ng serve 附: 1.引入jQue

  • Angular4 中常用的指令入门总结

    前言 本文主要给大家介绍了关于Angular4 常用指令的相关内容,分享出来供大家参考学习,下面来一起看看详细的介绍: NgIf <div *ngIf="false"></div> <!-- never displayed --> <div *ngIf="a > b"></div> <!-- displayed if a is more than b --> <div *ngIf=&

  • Angular2平滑升级到Angular4的步骤详解

    前言 Angular4终于在两天前发布了正式版本,那么怎么升级呢?其实Angular2和Angular4之间属于平滑过渡,并不像1和2之间颠覆性的重写代码. Angular4现已发布  http://www.jb51.net/article/109685.htm 为什么跳过Angular 3? 根据Angular团队首席开发Igor Minar的说法:随着Angular 2的发布,Angular团队引入了语义化版本控制规范,即:将语义化版本用三组数字来表示,按照major.minor.patch

  • angular学习之从零搭建一个angular4.0项目

    话说现在angular更新迭代太快了,从前几年用angular版本去搭建项目时还是1.x版本,到现在都已经是angular4.0了(直接跳过了3.0),由于公司要求用到angular4.0,所以就不能只是了解一下了,谁让我那么热爱学习了(咳咳!此处有一个推眼镜的动作),废话不多说,直接上手,首先用到的工具会有angular4.0.angular-cli.npm(v3.10.8).node(v6.2.0) 上述node和npm包管理器版本是我本机的版本号,这个版本不要太低应该都没问题 angula

  • 带你一步步从零搭建一个Vue项目

    目录 一.项目创建 1.打开命令行窗口Cd /d进入想要创建项目的位置,输入vue create 项目名 2.选择Vue2 3.运行该项目 4.创建成功 二.路由的配置 1.安装路由(vue2 只能安装3版本的vue-router) 2.配置路由 三.API接口配置 1.安装axios 2.axios的二次封装 3.跨域问题 四.Vuex 总结 一.项目创建 1.打开命令行窗口Cd /d进入想要创建项目的位置,输入vue create 项目名 2.选择Vue2 3.运行该项目 4.创建成功 在浏

  • 从零搭建一个vite+vue3+ts规范基础项目(搭建过程问题小结)

    目录 项目初始化 安装router和pinia 安装ESlint eslint的vue规则需要切换 安装prettier 安装stylelint 安装husky 安装commitlint 总结 参考: 最近时间总算是闲了下来,准备着手搭建一个基础模板,为后面新项目准备的,搭建过程中遇到不少问题,现在总结下来给大家使用. 项目初始化 本项目已vite开始,所以按照vite官方的命令开始.这里使用的命令行的方式来搭建基础项目: yarn create vite my-vue-app --templa

  • SpringCloud如何搭建一个多模块项目

    在spring cloud系列章节中,本来已经写了几个章节了,但是自己看起来有些东西写得比较杂,所以重构了一下springcloud的章节内容,新写了本章节,先教大家在工作中如何搭建一个多模块的springcloud项目. 本章及后面章节,我们使用的开发环境是 spring tool suite (sts) + maven (当然你也可以使用IDEA + Gradle,目前使用的公司也很多). 一.新建一个父maven project模块 File->new->other->maven-

  • 从零开始用webpack构建一个vue3.0项目工程的实现

    前言 入门级别教程,适用于初级工程师 移动端 单页面  Demo 正文 第一步 找一个你认为合适的磁盘.输入mkdir test, cd test , npm init -y. 第二步 安装依赖 webpack 系列依赖 webpack webpack-cli babel 系列依赖 @babel/core @babel/preset-env 移动兼容方案 amfe-flexible autoprefixer axios axios webpack loader babel-loader css-

  • 使用idea搭建一个spring mvc项目的图文教程

    最近在学习spring的相关知识,顺便记下笔记,与大家共享. spring运行流程如下图所示: [流程] user发送request,DispatcherServlet(等同于Controller控制器),控制器接收到请求,来到HandlerMapping(在配置文件中配置),HandlerMapping会对URL进行解析,并判断当前URL该交给哪个controller来处理,找到对应的controller之后,controller就跟server.Javabean进行交互,得到某一个值,并返回

  • 配置一个vue3.0项目的完整步骤

    说起来有点丢人,我已经使用vue好久了,但是怎么从0开始配置一个vue项目,每次还是要百度.这次决定写个博客,加强下记忆,如果再记不住就直播自己的女朋友洗澡. 以下以新建一个图书管理项目为例.我使用vue3新建项目,对于创建一个项目来说,vue3真的比vue2简单很多. 1.初始化项目 1.1全局安装vue-cli 创建vue项目,首先要确保全局安装了vue命令行工具. 我这边使用yarn而不用npm,因为yarn要比npm好用的多,强烈推荐使用.如果大家对yarn不熟悉,我这边免费赠送我的ya

  • Koa从零搭建到Api实现项目的搭建方法

    什么是Koa? Koa 是一个新的 web 框架,由 Express 幕后的原班人马打造, 致力于成为 web 应用和 API 开发领域中的一个更小.更富有表现力.更健壮的基石. 通过利用 async 函数,Koa 帮你丢弃回调函数,并有力地增强错误处理. Koa 并没有捆绑任何中间件, 而是提供了一套优雅的方法,帮助您快速而愉快地编写服务端应用程序. Koa vs Express Koa使用promises和async函数来摆脱回调地狱的应用并简化错误处理.它暴露自己ctx.request和c

  • 搭建一个Koa后端项目脚手架的方法步骤

    一.背景 结合当前的node比较火的三大框架,Express.Koa.egg.笔者之前用的Express,后面发现回调把我搞死了,实在太无奈了.终于有一天去尝试了Koa来进行开发,发现实在太舒服了.ES6语法支持很多,同步模式也很到位,但是在学习koa的过程中,发现基本的基础知识都了解了,也按照官方的文档走了一遍,但发现好像无从下手.感觉开发过程中,分层不太明显,业务逻辑简单还好,一多麻烦就来了.查看了资料后,有一个koa的脚手架叫做 koa-generator ,马上尝试后发现不是我想要的模板

  • Vue3+TS+Vite+NaiveUI搭建一个项目骨架实现

    目录 写在前面 创建Vue3项目 开发规范 Vite配置 别名配置 环境变量 .env文件 定义环境变量 在vite.config.ts中获取环境变量 自动导入 NaiveUI的安装 写在最后 写在前面 现在已经有很多项目团队使用Vue3+TS进行开发,同时也就意味着Vue3的生态越来越完善,如果还是停留在Vue2的阶段已经out了,这篇文章将会使用Vue3+TS+NaivaUI搭建一个简单的项目骨架. 创建Vue3项目 首先我们通过Vite来创建一个Vue3+TS的一个项目,打开终端,找到我们

随机推荐