迈向angularjs2系列(6):路由机制
目录
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
"compilerOptions": {
"lib": ["es6", "dom"]
}
● 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):路由机制的更多相关文章
- C#进阶系列——WebApi 路由机制剖析：你准备好了吗？
前言:从MVC到WebApi,路由机制一直是伴随着这些技术的一个重要组成部分. 它可以很简单:如果你仅仅只需要会用一些简单的路由,如/Home/Index,那么你只需要配置一个默认路由就能简单搞定: ...
- C#进阶系列——WebApi 路由机制剖析：你准备好了吗？ 转载https://www.cnblogs.com/landeanfen/p/5501490.html
阅读目录 一.MVC和WebApi路由机制比较 1.MVC里面的路由 2.WebApi里面的路由 二.WebApi路由基础 1.默认路由 2.自定义路由 3.路由原理 三.WebApi路由过程 1.根 ...
- 迈向angularjs2系列(4):脏值检测机制
目录 一: 概念简介 脏值检测,简单的说就是在MVC的构架中,视图会通过模型的change事件来更新自己. 脏值检测的核心代码是观察者模式的实现,其机制会执行digest循环,在特定UI组件的上下文执 ...
- 迈向angularjs2系列(1):typescript指南
typescript指南 前言 typescript是angularjs2推荐使用的脚本语言.它由微软2012年首次发布. 一. typescript和javascript的区别 1.从遵循的规 ...
- 迈向angularjs2系列(5):依赖注入
一: 为什么要依赖注入 1.构造器引入依赖 假设一个类Car类依赖于Engine(引擎)类.Transition(变速箱)类,可使用构造器来完成. //类似如下代码 class Engine{} cl ...
- Zigbee系列（路由机制）
参考文档: ug103-02-fundamentals-zigbee.pdf section4 zigbe routing concepts docs-05-3474-21-0csg-zigbee-s ...
- 迈向angularjs2系列(8):angular cli和angular2种子项目
文章目录 1.angular cli快速搭建项目 2.angular2-seed 3.手动配置 题外话:如何更好的阅读本篇文章 一: angular cli的安装 Angular-cli(命令行界面, ...
- 迈向angularjs2系列(7):表单
目录 一:校验表单的使用 1.搭建脚手架 2.校验表单的使用 3.select下拉列表的用法 一: 校验表单的使用 对于CRUD型的应用,表单是必备组件. 1.搭建脚手架 git clone http ...
- 迈向angularjs2系列(3):组件详解
一: 以组件开发一个to-do list应用 todo组件分为导入.接口定义.顶层组件.控制器.启动5个部分. app.ts: //导入 import {Component} from '@angul ...
随机推荐
- 没有绝对安全的系统：写在AES 256破解之后
NULL 在理论上,理论和实践是一致的.在实践中,呵呵. ——(应该是)爱因斯坦(说的) (INFO:本文中不会出现公式,请放心阅读) AES 256被破解了? 对于TLNR(Too Long, No ...
- 机器学习 —— 基础整理（三）生成式模型的非参数方法： Parzen窗估计、k近邻估计；k近邻分类器
本文简述了以下内容: (一)生成式模型的非参数方法 (二)Parzen窗估计 (三)k近邻估计 (四)k近邻分类器(k-nearest neighbor,kNN) (一)非参数方法(Non-param ...
- linux服务器部署jar包以及shell脚本的书写
背景:记录在linux环境下部署jar程序的过程 1 部署过程记录 1.1 程序结构 这里的main函数就在DemRest2.java 文件中. 为了部署方便,要做到以下两点: 1 在导出的jar包中 ...
- bazel 测试过程
google的bazel如日中天,尽管我觉得make已经很好用,但是还是尝试一下,记录之. 首先,从 https://github.com/bazelbuild/bazel/releases 下载对应 ...
- CentOS 7.3.1611系统安装配置图解教程
操作系统:CentOS 7.3.1611 IP地址:192.168.21.130 网关:192.168.21.2 DNS:8.8.8.8 8.8.4.4 备注: CentOS 7.x系列只有64位系统 ...
- cin问题 分类： c++ 2014-08-02 21:13 38人阅读 评论(0) 收藏
string s: while(cin>>s){ cout<<s<endl; } 当输入ss w ww w w 按enter时 输出为 ss w ww w ...
- Java实现简单文件过滤器
输入路径查找该路径下的指定文件类型的文件 代码思路: 想要循环遍历文件夹下所有子文件夹,就要用到递归. 首先判断路径是否存在: 是:获取文件 判断是否文件夹: 是:调用自身,继续获取子文件夹下内容 否 ...
- Mybatis 的分页条件查询语句编写
刚来到一家新公司, 翻看项目代码, 发现一位同事写的查询逻辑很好, 不用插件, 一个语句完成了分页条件查询. 而我之前一般都是在业务层对参数进行判断, 如果有条件,就调用条件查询的方法, 如果没有条件 ...
- 【整理】01. localhost_access_log 记录post请求参数
环境:apache-tomcat-7.0.57 利用Filter过去request请求参数 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 ...
- python教程6-3：排序
(a).输入一串数字.并从大到小排列. (b).跟a一样,不过要用字典序从大到小排列. python35 PaiXu_6_3.py PaiXu_6_3.py #coding=utf-8 import ...