Angular2入门--架构概览
Angular 介绍
Angular 是一款来自谷歌的开源的web前端框架,诞生于2009年,是一款优秀的前端JS框架,已经被用于谷歌的多款产品。
Angular 基于Typescript开发 ,更适合中大型企业级的项目。
学习Angular的必备基础
html、css、js、es6、Typescript.
载入需要的库
推荐使用npm来作为包的管理工具
组件
component定义对象是一个angular组件,接收一个包含两个属性的配置对象
selector:为HTML元素定义了一个CSS选择器my-app
template: 属性容纳着组件的模板
@Component{
selector:‘my-app’,
templateUrl: ''
}
模块
angular应用都是模块化的
Class定义对象
在Class方法中,我们可以给组件添加属性和方法
定义一个Class类
定义一个构造函数
.Class({
constructor: function(){}
})
添加NgModule
angular应用是由angular模块组成
app.AppModule = ng.core.NgModule({
imports: [ ng.platformBrowser.BrowserModule ],
declarations: [ app.AppComponent ],
bootstrap: [ app.AppComponent ]
})
启动应用
添加app/main.js文件
我们需要两样东西来启动应用:
1.angular的platformBrowserDynamic().bootstrapModule 函数
2.应用根模块Appmodule
执行过程为:当angular在main.js中调用bootstrapModule函数时,它读取AppModule的元数据,在启动组件中找到AppComponent并找到my-app选择器,定位到元素,然后在这个标签之间载入内容。
Angular2 Typescript
Typescript是一种由微软开发的自由开源的编程语言,它是JavaScript的一个超集,扩展了JavaScript的语法。
数据绑定
有两种类型的数据绑定:
1. 事件绑定 让你的应用可以通过更新应用的数据来响应目标环境下的用户输入。
2. 属性绑定 让你将从应用数据中计算出来的值插入到HTML中。
Angular 支持双向数据绑定,这意味着DOM中发生的变化同样可以反映回你的程序数据中。
依赖注入
依赖注入器会为组件提供一些服务,比如路由器服务就能让你定义如何在视图之间导航。
Angular2入门--架构概览的更多相关文章
- Angular2入门-架构总览
▓▓▓▓▓▓ 大致介绍 在3月23日,Angular4正式发布(没有3).似乎现在学Angular2又晚了,又晚一步-_-||.Angular2在Angular1的基础上有了较大的改变.之前向一个同学 ...
- Angular2入门系列教程7-HTTP(一)-使用Angular2自带的http进行网络请求
上一篇:Angular2入门系列教程6-路由(二)-使用多层级路由并在在路由中传递复杂参数 感觉这篇不是很好写,因为涉及到网络请求,如果采用真实的网络请求,这个例子大家拿到手估计还要自己写一个web ...
- Angular2入门系列教程6-路由(二)-使用多层级路由并在在路由中传递复杂参数
上一篇:Angular2入门系列教程5-路由(一)-使用简单的路由并在在路由中传递参数 之前介绍了简单的路由以及传参,这篇文章我们将要学习复杂一些的路由以及传递其他附加参数.一个好的路由系统可以使我们 ...
- Angular2入门系列教程5-路由(一)-使用简单的路由并在在路由中传递参数
上一篇:Angular2入门系列教程-服务 上一篇文章我们将Angular2的数据服务分离出来,学习了Angular2的依赖注入,这篇文章我们将要学习Angualr2的路由 为了编写样式方便,我们这篇 ...
- Angular2入门系列教程4-服务
上一篇文章 Angular2入门系列教程-多个组件,主从关系 在编程中,我们通常会将数据提供单独分离出来,以免在编写程序的过程中反复复制粘贴数据请求的代码 Angular2中提供了依赖注入的概念,使得 ...
- Asp.net mvc项目架构分享系列之架构概览
Asp.net mvc项目架构分享系列之架构概览 Contents 系列一[架构概览] 0.项目简介 1.项目解决方案分层方案 2.所用到的技术 3.项目引用关系 系列二[架构搭建初步] 4.项目架构 ...
- Angular(01)-- 架构概览
声明 本系列文章内容梳理自以下来源: Angular 官方中文版教程 官方的教程,其实已经很详细且易懂,这里再次梳理的目的在于复习和巩固相关知识点,刚开始接触学习 Angular 的还是建议以官网为主 ...
- Python -- Scrapy 架构概览
架构概览 本文档介绍了Scrapy架构及其组件之间的交互. 概述 接下来的图表展现了Scrapy的架构,包括组件及在系统中发生的数据流的概览(绿色箭头所示). 下面对每个组件都做了简单介绍,并给出了详 ...
- Apache Beam的架构概览
不多说,直接上干货! Apache Beam是一个开源的数据处理编程库,由Google贡献给Apache的项目,前不久刚刚成为Apache TLP项目.它提供了一个高级的.统一的编程模型,允许我们通过 ...
随机推荐
- 1.2 rust cargo
cargo是rust的编译与打包工具,可将rust打包成为一个可执行性文件.生成的可执行性文件不能跨系统的大版本,比如在linux7上打包,那么程序无法在linux6上执行. # cargo new ...
- thinkPHP5.0验证码不显示
1.使用composer安装时,验证码无法正常显示 主要是因为验证码扩展库的版本安装不正常,官方的5.0版本的扩展库版本号都是1.*,默认安装的是2.0版本,2.0版本均为ThinkPHP5.1版本专 ...
- Python Pandas Merge, join and concatenate
Pandas提供了基于 series, DataFrame 和panel对象集合的连接/合并操作. Concatenating objects 先来看例子: from pandas import Se ...
- 时间戳date 命令
时间戳date 命令 [chenxiaohao@iZbp1c0q444r0hp2gq8lhmZ server]$ echo $(date +%Y%m%d) ——————>今天 2018032 ...
- pageX,clientX,offsetX,screenX,offsetLeft,style.left,offsetWidth,scrollWidth的区别以及使用详解
https://www.cnblogs.com/echolun/p/9231760.html
- SQL Server Reporting Service(SSRS) 第五篇 自定义数据处理扩展DPE(Data Processing Extension)
最近在做SSRS项目时,遇到这么一个情形:该项目有多个数据库,每个数据库都在不同的服务器,但每个数据库所拥有的数据库对象(table/view/SPs/functions)都是一模一样的,后来结合网络 ...
- Silverlight TreeView 带 checkbox和图片
前段时间做Silverlight TreeView 控件,但是要带checkbox和图片,在网上到处找相关的例子,效果图如下 xaml代码 <UserControl x:Class=" ...
- Android Studio CMake 生成多个so
生成多个so案例 这里stringFromJNI和stringFromJNI11分别是调用one-lib和two-lib两个so package com.test.ndkmoreso; import ...
- mysql忘记密码时,重新修改密码
错误描述 1045 access denied for user 'root'@'localhost' using password yes 1045 access denied for user ' ...
- PlayMaker 状态机FSM重用
注意:playmaker做模板的时候不应该有拖入的东西,这样保存模版后会报错,提示容易丢失东西.