目录
1.angular-seed的路由
2.路由机制的探索
3.懒加载

一:angular-seed的路由

step1:安装种子项目

  

$ git clone --depth 1 https://github.com/AngularClass/angular2-seed.git  developer-hub

//git cmd进入到项目目录后运行此命令，我的项目的名称为developer-hub

$  cd   developer-hub     //webstorm命令行进入项目目录

$  npm install    //json文件修改好之后再运行install命令

$  npm start

注意:
在npm install之前要修改tsconfig.json，
"compilerOptions": {

      "lib": ["es6", "dom"]

}
打开localhost:3000就可以看到种子项目的"hello"界面了。
step2:
分析一下种子项目的目录结构，并且改一改看能不能修改成功。
看顶级目录:
● .awcache是缓存

● dist放最后生产用的文件

● node-modules放node模块

● src 源代码

● .gitignore文件是git用于配置不需要加入版本管理的文件，比如最后两行是

.awcache

.DS_Store

●LICENSE，我的是

Apache License

Version 2.0, January 2004

●package.json

{

  "name": "angular2-seed",

  "version": "0.0.0",

  "description": "A simple Angular 2 Seed featuring Angular 2 and Webpack 2",

  "author": "PatrickJS <github@gdi2290.com>",//作者

  "main": "index.js",

   //主入口

  "files": [

    "dist",

    "src"

  ],

  "scripts": {//npm脚本

    "test": "echo \"Error: no test specified\" && exit 1",

    "start": "npm run server:dev",

    "start:hmr": "npm run server:dev -- --env.HMR",

    "server:dev": "webpack-dev-server --env.ENV development",

    "debug:start": "node-nightly --inspect --debug-brk node_modules/webpack-dev-server/bin/webpack-dev-server.js --env.ENV development",

    "debug:build": "node-nightly --inspect --debug-brk node_modules/webpack/bin/webpack.js --env.ENV development",

    "predll": "rimraf dist/dll/*.*",

    "dll": "webpack --config webpack.dll.ts --env.ENV development",

    "prebuild": "rimraf dist/*.*",

    "build": "webpack --env.ENV development",

    "build:hmr": "npm run build -- --env.HMR"

  },

  "dependencies": {

    //项目

    "@angular/common": "~2.0.1",

    "@angular/compiler": "~2.0.1",

    "@angular/compiler-cli": "~0.6.3",

    "@angular/core": "~2.0.1",

    "@angular/http": "~2.0.1",

    "@angular/forms": "~2.0.1",

    "@angular/router": "~3.0.1",

    "@angular/platform-browser": "~2.0.1",

    "@angular/platform-browser-dynamic": "~2.0.1",

    "@angular/platform-server": "~2.0.1",

    "@angularclass/conventions-loader": "^1.0.12",

    "@angularclass/form-validators": "^1.0.11",

    "@angularclass/resolve-angular-routes": "^1.0.8",

    "@angularclass/hmr-loader": "~3.0.1",

    "@angularclass/hmr": "~1.2.0",

    "core-js": "^2.4.1",

    "rxjs": "5.0.0-beta.12",

    "zone.js": "~0.6.25"

  },

  "devDependencies": {

    //dev项目依赖

    "@types/core-js": "^0.9.28",

    "@types/node": "^4.0.30",

    "assets-webpack-plugin": "^3.4.0",

    "awesome-typescript-loader": "^2.2.1",

    "cross-spawn": "^4.0.0",

    "es6-promise": "^3.1.2",

    "es6-shim": "^0.35.0",

    "ie-shim": "^0.1.0",

    "ignore-loader": "^0.1.1",

    "json-loader": "^0.5.4",

    "raw-loader": "^0.5.1",

    "rimraf": "^2.5.4",

    "string-replace-loader": "github:gdi2290/string-replace-loader",

    "to-string-loader": "^1.1.4",

    "ts-helpers": "github:gdi2290/ts-helpers",

    "ts-loader": "^0.8.2",

    "ts-node": "^1.2.2",

    "typescript": "2.0.2",

    "webpack": "~2.1.0-beta.25",

    "webpack-dev-middleware": "^1.6.1",

    "webpack-dev-server": "^2.1.0-beta.8"

  },

  "license": "Apache-2.0",

    //许可证

  "bugs": {

    "url": "https://github.com/gdi2290/angular2-webpack2-starter/issues"

  },

  "homepage": "https://github.com/gdi2290/angular2-webpack2-starter#readme",

   //主页

  "repository": {

   //仓库

    "type": "git",

    "url": "git+https://github.com/gdi2290/angular2-webpack2-starter.git"

  }

}
说明1:main选项是主入口模块的ID

