Angular7.2.7路由使用初体验

2024-12-02 02:03:29

本文记录自己在学习angular中对路由的理解

angular路由不在angular的包中, 如果要使用angular的路由, 需要从@angular/router中引入

路由的使用:

子路由使用:

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';

const route: Routes = [
{path: 'browse-product', component: BrowseProductComponent},
{path: 'buy-product', component: BuyProductComponent}
]

@NgModule({
imports: [RouterModule.ferChild(route)], // 子路由使用ferChild方法
exports: [RouterModule]
})

export class ChildRoutingModule {}

父组件中:

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';

const route: Route = [
{
  path: '',
  children: [
   {path: '', redirectTo: '/user/browse-product', pathMatch: 'full'},
   {path: 'user', loadChildren: './user/user.module#UserModule'},
   {path: 'admin', loadChildren: './admin/admin.module#AdminModule'},
  ]
 }
]

@NgModule({
imports: [RouterModule.forRoot(root, {useHash: false})],
exports: [RouterModule]
})

export class ParentRoutingModule {}

在app.module.ts中导入模块

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';
import { ParentRoutingModule } from 'parentRoutingModule';
@NgModule({
declarations: [
  AppComponent,
 ],
 imports: [
  BrowserModule,
  RouterModule,
  ParentRoutingModule
 ]
})

然后在app.component.html中加入router-outlet即可, router-outlet就是路由的出口, 表示路由对应的组件应该在这里显示.

<h1>Angular Router</h1>
<nav>
 <a routerLink="/user/browse-product">browse-product</a>  
 <a routerLink="/user/buy-product">buy-product</a> 
 <a routerLink="/admin/manage-product">manage-product</a> 
 <a routerLink="/admin/operator-record">operator-record</a> 
</nav>
<router-outlet></router-outlet>

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

详解Angular6.0使用路由步骤(共7步)

