1.安装node.js

  官网下载安装

  npm会跟着被自动安装

2.安装Angular工具(AngularCli)

  1.使用npm安装

    npm install -g @angular/cli

  2使用cnpm安装

    1)使用淘宝npm镜像安装cnpm

       npm install -g cnpm --registry=https://registry.npm.taobao.org

    2)使用cnpm安装AngularCli

      npm install -g @angular/cli

3.安装Visual Studio Code

  官网下载安装

4.Angular命令

  1)新建项目:ng new angulardemo

    

  2)安装依赖:cnpm install

    意思就是把项目中package.json指定的依赖包下载到本地,生成的文件夹为node_modules

  3)启动项目:ng serve --open

  4)创建组件:ng g component components/header

    这里为了方便查看,将自定义组件存在在components里面

    

    而且,为了保证组件能用,应该在 app.module.ts 这个文件引入并配置

    

  5)创建其他内容

    

5.Angular 数据交互

  1)随便举些例子,当笔记

    ts文件定义好数据

import { Component, OnInit } from '@angular/core';

@Component({
selector: 'app-header',
templateUrl: './header.component.html',
styleUrls: ['./header.component.css']
})
export class HeaderComponent implements OnInit { // 定义一个属性
title = 'header'; // 定义一个boolen值
ShowTitle = true; // 定义一个属性,值为html
html = '<h2>这里是存放html的属性</h2>'; // 定义一个对象
obj = {
name: 'kxy'
}; // 定义一个数组
list = ['数学', '语文', '英语']; // 定义一个json数组
list1 = [
{
'Name': 'kxy',
'Sex': '男',
'Hobby': { 'Book': '小说', 'Game': 'DNF' }
},
{
'Name': 'flt',
'Sex': '女',
'Hobby': { 'Book': '不知道', 'Game': '王者荣耀' }
}
]; getTitle() {
alert(this.title);
}
ChangeShowTitle() {
this.ShowTitle = !this.ShowTitle;
}
KeyUpEvent(e) {
console.log(e);
}
constructor() { } ngOnInit() { // 生命周期函数,加载应用触发
}
}

    html如下

<p>
header works!
</p>
<!-- 用双大括号可以直接使用ts数据 -->
<a>{{title}}</a> <!-- 标签里面的属性可以用以下两个方法调用数据,效果一样 -->
<div title="{{title}}">title属性,鼠标瞄上去可以查看</div>
<div [title]="title">title属性,鼠标瞄上去可以查看</div> <!-- 读取html不能直接用大括号,需要用到innerHtml属性 -->
<div [innerHtml]="html"></div> <!-- 循环数组 -->
<ul>
<li *ngFor="let item of list">{{item}}</li>
</ul> <!-- 获取数组索引值 -->
<ul>
<li *ngFor="let item of list;let key=index">{{key}}--{{item}}</li>
</ul> <!-- 循环json数组 -->
<ul>
<li *ngFor="let item of list1">
{{item.Name}}_{{item.Sex}}
<ol>
喜欢的书籍:{{item.Hobby.Book}}
<br>
喜欢的游戏:{{item.Hobby.Game}}
</ol>
</li>
</ul>
<hr> <!-- 调用函数 -->
<button (click)="getTitle()">点击我</button>
<hr> <!-- 判断语句 -->
<div *ngIf="ShowTitle">{{title}}</div>
<button (click)="ChangeShowTitle()">显示《_》隐藏</button>
<hr> <!-- 键盘按钮弹起触发,注入 事件对象$event ,ts获取的数据可以在控制台查看 -->
<input type="text" (keyup)="KeyUpEvent($event)">

  2)双向数据绑定

  需要先在app.module.ts里面引入

import { FormsModule } from '@angular/forms';

  还得在imports里面声明一下

  html如下:

<!-- 双向数据绑定 -->
<input type="text" [(ngModel)]="title">
{{title}}

  在我们修改页面title的值时,ts文件也会对应的修改(中括号表示属性,小括号表示事件)

  3)服务

  例子:

    添加一个服务:ng g service services/storage

    代码上面表格也有。

    并且需要在app.module里面引入

    

    且使用这个服务的组件也需要引入,才可以使用

      import { StorageService } from '../../services/storage.service';

6.Http网络请求

  老规矩,在app.module里面添加引用

  

  并且需要在组件引入

import { Http,Headers } from '@angular/http';

  在类中定义属性,并使用构造函数注入

  http: Http;
headers: Headers;
jsondata: any;
constructor(_http: Http, _jsonp: Jsonp) {
this.http = _http;this.headers = new Headers({ 'Content-Type': 'application/json' });
}

  get请求函数:

  httpRequestData() {
let url;
url = 'http://localhost:53876/api/weather/current/80005';
this.http.get(url).subscribe(
function (data) {
this.jsondata = JSON.parse(data['_body']);
console.log(this.jsondata['data']);
},
function (error) {
console.log('error');
});
}

  Post请求函数:

  httpPostRequestData() {
let url;
url = 'http://localhost:53876/api/weather/广州';
this.http.post(
url,
JSON.stringify({ city: '广州' }),
{ headers: this.headers }).subscribe(
function (data) {
console.log(data);
},
function (error) {
console.log('error');
});
}

