angular中使用css全局变量定义

html-css02

angular中使用css全局变量定义,第1张

删除数组指定下标或指定对象。

全局变量定义:删除数组指定下标或指定对象。将使用Angular7和CSS变量构建一个超级简单的加密货币列表应用程序。AngualrJS中设置全局变量,即每个Controller中都可以访问的变量。

Angular是一款来自谷歌开源的web前端框架,诞生于2009年,由MiskoHevery等人创建,后为Google所收购。

1、安装node, yarn,网上对应的都有安装教程

2、执行yarn global add @angular/cli,安装angular的脚手架,运行ng version查看是否安装成功

3、执行ng new projectName --style=less 创建样式语法为less的项目

可用选项

--dry-run: boolean, 默认为 false, 若设置 dry-run 则不会创建任何文件

--verbose: boolean, 默认为 false

--link-cli: boolean, 默认为 false, 自动链接到 @angular/cli 包

--skip-install: boolean, 默认为 false, 表示跳过 npm install

--skip-git: boolean, 默认为 false, 表示该目录不初始化为 git 仓库

--skip-tests: boolean, 默认为 false, 表示不创建 tests 相关文件

--skip-commit: boolean, 默认为 false, 表示不进行初始提交

--directory: string, 用于设置创建的目录名,默认与应用程序的同名

--source-dir: string, 默认为 'src', 用于设置源文件目录的名称

--style: string, 默认为 'css', 用于设置选用的样式语法 ('css', 'less' or 'scss')

--prefix: string, 默认为 'app', 用于设置创建新组件时,组件选择器使用的前缀

--mobile: boolean, 默认为 false,表示是否生成 Progressive Web App 应用程序

--routing: boolean, 默认为 false, 表示新增带有路由信息的模块,并添加到根模块中

--inline-style: boolean, 默认为 false, 表示当创建新的应用程序时,使用内联样式

--inline-template: boolean, 默认为 false, 表示当创建新的应用程序时,使用内联模板

4、运行项目

   ng serve  命令启动项目

   ng serve --open 启动完毕会自动打开浏览器,可以简写成 ng serve --o

5、打包项目

执行ng build--prod--build-optimizer命令打包

6、运行打包文件

mac电脑进入dist文件下的打包文件,运行python -m SimpleHTTPServer 8080命令后,在浏览器输入localhost:8080即可展示项目页面

windows,运行yarn global add http-server或者npm install http-server -g安装http-server插件,进入打包文件根目录,执行http-server,即可运行打包项目

辅助路由案例的思路:

1、在APP组件模板上再定一个插座来显示在线咨询组件

2、单独开发一个在线咨询组件,只显示在新定义的插座上

首先生成一个consult咨询组件

然后用css样式调整下主页模板和股票详情模板

在路由配置中写咨询组件的辅助路由,其中outlet指定放在哪个路由插座上

3、通过路由参数控制新的辅助插座是否显示在线咨询组件

在主页模板上添加2个链接,一个是开始咨询,一个是结束咨询

开始咨询链接中routerlink里不是写路径了,而是写路由插座信息,outlets对应路由插座是aux,aux后对应consult组件的路由路径consult。

结束咨询中aux对应的路由路径是null,表示什么都不显示

最后看看实际效果:

点击开始咨询,出现绿色咨询框。点击结束咨询,咨询框消失。

如果在开始咨询链接中routerlink里outlets后添加“primary:home”,其中primary表示主路由,这句话的意思是当点击开始咨询时,控制主路由跳转至主页上

效果如下: