入职15天,Angular2 小记!
ng 配置
@ngModule({
imports: [ BrowserModule ], //导入模块
declarations: [ AppComponent ], //导入组件
providers: [ ] //导入服务(service)
})
在app主模块下
app.module 引入大模块的集合
====》
import {SmartadminLayoutModule} from "./shared/layout/layout.module";
app.routing 引入/定义 根路由
定义一个product的模块
(product模块下的组件所依赖的辅助模块,需要在导入到product.module)
1.创建product模块和路由
ng g module +product/product --routing --flat
2.在+product下创建组件, 如:category
ng g component +product/+category/category --flat
product.module会自动引入该组件
3.路由跳转 product-routing
一 引入category组件
二 定义category路由
{
path: 'category',
component: 'CategoryComponent',
data: { pageTitle: '分类' } //传入数据
}
4.组件的用法 category
一 调用API数据
先创建一个product.service
在里面定义一个获取API数据的方法
getCategories(): Observable<any> {
return this.http.JsonApi('/product/category.json');
};
在product.module中引入该服务
import { ProductService } from './product.service';
provides: [ ProductService ] //依赖注入
在category.component.ts中引入该服务
import { ProductService } from './product.service';
实例化该服务
constructor(
private productService: ProductService
){ }
ajax调用, 获取数据
this.productService.getCategories()
入职15天,Angular2 小记!的更多相关文章
- 新人入职100天,聊聊自己的经验&教训
这篇文章讲了什么? 如题,本屌入职100天之后的经验和教训,具体包含: 对开发的一点感悟. 对如何提问的一点见解. 对Google开发流程的吐槽. 如果你 打算去国外工作. 对Google的开发流程感 ...
- Blog 入职新公司的一些吐槽!
入职公司已经两个星期了,说真的也很惭愧.我们这小批入职的一共六个人,五个人是实习生,我是唯一一个社招. 所以 我要吐槽 !! 吐槽1 人家都是90后(TAT) 其实真的不要觉得年龄是压力!看看路边KF ...
- google开发新人入职100天,聊聊自己的经验&教训 个人对编程和开发的理解 技术发展路线
新人入职100天,聊聊自己的经验&教训 这篇文章讲了什么? 如题,本屌入职100天之后的经验和教训,具体包含: 对开发的一点感悟. 对如何提问的一点见解. 对Google开发流程的吐槽. 如果 ...
- M公司入职记
非常遗憾,我又跳槽了,到传说中的M公司,第一天就体会到了,神马叫差距. 要求9点30到,提前10分钟到了前台.前台MM懵懂的跟我说入职找人事,好吧. 电话联系相关人等,等到10点左右,被引导到一位不知 ...
- 成功入职ByteDance,分享我的八面面经心得!
今天正式入职了字节跳动.办公环境也很好,这边一栋楼都是办公区域.公司内部配备各种小零食.饮料,还有免费的咖啡.15楼还有健身房.而且公司包三餐来着.下午三点半左右还会有阿姨推着小车给大家送下午茶.听说 ...
- Java实习生入职测试
网络上一度流行的Java实习生入职测试题,可以看看. 1.String类为什么是final的. 2.JDK8的HashMap的源码,实现原理,底层结构 3.反射中,Class.forName和clas ...
- 看了这个Java实习生入职测试题后,幸亏我不是实习生
看了这个Java实习生入职测试题后,幸亏我不是实习生 一个Java实习生的入职测试题,你能答对几个? 今天在某APP中看到,有实习生放出的Java实习生入职测试题.看完之后,很庆幸自己不是实习生. 本 ...
- 我,35岁Android开发,高龄入职鹅厂,试用期未过被劝退......今年实惨
今天,笔者盘点.综合分享一位腾讯员工的"心声".这份心声中干货还是不少的,主要关于腾讯的一些职场生活--希望这些"干货"能对你有所帮助. 什么部门?给补偿吗? ...
- 初入职场的建议--摘自GameRes
又开始一年一度的校招了,最近跑了几个学校演讲,发现很多话用短短的一堂职业规划课讲还远远不够,因为那堂课仅仅可能帮大家多思考怎样找到一份合适的工作,并没有提醒大家怎样在工作中发展自己的职业. 见过这么多 ...
随机推荐
- Zepto源码分析-动画(fx fx_method)模块
源码注释 // Zepto.js // (c) 2010-2015 Thomas Fuchs // Zepto.js may be freely distributed under the MIT l ...
- 微信小程序 生命周期函数详解
微信小程序 生命周期函数 小程序中 判断当前首页是从其他页面返回,还是由入口打开 由于小程序的数据在我们退出小程序时并没有得到释放,因此再次点击开来数据依然没有变成初始化 解决方法:在小程序 data ...
- 【T-SQL进阶】02.理解SQL查询的底层原理
本系列[T-SQL]主要是针对T-SQL的总结. [T-SQL基础]01.单表查询-几道sql查询题 [T-SQL基础]02.联接查询 [T-SQL基础]03.子查询 [T-SQL基础]04.表表达式 ...
- java基础之数组常用操作
常用的对数组进行的操作 1.求数组中最大值,最小值 思路:假设下标为0的元素是最大值,遍历数组,依次跟max进行比较,如果有元素比这个max还大,则把这个值赋给max.最小值同样 public cla ...
- [HDU1020] Encoding - 加密
Problem Description Given a string containing only 'A' - 'Z', we could encode it using the following ...
- JavaScript实现上传图片预览[js前端实现]
<body> <input type="file" id="file_input" onchange="show_image()&q ...
- Codility---MaxProfit
Task description A zero-indexed array A consisting of N integers is given. It contains daily prices ...
- Nmap脚本引擎原理
Nmap脚本引擎原理 一.NSE介绍 虽然Nmap内嵌的服务于版本探测已足够强大,但是在某些情况下我们需要多伦次的交互才能够探测到服务器的信息,这时候就需要自己编写NSE插件实现这个功能.NSE插件能 ...
- python基础之字典dict和集合set
作者:tongqingliu 转载请注明出处:http://www.cnblogs.com/liutongqing/p/7043642.html python基础之字典dict和集合set 字典dic ...
- mac os 安装 wget
1. brew安装: ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/inst ...