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

  • 相关阅读:
    吴军博士:物联网和人工智能将再造一个英特尔和微软 | 万物互联
    速来膜拜!20位活跃在Github上的国内技术大牛
    创建带Mipmap的osg::Image
    C#文件系统管理【转】
    C#文本文件(.txt)读写 [转]
    C#连接SQL Server数据库进行简单操作[转]
    shell脚本把一些请求量非常高的ip给拒绝掉
    linux获取精准进程PID之pgrep命令
    Kubernetes的Cron Job
    StatefulSet和Deployment的区别
  • 原文地址:https://www.cnblogs.com/houziwty/p/AngularJs.html
Copyright © 2011-2022 走看看