Angular4的更多相关文章

  1. Angular4.0.0正式版发布

    来源于angular4.0.0发布时的公告,译者:niithub 原文发布时间:Thursday, March 23, 2017 翻译时间:2017年3月24日 angular4.0.0正式版现在可以 ...

  2. Angular杂谈系列2-Angular2升级Angular4指南

    什么什么?Angualr4都发布了,之前不都才Angualr2的么?又要推翻重来,啊? 那当然不是,Angualr4只是一个版本号而已,本质上还是Angular2:以后,谷歌把新版本的Angualr称 ...

  3. Ionic2 + Angular4 + JSSDK开发中的若干问题汇总

    前景 目前微信公众号程序开发已经相当火热,客户要求自己的系统有一个公众号,已经是一个很常见的需要. 使用公众号可以很方便的便于项目干系人查看信息和进行互动,还可以很方便录入一些电脑端不便于录入的数据, ...

  4. angular4 JavaScript内存溢出问题 (FATAL ERROR: CALL_AND_RETRY_LAST Allocation failed - JavaScript heap out of memory)

    最近在写基于angular4的项目的时候,在build --prod的时候,突然措手不及的蹦出个报错,大致错误如下: 70% building modules 1345/1345 modules 0 ...

  5. angular2/angular4 如何通过$http的post方法请求下载二进制的Excel文件

    时间有限,废话就不多说了,直接上干货! 下面给大家介绍一下我遇到的一个坑,如果你也遇到了,那恭喜你,你一定能找到答案:angular2/angular4 如何通过$http的post方法请求下载二进制 ...

  6. Angular4 后台管理系统搭建(2) - flexgrid 单元格模板 wjFlexGridCellTemplate 的坑

    这几天中了很多坑,尤其是两个大坑.先是运行环境的坑,在是flexgrid单元格内部模板的坑.这里记录下. 一开始我遇见一些很奇怪的问题,按网上的说法,别人这么写代码都正常,就在我机器上不正常.按以前的 ...

  7. Angular4 后台管理系统搭建(1) - 建立一个通用的Wijmo5 flexgrid分页器组件

    17年4月,开始学习angular2,到5月跟着升级到angular4.目前还在学习,搭建中.我的最终目的是用angular4框架搭建一个后台管理系统.这里使用了三个关键的外部库. 1.使用admin ...

  8. 在Visual Studio 2017中使用Asp.Net Core构建Angular4应用程序

    前言 Visual Studio 2017已经发布了很久了.做为集成了Asp.Net Core 1.1的地表最强IDE工具,越来越受.NET系的开发人员追捧. 随着Google Angular4的发布 ...

  9. Angular4.0学习笔记 从入门到实战打造在线竞拍网站学习笔记之二--路由

    Angular4.0基础知识见上一篇博客 路由 简介 接下来学习路由的相关知识 本来是不准备写下去的,因为当时看视频学的时候感觉自己掌握的不错 ( 这是一个灰常不好的想法 ) ,过了一段时间才发现An ...

  10. Angular4.0从入门到实战打造在线竞拍网站学习笔记之三--依赖注入

    Angular4.0基础知识之组件 Angular4.0基础知识之路由 依赖注入(Dependency Injection) 正常情况下,我们写的代码应该是这样子的: let product = ne ...

随机推荐

  1. Fiddler 只取所需

    Fiddler每次打开的时候都会打开十多个会话,期望只想抓取自己想要的请求.   1)User Filters:启用过滤器 2)在Filers面板中勾选“Use Filters”,并在Hosts区域, ...

  2. RenderTree渲染树

    RenderTree渲染树对类中的静态成员有很重要的关系,这个和多态是有很重要的关系,举个简单的例子,在游戏中,马里奥需要渲染,蘑菇也需要渲染,怪兽也需要渲染,其是串在一个树上的,但是不同的类型怎么将 ...

  3. python对象初始化

    当python对象被创建以后,需要将对象进行初始化.Python有一个构造函数和一个初始化函数: 1.构造函数__new__,只接受一个参数,即类本身(它会在对象被构造之前调用,所以这里也就没有sel ...

  4. collections 数据结构模块namedtuple

    namedtuple类 导入模块 from collections import namedtuple 使用方法及说明 #pycharm 里按住 ctrl键点击 collections可查看源码 #c ...

  5. JDK动态代理和CGLIB代理的区别

    一.原理区别: java动态代理是利用反射机制生成一个实现代理接口的匿名类,在调用具体方法前调用InvokeHandler来处理. 而cglib动态代理是利用asm开源包,对代理对象类的class文件 ...

  6. Java中Sax解析XML

    SAX基于事件的解析,解析器在一次读取XML文件中根据读取的数据产生相应的事件,由应用程序实现相应的事件处理逻辑,即它是一种“推”的解析方式:这种解析方法速度快.占用内存少,但是它需要应用程序自己处理 ...

  7. Jenkins自动化部署war项目

    基于上一篇Jenkins安装环境,下面对自动打包部署做个备忘 1.安装:Publish over SSH 插件 2.安装完成后,进入下图配置 ↓↓↓ 3.翻到底下↓↓↓ 找到刚刚安装的Publish ...

  8. vue常用指令

    1.v-if系列 v-if="数据|判断" 只要条件成立,就显示if中的元素 v-else (注意:必须跟在v-if或者v-if-else的后面,不然失效) 如果if条件不成立显示 ...

  9. ava.io.InputStream & java.io.FileInputStream

    java.io.InputStream & java.io.FileInputStream java.io.InputStream,这个抽象类是表示字节输入流的超类,这个抽象类的共性的方法有: ...

  10. ArcGIS 常见错误

    1. 平面坐标转为大地坐标出错 提示是:找不到相关的要素 2. 当发现Shape文件或者Mdb内的文件有问题时,可以先将Shape文件导出,然后再导入,或许就可以解决其中的问题.