Anguar入门--开发环境的搭建
来源:互联网 发布:淘宝店铺运营助手在哪 编辑:程序博客网 时间:2024/06/09 20:39
Anguar入门–开发环境的搭建
下周将会接触评审团后台页面,使用的是框架是angular,之前没有学过这个框架,现在赶紧补一下,避免下周什么都不懂。
步骤一:设置开发环境
- 安装node.js和npm
之前使用过vue,这两个也装过了。可以百度,有许多博客介绍安装的。 - 全局安装Angular CLI
npm install -g @angular/cli
安装完后,输入 ng -v
命令,有如下界面则说明安装成功
步骤二:创建一个项目
运行下列命令来在当前目录生成一个新项目以及应用的骨架代码
ng new my-first
my-first就是项目的文件夹名称,接下来就会在目录中生成很多的文件,你首先要看的文件是README.md。 它提供了一些如何使用CLI命令的基础信息。 如果你想了解 Angular CLI 的工作原理,请访问 Angular CLI 的仓库及其 Wiki。
每个结构对应的介绍:
由于src目录下有很多重要的文件,所有的Angular组件、模板、样式、图片以及你的应用所需的任何东西都在这里。 这个文件夹之外的文件都是为构建应用提供支持用的。
注意:通过命令行工具生成目录结构是按照一定的规则来生成的,如果随意改变文件名或者目录结构,很可能会导致命令行工具其他功能不能使用。Angular没有那么灵活
组件
组件的必备元素
步骤三:启动项目
在创建的项目根目录下,输入
ng serve --open
ng serve命令会启动开发服务器,监听文件变化,并在修改这些文件时重新构建此应用。使用–open(或-o)参数可以自动打开浏览器并访问http://localhost:4200/
效果如下:
可以试着更改代码:
在src/app/app/component.ts中定义了默认组件
import { Component } from '@angular/core';@Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css']})export class AppComponent { title = 'app';}
这个组件会显示到index.html页面中的app-root标签中,html代码来自app.component.html模板内容,css引自app.component.css。后面定义的一个就是控制器,属性只有一个title,可以改变title的内容,刷新页面对应的内容就会改变。
- Anguar入门--开发环境的搭建
- Android开发入门------开发环境的搭建
- Windows Mobile 的开发环境搭建入门
- android开发的环境搭建入门
- QT入门-开发环境的搭建
- linux开发入门之环境的搭建
- PHP开发入门-环境搭建
- goclipse 开发环境搭建入门
- Android入门开发环境搭建
- Anguar的指令编译过程
- Python的入门学习及开发环境的搭建
- Android入门进阶教程(2)-windows 开发环境的搭建
- Android入门进阶教程(3)-linux 开发环境的搭建
- Android入门进阶教程(2)-windows 开发环境的搭建
- Android入门进阶教程(3)-linux 开发环境的搭建
- JBPM4入门——3.JBPM4开发环境的搭建
- 安卓开发入门——环境的搭建
- 【Qt入门实践】Linux下Qt开发环境的搭建
- python 试题:写一段程序逐行读入一个文本文件,并在屏幕上打印出来。
- 如何用命令行在github新建一个项目
- 【机器学习】先验概率、后验概率、贝叶斯公式、 似然函数
- openjudge 特殊密码锁(开关问题)
- 分类器
- Anguar入门--开发环境的搭建
- azure 最佳实践-- 系统运维
- Python turtle库入门小练习
- python 试题:Python中pass语句的作用是什么?
- 旋转轮播图
- HTML5简介
- C# 中的委托和事件
- list.set.map 补充说明
- 用链表实现栈(Java版)