今天，主要开发首页，先看效果图，并分析结构。
经过分析首页 是由6大组件组成的，分别是 导航条组件、搜索组件、轮播图组件、商品组件、星级组件、页脚组件。
使用angular-cli命令行工具，在auction项目上创建这6个组件
ng g component navbar
ng g component footer
ng g component search
ng g component carousel
ng g component product
ng g component starts
然后在项目aution下的app目录下就会出现这个6个目录
然后使用 bootstrap框架里面的样式，与angular技术搭建出了一个完整的app首页
代码下载地址
本文已收录于以下专栏：
相关文章推荐
Git是什么？
Git是一个开源的分布式版本控制系统，用于敏捷高效地处理任何或小或大的项目。
Git 是 Linus Torvalds 为了帮助管理 Linux 内核开发而开发的一个开放源码的版本控制...
简介：git是一款免费、开源的分布式版本控制系统。
特点：git是一个开源的分布式版本控制系统、可以有效、高速的处理从很小到非常大的项目版本管理。
（1）、从github官网下载
人生苦短，都说必须python，那么我分享下我是如何从小白成为Python资深开发者的吧。2014年我大学刚毕业..
1、在angular工程项目 auction上安装 jquery类库、bootstrap框架
npm install jquery --save
npm install bootstrap --sa...
搭建好angular开发环境后，我们开始创建我们的项目 auction
1、使用 angular-cli命令行工具，创建我们的项目 auction
进入angular_work工作空间，D:\an...
1、创建产品(product)表
CREATE TABLE product
product_id CHAR(4) NOT NULL,
product_name VARCHAR(100) NOT N...
这是结合官方文档进行的angular4.0版本的学习笔记，与最新官方文档使用一致。这是官方最新的更新，没有了angular1.x向angular2.0那么重大的变化。
先附上官方的中文文档，大家也可...
最近搞到手了一部Angular4的视频教程,这几天正好有时间变学了一下,可以用来做一些前后端分离的网站,也可以直接去打包web app。
先上个效果图:
环境&版本信息声明
基础概念前端框架与前端类库
类库：函数集合。其内容是封装一些实现复杂功能的或可复用的代码，目的是提高编码工作的效率。举例：jQuery, GreenSock(JS动画库)，mootools（JS AP...
在使用vue一个多礼拜后，感觉现在还停留在初级阶段，虽然知道怎么和后端做数据交互，但是对于mounted这个挂载还不是很清楚的。放大之，对vue的生命周期不甚了解。只知道简单的使用，而...
他的最新文章
讲师：董西成
您举报文章：
举报原因：
原文地址：
原因补充：
(最多只允许输入30个字)1、判断数组中是否包含指定元素
[arr].contains([i])
Array.prototype.contains = function (obj) {
var i = this.
while (i--) {
if (this[i] == obj) {
&!DOCTYPE html&
&html lang=&zh-CN&&
&meta charset=&UTF-8&&
&title&蒙板&/title&
.container {
width: 900
margin: 50
text-align:
#myModel {
background-color: rgba(9, 9, 9, 0.63);
width: 100%;
height: 100%;
z-index: 1000;
.model-content {
width: 50%;
text-align:
background: #
border-radius: 6
margin: 100
line-height: 30
z-index: 10001;
&div class=&container&&
&button onclick=&showModel()&&弹出蒙板&/button&
&div id=&myModel& onclick=&closeModel()&&
&div class=&model-content&&
&p&你好啊,我是内容~~&/p&
&button id=&closeModel& onclick=&closeModel()&&关闭&/button&
function showModel() {
document.getElementById('myModel').style.display = 'block';
function closeModel() {
document.getElementById('myModel').style.display = 'none';
3、子页面关闭后自动刷新父页面
opener.location.reload()
4、获取所有选中的CheckBox的Name值
$('input:checkbox[name=check_content]:checked')
5、AngularJS 获取Scope
var scope = $('div[ng-controller=&precision-controller&]').scope();
6、获取Url中Request参数
$.getUrlParam = function (name) {
var reg = new RegExp(&(^|&)& + name + &=([^&]*)(&|$)&);
var r = window.location.search.substr(1).match(reg);
if (r != null) {
return unescape(r[2]);
$.getUrlParam(name)
7、时间字符转换函数
Date.prototype.format = function (format) {
&M+&: this.getMonth() + 1, //month
&d+&: this.getDate(), //day
&h+&: this.getHours(), //hour
&m+&: this.getMinutes(), //minute
&s+&: this.getSeconds(), //second
&q+&: Math.floor((this.getMonth() + 3) / 3), //quarter
&S&: this.getMilliseconds() //millisecond
if (/(y+)/.test(format)) {
format = format.replace(RegExp.$1, (this.getFullYear() + &&).substr(4 - RegExp.$1.length));
for (var k in o) {
if (new RegExp(&(& + k + &)&).test(format)) {
format = format.replace(RegExp.$1, RegExp.$1.length == 1 ? o[k] : (&00& + o[k]).substr((&& + o[k]).length));
[date].format(&yyyy-MM-dd hh:mm:ss&)
8、跟随滚动条固定顶部导航
//header 为导航上部元素
为导航元素
为下部主体内容元素
&script type=&text/javascript&&
var i = 0;
$(window).scroll(function () {
var s = $(window).scrollTop();
var headerHeight = $(&#header&).height();
var indexHeight = $(&.nav&).height();
if (s & headerHeight) {
$(&.nav&).css({ &position&: &absolute&, &top&: s, &width&: &100%&, &z-index&: 999 });
if (i == 0) {
$(&#main&).css({ &position&: &relative&, &top&: indexHeight, &width&: &100%& });
$(&.nav&).css({ &position&: &relative&, &top&: &0px& });
$(&#main&).css({ &position&: &relative&, &top&: &0px& });
阅读(...) 评论()后端开发，懂基本的HTML/JS/CSS，之前玩过angularjs，不懂TS，学出来效果如何呢？_Angular 4.0从入门到实战 打造股票管理网站-慕课网实战
后端开发，懂基本的HTML/JS/CSS，之前玩过angularjs，不懂TS，学出来效果如何呢？
您好，懂angularjs学依赖注入等知识会相对轻松些，最好是懂一点TS或者es6语法，学起来会更快。慕课网有一门《TypeScript入门》，同学你可以先学习一下，相信对你的angular学习之旅会事半功倍。如果对ts不了解，能够全程跟着老师一步步走的话，也是没有问题的，学习能够得到很大提升。
Copyright (C)
All Rights Reserved | 京ICP备 号-2依赖注入（Dependency Injection）
正常情况下，我们写的代码应该是这样子的：
let product = new Product();
// 实例化一个对象
createOrder(product);
// 调用方法传入商品对象，生成订单
createOrder方法依赖product类，但是createOrder方法自身并不知道也不能去创建一个product对象。我们把方法所需的对象实例化并当做参数传入，这个过程就成为把参数注入给这个方法。在此你可能看不出什么，但是如果依赖的对象比较多了呢？我们需要反复去new，反复去生成对象，然后传入到方法中......想想就是噩梦。
那么，能不能让某人替我们创建createOrder所依赖的对象和对象所依赖的其他对象呢？如果可以的话，那么，我们只需要写一句方法的调用即可，对象都将会呗自动创建好，并当做参数传递进去（想想就很美妙，懒人必备啊）。
也就是说，对象A只需要声明，我需要一个B类型的对象，那么这个对象就会从外部注入进来，这就是依赖注入要解决的问题。
与依赖注入经常同时出现的另一个概念叫做控制反转（Inversion Of Control），简称IOC。
控制反转是指将依赖的控制权从代码的内部转移到代码的外部，如上代码所示，方法所需的依赖是由方法的内部所决定的，如果需要改变依赖，就需要修改方法内部的代码，外面不管是传入Product的实例，还是传入Product子类的实例，是有方法外部决定的。
IOC着重描述目的；DI着重描述实现的方法，即如何去实现控制反转。实现了控制反转模式的框架被称为IOC容器。
实现依赖注入
那么如何在Angular中实现以来注入呢？
定义提供器
首先，使用命令行工具生成一个service，用于提供注入服务。
ng g service shared/product
由于product是共享的，所以放到了一个自定义的shared文件夹
接下来，对生成的服务进行编辑（由于当前没有对这个服务进行注册，显然不会生效）
import {Injectable} from '@angular/core';
@Injectable()
export class ProductService {
constructor() { }
getProduct(): Product {
return new Product(1, '小米Mix', 3999, '很666的手机');
* 定义一个Product商品类
export class Product {
constructor(public id: number, public title: string, public price: number, public desc: string) { }
下面，进入app.module，注册服务
providers: [ProductService],
在使用的时候（需要获取product对象的时候，直接在构造函数中声明需要Product类型的变量，即可完成注入。
constructor (product:Product){
这时候，注入提供器声明在了模块中，()中添加providers属性，这时候，作用域就变成了当前组件，并且组件中声明的提供器比模块的优先级更高
使用工厂声明提供器
如果在实例化类的时候需要传递参数，或需要进行一些操作去得到一个注入对象，那么使用工厂声明一个提供器是更好的解决办法。
providers: [{
provide: ProductService,
useFactory: () =& {
const dev = Math.random() & 0.5;
if (dev) {
return new Product(1, '小米6', 2999, '很6的手机');
return new Product(2, '小米mix', 3999, '很美的手机');
那么，如果工厂方法依赖一个LoggerService，我们如何去解耦合并把loggerServices注入到工厂方法呢？需要使用第三个参数：
providers: [{
provide: ProductService,
useFactory: (logger:LoggerService) =& {
const dev = Math.random() & 0.5;
if (dev) {
return new Product(1, '小米6', 2999, '很6的手机');
return new Product(2, '小米mix', 3999, '很美的手机');
deps:[LoggerService]
},LoggerService],
如此，即可实现工厂方法的依赖注入
使用具体的值定义提供器
providers: [{
provide: ProductService,
useFactory: (logger:LoggerService,appConfig) =& {
if (appConfig.isDev) {
return new Product(1, '小米6', 2999, '很6的手机');
return new Product(2, '小米mix', 3999, '很美的手机');
deps:[LoggerService,&APP_CONFIG&]
},LoggerService,{
provide:&APP_CONFIG&,
useValue:{isDev:false}
注意，被注入的类都需要有一个@Injectable()装饰器，这样才能被注入
那么你可能会疑惑了，angular组件控制器的类并没有@Injecdtable()装饰器，但是构造函数却能被注入，这是因为@component()装饰器的实现一键集成了@Injectable()
为了更容易理解，接下来实现一下手工注入：
import {Injector} from '@angular/core';
export class ProductComponent implements OnInit {
private product: ProductS
constructor(private injector: Injector) {
this.product = injector.get(ProductService);
Angular的依赖注入只有一个注入点，也就是构造函数。
阅读(...) 评论()