首先先介绍一下:AngularJS是干什么的。

AngularJS是为了克服HTML在构建应用上的不足而设计的。HTML是一门很好的为静态文本展示设计的声明式语言，但要构建WEB应用的话它就显得乏力了。所以我做了一些工作（你也可以觉得是小花招）来让浏览器做我想要的事。

开始学习AngularJs，先创建一个经典应用程序"Hello World"

使用你最喜欢的编译器，创建一个HTML文件，例如angulary.html

源码:

<html>
   <head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
   </head>
   <body ng-app>
    <div>
      <input type="text" ng-model="World" placeholder="Enter a name here">
      <h1>Hello, {{World}}!</h1>
    </div>
   </body>
</html>

运行HelloWorld 效果:

输入文字之前

输入文字之后

下面我们介绍一下我们都干了什么?

ng-app

ng-model="World"

{{World}}

首先 要写上最重要的部分 元素的ng-app属性。少了这个属性，AngularJS就没法开始工作。

ng-app可以放到<html>标签中也可以放到 当前<div>中。

其次，我们告诉AngularJS，对页面上的“World”也就是在输入时候的 ng-model="World"属性， 这个Model进行双向数据绑定。<input type="text" ng-model="World" placeholder="Enter a name here">

最后，我们告诉AngularJS，在“{{ World}}”这个指令模版上显示“World”这个Model的数据。

希望此文章对大家学习AngularJS有所帮助，本人能力有限，文章有不足之处欢迎指正。

本次学习来自伯乐在线的 七步AngularJS

AngularJs学习第一课 Hello World的更多相关文章

  1. AngularJS学习第一课

    AngularJS2与AngularJS1有很大的不同. AngularJS2支持ECMAScript6,为了提升性能,支持移动化开发(安卓.ios平台),因此升级为AngularJS 2,Angul ...

  2. Magento学习第一课——目录结构介绍

    Magento学习第一课--目录结构介绍 一．Magento为何强大 Magento是在Zend框架基础上建立起来的,这点保证了代码的安全性及稳定性.选择Zend的原因有很多,但是最基本的是因为zen ...

  3. Elasticsearch7.X 入门学习第一课笔记----基本概念

    原文:Elasticsearch7.X 入门学习第一课笔记----基本概念 版权声明:本文为博主原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明. 本文链接:https: ...

  4. MFC学习-第一课 MFC运行机制

    最近由于兴趣爱好,学习了孙鑫的MFC教程的第一课.看完视频了,自己便用visual studio 2010尝试了MFC编程,其中遇到了一些问题. 1.vs2010不像vs6.0那样可以新建一个空的MF ...

  5. python学习第一课要点记录

    写在要点之前的一段话,留给将来的自己:第一次参加编程的培训班,很兴奋很激动,之前都是自己在网上找免费的视频来看,然后跟着写一些课程中的代码,都是照着模子写,没有自己过多的思考.感觉这样学不好,除了多写 ...

  6. python学习第一课

    第一课: 1.不要使用来路不明的软件 2.下载杀毒软件 3.不懂技术的人在技术人面前会显得愈发无知 4.python无所不能 需要掌握的知识: 1.python基本语法 2.文件处理 3.函数 4.模 ...

  7. angularjs学习第一天笔记

    您好,我是一名后端开发工程师,由于工作需要,现在系统的从0开始学习前端js框架之angular,每天把学习的一些心得分享出来,如果有什么说的不对的地方,请多多指正,多多包涵我这个前端菜鸟,欢迎大家的点 ...

  8. Kotlin学习第一课：从对比Java开始

    1. 介绍 今年初,甲骨文再次对谷歌所谓的安卓侵权使用Java提起诉讼,要求后者赔偿高达90亿美元.随后便传出谷歌因此计划将主力语言切换到苹果主导的Swift,不过这事后来没了跟进. 但谷歌在这两天的 ...

  9. Asp.net MVC4高级编程学习笔记-视图学习第一课20171009

    首先解释下:本文只是对Asp.net MVC4高级编程这本书学习记录的学习笔记,书本内容感觉挺简单的,但学习容易忘记,因此在边看的同时边作下了笔记,可能其它朋友看的话没有情境和逻辑顺序还请谅解! 一. ...

随机推荐

  1. Java-集合=第五题 （Map）设计Account 对象如下： private long id; private double balance; private String password; 要求完善设计，使得该Account 对象能够自动分配id。 给定一个List 如下： List list = new ArrayList(); list.add(new A

    第五题 (Map)设计Account 对象如下: private long id; private double balance; private String password; 要求完善设计,使得 ...

  2. 封装WebAPI客户端，附赠Nuget打包上传VS拓展工具

    一.前言 上篇< WebAPI使用多个xml文件生成帮助文档 >有提到为什么会出现基于多个xml文件生成帮助文档的解决方案,因为定义的模型可能的用处有: 1:单元测试 2:其他项目引用(可 ...

  3. 【WP8.1开发】基于应用的联系人存储

    上一篇文章所吹的牛是访问系统(手机)上的联系人,当然那只是读不能改,这是自然的,要是让你能随便修改用户的联系人信息的话,那后果很严重,有些恶意开发者就有可能把”你的户口改成猪“. 但是,API也允许应 ...

  4. 选择排序java代码

    /** * 选择排序 * * 原理:将最小值与数组第1个即array[0]交换,第二次则忽略array[0],直接从array[1]至array[array.length-1]中 * 选择出最小值与a ...

  5. Java多线程系列--“JUC原子类”02之 AtomicLong原子类

    概要 AtomicInteger, AtomicLong和AtomicBoolean这3个基本类型的原子类的原理和用法相似.本章以AtomicLong对基本类型的原子类进行介绍.内容包括:Atomic ...

  6. Testing - 测试基础 - 流程

    测试存在于各个阶段: 需求测试--->单元测试--->集成测试--->系统测试--->性能测试--->用户测试--->回归测试 需求测试 完整性&正确性 一 ...

  7. webpack打包压缩工具的使用方法

    具体使用方法参考来源http://www.cnblogs.com/Leo_wl/p/4793722.html 必须注意的地方: 一.webpack在nodejs环境下运行 二,每个目录下都必须有一个w ...

  8. node.js下LDAP查询实践

    目标: 从一个LDAP Server获取uid=kxh的用户数据 LDAP地址为:ldap://10.233.21.116:389 在工程根目录中,先npm一个LDAP的访问库ldpajs npm i ...

  9. petapoco sql语句参数化 插入邮箱地址

    直接上代码,我是这样插入信息的 string sql = string.Format(@" INSERT INTO T_Log ( UserId , ProValue ) VALUES ( ...

  10. 基于<MediaElement>的WPF视频播放器（可拖拽进度条播放）【1】

    一.前言       前两天上峰要求做一个软件使用向导,使用WPF制作.这不,这两天从一张白纸开始学起,做一个播放演示视频的使用向导.以下是粗设计的原型代码: 二.效果图 三.代码 前台代码: < ...