Angular 官方学习网站:https://angular.io

1.安装node.js

在angular主页下载node.js安装包

2.创建angular工程

Windows系统在命令窗口输入:ng new my-app

3.启动服务器

打开my-app文件夹并启动服务器:

cd my-app

ng serve --open

4.理解新创建的工程

1.src里面是工程的源码,其中最主要的有三个:module.ts,compoenet.css,component.html

2.在my-app工程里生成模块:(1)先停止命令窗口编译器ctrl+c,再在窗口输入:ng g c productlist(模块名称)

(2)为了在主页面能实现页面的寻址,在module.ts里面,导入路由模块:

import{RouterModule,Routes} from '@angular/router';
并添加路由变量

const routes:Routes=[
{
path:'product_list',
component:ProductlistComponent
}]
最后,在imports里面导入路由信息

imports: [
BrowserModule,
RouterModule.forRoot(routes)
]
3.在component.html主页面,添加:
<nav>
<a routerLink='/product_list'>商品列表</a>
<router-outlet></router-outlet>

1-Angular学习篇的更多相关文章

  1. angular学习笔记(三十一)-$location(2)

    之前已经介绍了$location服务的基本用法:angular学习笔记(三十一)-$location(1). 这篇是上一篇的进阶,介绍$location的配置,兼容各版本浏览器,等. *注意,这里介绍 ...

  2. angular学习笔记(三十一)-$location(1)

    本篇介绍angular中的$location服务的基本用法,下一篇介绍它的复杂的用法. $location服务的主要作用是用于获取当前url以及改变当前的url,并且存入历史记录. 一. 获取url的 ...

  3. angular学习笔记(三十)-指令(10)-require和controller

    本篇介绍指令的最后两个属性,require和controller 当一个指令需要和父元素指令进行通信的时候,它们就会用到这两个属性,什么意思还是要看栗子: html: <outer‐direct ...

  4. angular学习笔记(三十)-指令(7)-compile和link(2)

    继续上一篇:angular学习笔记(三十)-指令(7)-compile和link(1) 上一篇讲了compile函数的基本概念,接下来详细讲解compile和link的执行顺序. 看一段三个指令嵌套的 ...

  5. angular学习笔记(三十)-指令(7)-compile和link(1)

    这篇主要讲解指令中的compile,以及它和link的微妙的关系. link函数在之前已经讲过了,而compile函数,它和link函数是不能共存的,如果定义了compile属性又定义link属性,那 ...

  6. angular学习笔记(三十)-指令(6)-transclude()方法(又称linker()方法)-模拟ng-repeat指令

    在angular学习笔记(三十)-指令(4)-transclude文章的末尾提到了,如果在指令中需要反复使用被嵌套的那一坨,需要使用transclude()方法. 在angular学习笔记(三十)-指 ...

  7. angular学习笔记(三十)-指令(5)-link

    这篇主要介绍angular指令中的link属性: link:function(scope,iEle,iAttrs,ctrl,linker){ .... } link属性值为一个函数,这个函数有五个参数 ...

  8. angular学习笔记(三十)-指令(2)-restrice,replace,template

    本篇主要讲解指令中的 restrict属性, replace属性, template属性 这三个属性 一. restrict: 字符串.定义指令在视图中的使用方式,一共有四种使用方式: 1. 元素: ...

  9. Angular学习资料大全和常用语法汇总(让后端程序员轻松上手)

    前言: 首先为什么要写这样的一篇文章呢?主要是因为前段时间写过一些关于Angualr的相关实战文章,有些爱学习的小伙伴对这方面比较感兴趣,但是又不知道该怎么入手(因为认识我的大多数小伙伴都是后端的同学 ...

  10. js学习篇1--数组

    javascript的数组可以包含各种类型的数据. 1. 数组的长度 ,直接用 length 属性; var arr=[1,2,3]; arr.length; js中,直接给数组的length赋值是会 ...

随机推荐

  1. 怎样用Java自制优秀的图片验证码?这样!

    Completely Automated Public Turing test to tell Computers and Humans Apart 全自动区分计算机和人类的图灵测试 简称CAPTCH ...

  2. 《Java程序设计》第二周学习记录(2)

    目录 3.1 运算符与表达式 3.3 if条件分支语句 3.7 for语句与数组 参考资料 3.1 运算符与表达式 和C语言基本上没有区别,要注意的是关系运算符的输出结果是bool型变量 特别要注意算 ...

  3. smartctl 检测磁盘信息

    smartctl  -i 指定设备 -d 指定设备类型,例如:ata, scsi, marvell, sat, 3ware,N -a 或A 显示所有信息 -l 指定日志的类型,例如:TYPE: err ...

  4. Linux LVS_NAT DR

    一.lvs-nat LVS是Linux Virtual Server的简写,意即Linux虚拟服务器.是由章文嵩博士开发的一个在内核层面的负载均衡调度器.    lvs是在netfilter的INPU ...

  5. py-faster-rcnn

    踩坑: 1. 服务器上训练: sh ./experiments/scripts/faster_rcnn_end2end.sh 会各种报错 有说是因为#!/bin/bash的问题,改过,不行. 改成如下 ...

  6. Android内存泄漏的检测流程、捕捉以及分析

    https://blog.csdn.net/qq_20280683/article/details/77964208 Android内存泄漏的检测流程.捕捉以及分析 简述: 一个APP的性能,重度关乎 ...

  7. Python类的私有属性

    class Bar(object): __age = 18 sex = 'male' def __init__(self, ): pass def f(self): print(self.__age) ...

  8. Learning-Python【9】:Python文件操作

    1.什么是文件 文件是操作系统提供给用户或应用程序的一种虚拟单位,该虚拟单位直接映射的是硬盘空间.通俗点说,文件就是存放数据的地方 2.为何要处理文件 用户或应用程序直接操作文件(读/写)就被操作系统 ...

  9. Learning-Python【10】:函数初识

    一.什么是函数 函数就是代码的一种组织形式,是指将一组语句的集合通过一个名字(函数名)封装起来,要想指向这个函数,只需要调用其函数名即可 函数分为两大类:内置函数 和 自定义函数 二.为何要用函数 减 ...

  10. 1.6 安全认证与授权(springboot与安全)

    引言:以下文档是学习尚硅谷关于springboot教学视频后整理而来! 一.安全 认证(Authentication):证明你是谁? 授权(Authorization):你能干什么? 参考资料: Sp ...