angular2项目关于主页结构分析
这里需要弄清楚两个问题:
一:主页模块如何加载进来
angular2的根模块应用加载之后便会根据根模块路由信息来加载主页模块
export const appRoutes=[
{
path:'',
redirectTo:'home',
pathMatch:'full'
},
{
path:'home',
loadChildren:'./home/home.module#HomeModule'
},
如上:path:" " 代表该模块加载后自动加载指定的组件。这里为什么不直接{path:' ',loadChildren:'./home/home.module#HomeMoule'} 呢?这个也能实现自动载入主页模块的功能。
{path:'home',loadChildren:'./home/home.module#HomeModule'} -------- 这相当于将home模块抽象出来并取名字为home,这样其他地方如果用到了这个模块,无论是用户点击还是某个模块将home当做子模块来自动加载,都可以调用名为home的path。
{path:' ',loadChildren:'./home/home.module#HomeMoule'} ------- 相当于匿名函数自动调用,{path:'home',loadChildren:'./home/home.module#HomeModule'} ---------相当于封装好的有名字的函数,任何地方都可以重用。
接下来项目根据loadChildren的路径载入home.modules.ts
import { RouterModule } from '@angular/router';
import { HomeComponent } from './home.component'; /*加载主页组件*/
import { SocialChannelComponent } from './social-channel/social-channel.component'; /*加载社交媒体组件*/
import { SitestatComponent } from '../sitestat/sitestat.component'; /*加载计时,计数组件*/
import { OnlineContactComponent } from './online-contact/online-contact.component'; /*加载qq群组件*/ import {homeRoutes} from './home.routes'; /*加载主页路由*/ @NgModule({
imports: [
SharedModule, /*引入公用模块*/
RouterModule.forChild(homeRoutes) /*引入路由模块*/
],
exports: [],
declarations: [
HomeComponent, /*主页组件*/
SocialChannelComponent, /*社交媒体组件,跳转到第三方页面*/
SitestatComponent, /*计时,计数组件*/
OnlineContactComponent /*qq群组件*/
],
providers: [],
})
export class HomeModule {}
下面是home.component.ts里面的内容,这里重点题下:selector属性的功能是让组件加载到父组件里面指定的位置。这里的app-home并不是id属性,而是dom元素的名称<app-home></app-home>
二:主页里面子组件的动态和静态加载形式------2种组件载入方式
主页视图里面加载组件一个是通过路由组件加载子组件,一个是直接将子组件作为dom元素,通过对这些自定义的元素进行编译来加载对应的子视图。
靠路由加载的组件,是有路由配置的。它关联存在于整个项目的组件树中,一般将主要内容或者大的组件由路由发起网络请求从而自动加载到父视图中。只需要一个<router-outer></router-outer>这样一个路由组件根据该模块的路由配置来动态的载入指定的组件。
这样设计便可根据实际情况做实际分析载入实际需要的组件。而在开发的时候就不必知道该视图需要加载哪些组件了。
一些事先定义在模块里面的组件通过在父视图里面充当DOM元素,相当于该模块的指令一样,不需要再次请求服务器下载组件。这某种意义上算是静态的载入指令。这种方式需要程序员清楚的知道该页面需要哪些具体的功能,然后将对应的组件名写在视图里面。
以下为home组件的路由配置信息(包括子组件的路由信息)
import { RouterModule } from '@angular/router';
import { HomeComponent } from './home.component'; /*加载主页组件模块对象*/ export const homeRoutes=[
{
path:'', /*path为空代表:路由到这个模块的时候自动将下面组件加载显示在页面*/
component:HomeComponent,
children:[{ /*这个组件里面可以根据以下路由信息显示不同的子组件(子视图)*/
path:'', /*这代表加载主组件初始情况时自动加载下面这个子组件*/
loadChildren:'../post/post.module#PostModule'
}]
}
];
children是一个数组,里面是子组件的路由配置信息。
angular2项目关于主页结构分析的更多相关文章
- 关于npm构建angular2项目问题
我在win10系统下用npm构建好angular2项目之后,在命令行下运行 ng serve --open,报一下错误: Unknown browser query 'basedir=$(dirnam ...
- 如何在ASP.NET 5上搭建基于TypeScript的Angular2项目
一.前言 就在上月,公司的一个同事建议当前的前端全面改用AngularJs进行开发,而我们采用的就是ASP.NET 5项目,原本我的计划是采用TypeScript直接进行Angular2开发.所以借用 ...
- (三) Angular2项目框架搭建心得
前言: 在哪看到过angular程序员被React程序员鄙视,略显尴尬,确实Angular挺值得被调侃的,在1.*版本存在的几个性能问题,性能优化的"潜规则"贼多,以及从1.*到2 ...
- 1.搭建Angular2项目
简述:搭建angular2的开发环境,网上已经有许多教程,不过都是window系统下的教程,我本人使用的是linux系统,搭建环境的过程也稍微比前者麻烦了一点,可参考本人的另一篇文章Linux系统下安 ...
- angular2项目关于Echarts图表的处理
在NiceFish项目中关于Echarts组件和指令是直接注册在appModule根模块中的,这样路由只需这样写就可以让浏览器加载图标组件: 在chart组件视图中: <div class=&q ...
- angular2项目关于动画的处理
animations动画在angular2官网里面已经讲解很详细了,那么动画功能在实际项目中应该如何组织文件,动画文件放在哪个位置,如何来组织结构使得动画模块和其他模块之间运作调理清晰呢,下面参照Ni ...
- 如何修改TOMCAT的默认主页为你自己项目的主页
感谢作者:xxs673076773 原文链接:https://www.iteye.com/blog/xxs673076773-1134805 (最合适的) 最直接的办法是,删掉tomcat下原有Roo ...
- angular2项目打包部署的坑
1.ng项目打包后,打开index.html,发现页面是空白的,F12查看,发现js和css引入的路径不对 这里要将package.json文件的打包命令改成 ng build --prod --ba ...
- 第一个Asp.net小项目,主页写了下后台代码
一个比较完善的登录模块,就目前的知识范围来说应该算是完美的. 涉及到:cookies,Session,验证码等知识面 Cookies存放一组值: HttpCookie cook = new HttpC ...
随机推荐
- dns轮询
负载均衡最开始一步,利用它实现负载均衡集群的定位
- 005_awk案例实战
一.工作经验总结. (1)日志案例: 10.100.194.39 10.100.194.39 1019-03-16T11:01:04+08:00 www.uuwatch.com^^3FF91DE01B ...
- jquery之源码
1.插件扩展机制 所有的Jquery代理对象的实例,都是扩展自$.fn对象的 意味着只要我们继续扩展$.fn这个对象的功能,就相当于扩展了所有的Jquery代理对象的实例的功能 代码 var $bod ...
- InterruptedException 异常
当一个方法后面声明可能会抛出InterruptedException 异常时,说明该方法是可能会花一点时间,但是可以取消的方法. 抛InterruptedException的代表方法有: 1. jav ...
- eclipse 更换主题
更换系统自带主题 依次点击 window->preferences->General->Appearance->Theme 选择主题 下载eclipse marketplace ...
- python 全栈开发,Day84(django请求生命周期,FBV和CBV,ORM拾遗,Git)
一.django 请求生命周期 流程图: 1. 当用户在浏览器中输入url时,浏览器会生成请求头和请求体发给服务端请求头和请求体中会包含浏览器的动作(action),这个动作通常为get或者post, ...
- 跨域资源共享CORS
CORS是一个W3C标准,全称是"跨域资源共享"(Cross-origin resource sharing).它允许浏览器向跨源服务器,发出XMLHttpRequest请求,从而 ...
- day8--socketserver作业
fileno()文件描述符 handle_request()处理单个请求 server_forever(poll_interval=0.5)处理多个请求,poll_interval每0.5秒检测是否关 ...
- Codeforces Round #437 (Div. 2, based on MemSQL Start[c]UP 3.0 - Round 2)
Problem A Between the Offices 水题,水一水. #include<bits/stdc++.h> using namespace std; int n; ]; i ...
- Codeforces 385D - Bear and Floodlight
385D - Bear and Floodlight 题目大意:有一个人从( l , 0 ) 想走到 ( r , 0 ),有 n 盏路灯,位置为( xi , yi ),每盏路灯都有一个照射的角度ai ...