zoukankan      html  css  js  c++  java
  • AngularJs学习第一课 Hello World

          首先先介绍一下: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

  • 相关阅读:
    gitlab + gitlab-runner 实现项目的自动化部署测试环境与打包
    docker 部署 zookeeper 集群
    CSS 使用id属性的规则
    SimpleXML使用详解
    PHP通用分页类
    MYSQL远程连接速度慢的解决方法
    远程连接mysql出现1045错误的解决办法
    Bootstrap 元素居中设置
    PHP 时间戳
    html代码/如何做到有横线无竖线的表格/或横线有颜色/竖线没颜色
  • 原文地址:https://www.cnblogs.com/houziwty/p/AngularJs.html
Copyright © 2011-2022 走看看