首先先介绍一下: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. 12．创建一个Point类，有成员变量x，y，方法getX(),setX()，还有一个构造方 法初始化x和y。创建类主类A来测试它。

    package java1; public class Point { int x; int y; Point(int x,int y) { this.x = x; this.y = y; } pub ...

  2. 说说null和undefined的那些事

    网上有很多关于null和undefined的解释,那么今天我们也来简单的聊聊null与undefined的话题,以便解开它们的神秘面纱,当然这这是简单的介绍,在日后会有相应的更新. 为什么用==的时候 ...

  3. 编译原理简单语法分析器（first,follow,分析表）源码下载

    编译原理(简单语法分析器下载) http://files.cnblogs.com/files/hujunzheng/%E5%8A%A0%E5%85%A5%E5%90%8C%E6%AD%A5%E7%AC ...

  4. hdu 1811Rank of Tetris (并查集 + 拓扑排序)

    /* 题意:这些信息可能有三种情况,分别是"A > B","A = B","A < B",分别表示A的Rating高于B,等于B ...

  5. Java Management extentsions（jmx）与tomcat

    1,概念:一个可以使用JMX管理器来管理的Java对象称为JMX管理资源(JMX manageable resource).事实上,一个JMX管理资源也可以是一个应用程序.一个实现或者一个服务.设备. ...

  6. WebStorm 9 自动编译 SCSS 产出 CSS 和 source maps

    1.  上一节我们学习了Windows下搭建Ruby开发环境,也为这一节的学习做了铺垫.因为本节需要在Ruby环境下安装SASS.详细请见:http://www.cnblogs.com/wind128 ...

  7. Java - IDE

    JDK安装及环境变量配置 下载安装对应版本的JDK 控制面板--->系统--->属性--->高级系统设置--->环境变量 新建系统变量JAVA_HOME 变量名:JAVA_HO ...

  8. Network - curl和Wget

    curl - transfer a URL curl SYNOPSIS curl [options] [URL...] DESCRIPTION curl is a tool to transfer d ...

  9. AngularJS入门心得2——何为双向数据绑定

    前言:谁说Test工作比较轻松,最近在熟悉几个case,差点没疯.最近又是断断续续的看我的AngularJS,总觉得自己还是没有入门,可能是自己欠前端的东西太多了,看不了几行代码就有几个常用函数不熟悉 ...

  10. ShineTime - 带有 CSS3 闪亮特效的缩略图相册

    ShineTime 是一个效果非常精致的缩略图相册,鼠标悬停到缩略图的时候有很炫的闪光效果,基于 CSS3 实现,另外缩略图也会有立体移动的效果.特别适用于个人摄影作品,公司产品展示等用途,快来来围观 ...