说明2:files选项是项目包含的两个目录。

说明3:scripts选项是npm script(npm脚本)

scripts也是对象，它的属性包含了很多，比如 "start": "npm run server:dev", 的意思是start命令对应的脚本是npm run server:dev。

说明4:dependencies选项是项目依赖。

比如@angular之类的依赖可以在node_modules找到对应的目录

说明5:devDependencies是项目开发依赖，跟开发环境、调试打包有关咯。

第二看src源代码目录了。

●app目录

—about组件

—home组件

app.html文件

●main.browser.ts文件负责使用根模块(NgModule)去启动应用。

●index.html是src目录下默认打开的文件。里面做了app组件的使用和一些文件的引入。可以测试一下，先把原文内容注释掉，等测试完毕之后再放开。

index.html我的内容:

<!DOCTYPE html>

<html 												


											
迈向angularjs2系列(6):路由机制的更多相关文章
	

    
								
  1. C#进阶系列——WebApi 路由机制剖析：你准备好了吗？
		
    前言:从MVC到WebApi,路由机制一直是伴随着这些技术的一个重要组成部分. 它可以很简单:如果你仅仅只需要会用一些简单的路由,如/Home/Index,那么你只需要配置一个默认路由就能简单搞定:  ...
    
		
    2. 
						
  2. C#进阶系列——WebApi 路由机制剖析：你准备好了吗？ 转载https://www.cnblogs.com/landeanfen/p/5501490.html
		
    阅读目录 一.MVC和WebApi路由机制比较 1.MVC里面的路由 2.WebApi里面的路由 二.WebApi路由基础 1.默认路由 2.自定义路由 3.路由原理 三.WebApi路由过程 1.根 ...
    
		
    3. 
						
  3. 迈向angularjs2系列(4):脏值检测机制
		
    目录 一: 概念简介 脏值检测,简单的说就是在MVC的构架中,视图会通过模型的change事件来更新自己. 脏值检测的核心代码是观察者模式的实现,其机制会执行digest循环,在特定UI组件的上下文执 ...
    
		
    4. 
						
  4. 迈向angularjs2系列(1):typescript指南
		
    typescript指南 前言 typescript是angularjs2推荐使用的脚本语言.它由微软2012年首次发布. 一.    typescript和javascript的区别 1.从遵循的规 ...
    
		
    5. 
						
  5. 迈向angularjs2系列(5):依赖注入
		
    一: 为什么要依赖注入 1.构造器引入依赖 假设一个类Car类依赖于Engine(引擎)类.Transition(变速箱)类,可使用构造器来完成. //类似如下代码 class Engine{} cl ...
    
		
    6. 
						
  6. Zigbee系列（路由机制）
		
    参考文档: ug103-02-fundamentals-zigbee.pdf section4 zigbe routing concepts docs-05-3474-21-0csg-zigbee-s ...
    
		
    7. 
						
  7. 迈向angularjs2系列(8):angular cli和angular2种子项目
		
    文章目录 1.angular cli快速搭建项目 2.angular2-seed 3.手动配置 题外话:如何更好的阅读本篇文章 一: angular cli的安装 Angular-cli(命令行界面, ...
    
		
    8. 
						
  8. 迈向angularjs2系列(7):表单
		
    目录 一:校验表单的使用 1.搭建脚手架 2.校验表单的使用 3.select下拉列表的用法 一: 校验表单的使用 对于CRUD型的应用,表单是必备组件. 1.搭建脚手架 git clone http ...
    
		
    9. 
						
  9. 迈向angularjs2系列(3):组件详解
		
    一: 以组件开发一个to-do list应用 todo组件分为导入.接口定义.顶层组件.控制器.启动5个部分. app.ts: //导入 import {Component} from '@angul ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. Carthage的安装和使用
			
    为什么要使用Carthage CocoaPods是已存在很长时间的Cocoa依赖管理器, 那么为什么要创建Carthage呢? CoaoaPods是一套整体解决方案,我们在Podfile中指定好我们需 ...
    
			
    2. 
						
  2. (转)TCP和UDP之间的区别
			
    TCP和UDP区别     TCP UDP 是否连接 面向连接 面向非连接 传输可靠性 可靠的 不可靠的 应用场合 传输大量的数据 少量数据 速度 慢 快    OSI 和 TCP/IP 模型在传输层 ...
    
			
    3. 
						
  3. PDF安全模式破解的简单办法
			
    网上下电子书时,经常会遇到 电子书被加密的情况,此时读者将无法进行标亮,加注释等基本的操作.网上的方法都是建议下个 PDFPasswodRemove 的软件,麻烦而且软件不好用.经各种研究,尝试,发现 ...
    
			
    4. 
						
  4. c#中Class和Struct使用与性能的区别
			
    在Unity中很多已经定义为结构体的数据结构 Vector2, Vector3 和 Vector4 Rect Color和Color32 Bounds Touch   1.Class为引用类型,Str ...
    
			
    5. 
						
  5. Jmeter之app性能测试（ios，android）
			
    测试小菜鸟alter今天一大早又学习了一点东西关于jmeter-app性能测试,现在记录一下.提到性能测试,那我就简单总结一下.(想跳过的,直接将页面下移到下一个红色字体处) 性能测试的相关知识介绍  ...
    
			
    6. 
						
  6. 简单工厂设计模式--Java设计模式（一）
			
    一 概念: 简单工厂模式就是通过一个工厂类根据参数动态创建对应的类. 二 案例 我们以汽车作为例子,在现实生活中汽车只是一个抽象的产品,其中有很多类型的汽车才是具体产品,如奔驰.宝马.保时捷等等(当然 ...
    
			
    7. 
						
  7. 第二棵树：Splay
			
    Splay这东西神难打--什么都没动板子敲上就直逼200行了,而且非常难记(仿佛是模板长的必然结果).但是为什么还要学呢?据说是因为它可以实现区间操作.但是自从我得知无旋Treap也能做到这些,默默对 ...
    
			
    8. 
						
  8. 七、vue中v-for有时候对页面不会重新渲染，数组变化后如何到渲染页面
			
      v-for不能进行双向数据绑定,页面渲染完成后,再次更改v-for遍历的数据,js里面打印的数据看到数据值已经更改,但是页面的数据就是没有渲染,这是为什么呢? vue中v-for和angularj ...
    
			
    9. 
						
  9. Oracle RAC 实验环境RMAN备份v1.01
			
    Oracle RAC 实验环境RMAN备份v1.01 环境:RHEL 6.5 + Oracle GI 11.2.0.4 + RAC 11.2.0.4 (2 nodes) 需求:制定RAMN备份策略 版 ...
    
			
    10. 
						
  10. TypeScript基础数据类型
			
    Typescript与Javascript 二者的区别 作为前端开发的基础语言javascript已经深入人心,人人皆知.作为变成入门的最简单语言,Javascript语言以动态.弱类型语言而著名,学 ...
    
			
    11.