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入门--架构概览的更多相关文章

  1. Angular2入门-架构总览

    ▓▓▓▓▓▓ 大致介绍 在3月23日,Angular4正式发布(没有3).似乎现在学Angular2又晚了,又晚一步-_-||.Angular2在Angular1的基础上有了较大的改变.之前向一个同学 ...

  2. Angular2入门系列教程7-HTTP(一)-使用Angular2自带的http进行网络请求

    上一篇:Angular2入门系列教程6-路由(二)-使用多层级路由并在在路由中传递复杂参数 感觉这篇不是很好写,因为涉及到网络请求,如果采用真实的网络请求,这个例子大家拿到手估计还要自己写一个web ...

  3. Angular2入门系列教程6-路由(二)-使用多层级路由并在在路由中传递复杂参数

    上一篇:Angular2入门系列教程5-路由(一)-使用简单的路由并在在路由中传递参数 之前介绍了简单的路由以及传参,这篇文章我们将要学习复杂一些的路由以及传递其他附加参数.一个好的路由系统可以使我们 ...

  4. Angular2入门系列教程5-路由(一)-使用简单的路由并在在路由中传递参数

    上一篇:Angular2入门系列教程-服务 上一篇文章我们将Angular2的数据服务分离出来,学习了Angular2的依赖注入,这篇文章我们将要学习Angualr2的路由 为了编写样式方便,我们这篇 ...

  5. Angular2入门系列教程4-服务

    上一篇文章 Angular2入门系列教程-多个组件,主从关系 在编程中,我们通常会将数据提供单独分离出来,以免在编写程序的过程中反复复制粘贴数据请求的代码 Angular2中提供了依赖注入的概念,使得 ...

  6. Asp.net mvc项目架构分享系列之架构概览

    Asp.net mvc项目架构分享系列之架构概览 Contents 系列一[架构概览] 0.项目简介 1.项目解决方案分层方案 2.所用到的技术 3.项目引用关系 系列二[架构搭建初步] 4.项目架构 ...

  7. Angular(01)-- 架构概览

    声明 本系列文章内容梳理自以下来源: Angular 官方中文版教程 官方的教程,其实已经很详细且易懂,这里再次梳理的目的在于复习和巩固相关知识点,刚开始接触学习 Angular 的还是建议以官网为主 ...

  8. Python -- Scrapy 架构概览

    架构概览 本文档介绍了Scrapy架构及其组件之间的交互. 概述 接下来的图表展现了Scrapy的架构,包括组件及在系统中发生的数据流的概览(绿色箭头所示). 下面对每个组件都做了简单介绍,并给出了详 ...

  9. Apache Beam的架构概览

    不多说,直接上干货! Apache Beam是一个开源的数据处理编程库,由Google贡献给Apache的项目,前不久刚刚成为Apache TLP项目.它提供了一个高级的.统一的编程模型,允许我们通过 ...

随机推荐

  1. 1.2 rust cargo

    cargo是rust的编译与打包工具,可将rust打包成为一个可执行性文件.生成的可执行性文件不能跨系统的大版本,比如在linux7上打包,那么程序无法在linux6上执行. # cargo new ...

  2. thinkPHP5.0验证码不显示

    1.使用composer安装时,验证码无法正常显示 主要是因为验证码扩展库的版本安装不正常,官方的5.0版本的扩展库版本号都是1.*,默认安装的是2.0版本,2.0版本均为ThinkPHP5.1版本专 ...

  3. Python Pandas Merge, join and concatenate

    Pandas提供了基于 series, DataFrame 和panel对象集合的连接/合并操作. Concatenating objects 先来看例子: from pandas import Se ...

  4. 时间戳date 命令

    时间戳date  命令 [chenxiaohao@iZbp1c0q444r0hp2gq8lhmZ server]$ echo $(date +%Y%m%d)  ——————>今天 2018032 ...

  5. pageX,clientX,offsetX,screenX,offsetLeft,style.left,offsetWidth,scrollWidth的区别以及使用详解

    https://www.cnblogs.com/echolun/p/9231760.html

  6. SQL Server Reporting Service(SSRS) 第五篇 自定义数据处理扩展DPE(Data Processing Extension)

    最近在做SSRS项目时,遇到这么一个情形:该项目有多个数据库,每个数据库都在不同的服务器,但每个数据库所拥有的数据库对象(table/view/SPs/functions)都是一模一样的,后来结合网络 ...

  7. Silverlight TreeView 带 checkbox和图片

    前段时间做Silverlight TreeView 控件,但是要带checkbox和图片,在网上到处找相关的例子,效果图如下 xaml代码 <UserControl x:Class=" ...

  8. Android Studio CMake 生成多个so

    生成多个so案例 这里stringFromJNI和stringFromJNI11分别是调用one-lib和two-lib两个so package com.test.ndkmoreso; import ...

  9. mysql忘记密码时,重新修改密码

    错误描述 1045 access denied for user 'root'@'localhost' using password yes 1045 access denied for user ' ...

  10. PlayMaker 状态机FSM重用

    注意:playmaker做模板的时候不应该有拖入的东西,这样保存模版后会报错,提示容易丢失东西.