前言:angular的官方教程真的不错。强烈推荐!!!】

按照环境搭建教程新建一个项目:

项目的结构如下:

其中package.json指示node需要安装的插件(npm install指令会安装的插件全部根据这个文件)

app.component.ts是我们主要编辑的文件。

我们看看他所用的语言:TypeScript——JavaScript的超集。并且顾名思义:有Type的script,不像JavaScript那么弱,都是var

TypeScript有class:

class中的属性可以有不同类型:

通过模板和数据绑定将数据显示到前台:

修改模板:

当我们修改hero.name时,h2中的并未修改,我们需要双向数据绑定!

编辑app.module.ts,引入FormsModule组件

修改input标签:

完成了这一切的你是否在想:这太麻烦了,我通过dom操作就能实现这所谓的双向绑定,这个Angular要学点node还要学typescript真烦~~

可你不觉得typescript很cool吗?他可是c#之父制作的

AngularJS2之Angular正式初探的更多相关文章

  1. angular.js初探

    2015年7月27日 22:26:35 星期一 用在我论坛里的小栗子: 先列出来一级回帖, 点击帖子前边的"查看回复"按钮无刷新的去请求该帖子的所有回复 首先要引用js文件, 我这 ...

  2. Angular 2项目的环境配置和项目搭建

    AngularJS2 发布于2016年9月份,它是基于ES6来开发的. AngularJS2 是一款开源JavaScript库,由Google维护,用来协助单一页面应用程序运行.AngularJS2 ...

  3. angularjs link compile与controller的区别详解,了解angular生命周期

     壹 ❀ 引 我在 angularjs 一篇文章看懂自定义指令directive 一文中简单提及了自定义指令中的link链接函数与compile编译函数,并说到两者具有互斥特性,即同时存在link与c ...

  4. angular2入门,就这一篇就够了

    背景与概念: AngularJS2 是一款开源JavaScript库,由Google维护,用来协助单一页面应用程序运行. AngularJS2 是 Angular 1.x 的升级版本,性能上得到显著的 ...

  5. ionic4 混合移动开发 (前世今生)

    ionic 从2016年初识,经历了 ionic2 ionic3.至今 ionic4,终于在2018年7月份发布了测试版. ionic Framework 可以说得上是最接近原生app的ui组件,漂亮 ...

  6. Ionic Framework 4 介绍

    Ionic Framework 4是一个开源UI工具包,用于使用Web技术(HTML,CSS和JavaScript)构建高性能的高质量移动和桌面应用程序.Ionic Framework专注于前端用户体 ...

  7. Ionic创建混合App(一)

    前言 最近公司要开始做App项目,最终选定了ionic开发方案,在这里我将学习的过程记录在这里,一方面避免自己忘记,另一方面方便大家交流学习.这里我们采用的是 Ionic2 + Angular2 : ...

  8. angularJS中$http.get( ).success( )报错原因及解决方案

    一.问题描述: 电脑安装的angular1.6.7版本,项目中使用了$http.get( ).success( ),控制台报错: $http.get(...).success is not a fun ...

  9. 迈向angularjs2系列(8):angular cli和angular2种子项目

    文章目录 1.angular cli快速搭建项目 2.angular2-seed 3.手动配置 题外话:如何更好的阅读本篇文章 一: angular cli的安装 Angular-cli(命令行界面, ...

随机推荐

  1. cocos2dx对于强大的RichText控制

    最近准备做一个聊天系统,开始准备使用cocos2dx的UIRichText控制显示屏聊天,在使用中发现的结果,cocos2dx的RichText很有限.全然不具备实现聊天的功能.仅仅实现了增加文本.图 ...

  2. ASP.NET MVC 例子演示如何在 Knockout JS 的配合下,使用 TypeScript 。

    一个简单的 ASP.NET MVC 例子演示如何在 Knockout JS 的配合下,使用 TypeScript . 前言 TypeScript 是一种由微软开发的自由和开源的编程语言.它是JavaS ...

  3. win7 64位系统装oracle11 提示环境变量path 值超过1023字符

    win7 64位系统装oracle10 提示环境变量path 值超过1023字符 1.提示环境变量path 值超过1023字符. 方案: 1.oracle安装文件,右键属性--设置兼容性--兼容XP ...

  4. MFC双缓冲和裁剪问题导致闪烁

    问题描述: 应用场景:在对话框中,自定义一个MFC图形控件(为了描述方便,暂定为HSPaintControl),控件覆盖整个对话框的客户区,属于最底层的控件,在这之上放置了很多其他的小图形控件. 问题 ...

  5. Go语言搭建自己的博客

    我是如何用Go语言搭建自己的博客的   前言: 话说,已经很久没有在博客园更新博客了,之前写的关于go语言的系列学习文章<让我们一起Go>也由于种种原因一度中断.但是,正如我之前在文章中所 ...

  6. 如何解决 Django中出现的 [Errno 13] Permission denied问题

    环境:linux 如果你使用了Apache部署了Django项目,在上传文件时可能会出现 “[Errno 13] Permission denied:某目录”的错误. 这是因为apache没有权限在该 ...

  7. url路径

      /:表示根目录(最原始开头的那个目录): ~/:表示虚拟站点根目录: ../:表示上级目录(当前目录的上一级),相当于在当前目录按了一次后退键: ../../:表示上上级目录: ./:当前目录(当 ...

  8. iOS使用自定义字体的方法(内置和任意下载ttf\otf\ttc字体文件)

    最近做了个有关阅读的应用,使用了自定义字体,学习了一下这方面的知识. 1.首先是最简单也普遍的做法,打包内置字符库文件: 把字体库文件添加到工程,如font1.ttf添加到工程,然后在工程plist添 ...

  9. js定义类或对象

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  10. 编译linux内核时出错

    在编译linux内核的时候使用make menuconfig 可能出现下面的错误 *** Unable to find the ncurses libraries or the*** required ...