今天写的有点儿多了,前几天一直写js基础.今天想聊聊angular6.0的路由实现.因为有公司已经开始转向angular6.0了.写完赶紧吃饭去了. 声明一下,以下路由的实现是基于angular6.0 脚手架实现的. 脚手架的安装方法不在此讨论范围内. 第一步:创建一个路由文件. 通过指令ng g module 模块名称;来创建一个路由模块文件; 第二步: 在app.component.html模板文件中,定义路由渲染的位置; 第三步: 引入路由模块以及路由规则模块(在app-routing.
详解使用路由延迟加载 Angular 模块

Angular 非常模块化,模块化的一个非常有用的特性就是模块作为延迟加载点.延迟加载意味着可以在后台加载一个模块和其包含的所有组件等资源.这样 Angular 就不需要在第一个界面从服务器下载所有的文件,直到您请求它,才下载相应的模块.这对提供性能和减少首屏的初始下载文件尺寸有巨大的帮助.而且它可以很容易设置. 这里将使用一个简单示例来演示这个特性是如何工作的.将应用拆分为多个不同的模块,可以在需要的时候再进行延迟加载. 延迟加载的路由需要在根模块之外定义,所以,你需要将需要延迟加载的功能包含
使用Angular CLI生成路由的方法

第一篇文章是: "使用angular cli生成angular5项目" :http://www.jb51.net/article/136621.htm 第二篇文章是: "使用angular cli从蓝本生成代码" :http://www.jb51.net/article/137031.htm 我们知道使用 ng g module admin 将会生成admin module. 而使用 ng g m sales --routing 则将会生成sales和 sales-
使用AngularJS对路由进行安全性处理的方法

简介自从出现以后,AngularJS已经被使用很长时间了. 它是一个用于开发单页应用(SPA)的javascript框架. 它有一些很好的特性,如双向绑定.指令等. 这篇文章主要介绍Angular路由安全性策略. 它是一个可用Angular开发实现的客户端安全性框架. 我已经对它进行了测试. 除了保证客户端路由安全性外,你也需要保证服务器端访问的安全性. 客户端安全性策略有助于减少对服务器进行额外的访问. 然而,如果一些人采用欺骗浏览器的手段访问服务器,那么服务器端安全性策略应当能够拒绝未授
AngularJS实现使用路由切换视图的方法

本文实例讲述了AngularJS实现使用路由切换视图的方法.分享给大家供大家参考,具体如下: 下面是一个简单的学生信息管理实例. 注意:除了引用angular.js之外,还要引用angular-route.js. 1.创建index.html主视图在index.html主视图中,我们将会把多个视图共有的东西都放在里面,例如菜单.在这个例子中,我们仅仅把应用的标题放在里面,然后再用ng-view指令来告诉Angular把视图显示在哪儿. <!DOCTYPE html> <html xml
AngularJS中的路由使用及实现代码

前言本章节将为大家介绍 AngularJS 路由.AngularJS 路由允许我们通过不同的 URL 访问不同的内容.通过 AngularJS 可以实现多视图的单页Web应用(single page web application,SPA). 1.1 Angular JS路由基础知识讲解在AngularJS中使用路由: 1. 导入路由文件:angular-route.js 2. 在主模块中注入"ngRoute". angular.module("app",[
简单讲解AngularJS的Routing路由的定义与使用

在单页面应用中,视图之间的跳转就显尤为重要的,随着应用越来越复杂,我们需要用一种方法来精确控制什么时候该呈现怎样的页面给用户. 咱们可以通过在主页面中引入不同的模板来支持不同页面的切换,但是这么做的缺点就是,越来越多的内嵌代码导致最后难以管理. 通过ng-include指令我们可以把很多的模板整合在视图中,但是我们有更好的方法来处理这种情况,我们可以把视图打散成layout和模板视图,然后根据用户访问的特定的URL来显示需要的视图我们可以将这些"碎片"在一个布局模板中拼接起来 Ang
angular2中router路由跳转navigate的使用与刷新页面问题详解

本文主要介绍的是angular2中router路由跳转navigate的使用与刷新页面问题的相关内容,分享出供大家参考学习,下面来看看详细的介绍: 一.router.navigate的使用 navigate是Router类的一个方法,主要用来跳转路由. 函数定义: navigate(commands: any[], extras?: NavigationExtras) : Promise`<boolean>` interface NavigationExtras { relativeTo :
Angular7.2.7路由使用初体验

本文记录自己在学习angular中对路由的理解 angular路由不在angular的包中, 如果要使用angular的路由, 需要从@angular/router中引入路由的使用: 子路由使用: import { NgModule } from '@angular/core'; import { RouterModule, Routes } from '@angular/router'; const route: Routes = [ {path: 'browse-product', com
springcloud初体验(真香)

一.微服务简介 Ⅰ.我对微服务的理解微服务是软件开发的一种架构方式,由单一的应用小程序构成的小服务:一个软件系统由多个服务组成:在微服务中,服务是细粒度的,协议是轻量级的(部署简单.性能开销小) Ⅱ.为什么要使用微服务? 随着时代的发展,单体架构(MVC三层模型)越来越不能满足企业的要求:业务规模的不断扩大.团队开发人员的增多,使得单体架构出现了以下几个问题: (1)部署效率低(比如代码量非常多,依赖的包非常多,那么每一次编译打包.部署测试的时间就会很久) (2)团队开发成本高(如果某个模块出
vue.js 初体验之Chrome 插件开发实录

背景对于经常和动画开发打交道的开发者对于Animate.css这个动画库不会陌生,它把一些常见的动画效果都封装起来了,非常实用.但是有时候在开发中,仅仅只是需要某一两个动画效果,把整个CSS文件都引入,这样不是太好. 需求就出现了,能不能有一个工具可以直接预览Animate.css对应的动画效果,并且生成对应的动画代码呢? 作为一个UI开发,平时跟Chrome浏览器打交道最多,于是就整了一个Chrome插件可以及时预览对应Animate.css中的动画效果并生成对应的动画代码,这样在实际开发中
NetCore1.1+Linux部署初体验

NetCore1.1+Linux部署初体验 1.环境准备 Centaos7+Win10 虚拟机 Win10安装VS2017 注意勾选下.Net Core 3.Centaos安装netcore 1.1参见https://www.microsoft.com/net/core sudo yum install libunwind libicu curl -sSL -o dotnet.tar.gz https://go.microsoft.com/fwlink/?linkid=848821 sudo m
Visual Studio for Mac版初体验

你喜爱的 IDE,现在可用于 Mac.因为在 Visual Studio for Mac 之前,已经有了 Visual Studio Code for Mac,那时候我们还以为 Visual Studio Code 就是 Visual Studio 的跨平台版本,但事实微软并不是这样想的,Visual Studio Code 相对于 Visual Studio 还是太简化了,企业级的应用开发 Visual Studio Code 还是有些力不从心,所以 Visual Studio for Mac
js原型链与继承解析（初体验）

首先定义一个对象obj,该对象的原型为obj._proto_,我们可以用ES5中的getPrototypeOf这一方法来查询obj的原型,我们通过判断obj的原型是否与Object.prototype相等来证明是否存在obj的原型,答案返回true,所以存在.然后我们定义一个函数foo(),任何一个函数都有它的prototype对象,即函数的原型,我们可以在函数的原型上添加任意属性,之后通过new一个实例化的对象可以共享其属性(下面的两个例子会详细介绍). function foo(){} fo
AJAX初体验之实战篇——打造博客无刷新搜索

如果你对AJAX不是很了解,可以先看看这篇教程的前篇<AJAX初体验之上手篇>. 现在博客很流行,相信应该上网时间稍微长点的朋友都会在这或者在那的有一个自己的博客.对于一些有一定能力的朋友,可能更喜欢自己去下载一个博客程序来架设一个自己的博客,而不是使用一些博客网站提供的服务.而大部分博客程序所带的搜索功能是提交查询关键字到搜索页面,然后在后台生成搜索结果,再呈现给用户,这过程之中浪费了一些带宽,如博客的侧边栏.要节约这一些带宽,我们可以用AJAX来打造自己的无刷新日志搜索. 在本篇教程中,数
MyBatis入门初体验之使用大全(2)

MyBatis简介 MyBatis 本是apache的一个开源项目iBatis, 2010年这个项目由apache software foundation 迁移到了google code,并且改名为MyBatis .2013年11月迁移到Github. iBATIS一词来源于"internet"和"abatis"的组合,是一个基于Java的持久层框架.iBATIS提供的持久层框架包括SQL Maps和Data Access Objects(DAO) 1.所需jar包
Android Bluetooth蓝牙技术初体验

一:Bluetooth包简介 Android平台提供了一个android.bluetooth的包,里面实现蓝牙设备之间通信的蓝牙API.总共有8个类,常用的四个类如下: BluetoothAdapter类代表了一个本地的蓝牙适配器.它是所有蓝牙交互的入口点.利用它你可以发现其他蓝牙设备,查询绑定了的设备,使用已知的MAC地址实例化一个蓝牙设备和建立一个BluetoothServerSocket(作为服务器端)来监听来自其他设备的连接. BluetoothDevice类代表了一个远端的蓝牙设备
mac系统安装Python3初体验

前沿对于iOS开发不要随便拆卸系统自带的Python,因为有很多 library 还是使用 Python2.7. 1 安装Xcode 1.1 App Store 搜索Xcode 并安装 1.2 安装 Xcode command line tool 1.2.1 打开命令行terminal工具 control + space 输入terminal 回车 1.2.2 安装Xcode command line tool xcode-select --install 2 安装套件管理工具 Homebre

Angular7.2.7路由使用初体验

相关推荐

随机推荐