zoukankan      html  css  js  c++  java
  • AngularJS学习 01进入Angular世界

    Angular下载

    各个版本的下载地址:https://code.angularjs.org/ 

    打开上述URL,页面如下图:

    点击需要的版本,跳出如下页面:

    点击红色框内容即可下载完整的压缩包。

    还可以通过通过Npm包管理工具,或者Bower获取,这里暂不涉及。

    简单例子开始Angular之旅

      代码:

     1 <!DOCTYPE html>
     2 <html lang="en">
     3 <head>
     4     <meta charset="UTF-8">
     5     <title>Title</title>
     6     <script src="../../statics/angular/angular.min.js"></script>
     7 </head>
     8 <body>
     9 <div ng-app="" ng-init="firstName='TieShen'">
    10     <p>名字 : <input type="text" ng-model="name"></p>
    11     <h1>Hello {{name}}</h1>
    12     <p>姓名:<span ng-bind="firstName"></span></p>
    13 </div>
    14 </body>
    15 </html>

      浏览器效果:

      

    解释:

      ng-init="firstName='TieShen' 初始化了firstName变量的值
      ng-model="name" 则说明了一个名字为name的变量--input框的输入值,通过{{name}} 来展示这个变量值,话说这体现了Angular的一个优势:双向数据绑定
      
    就这么一个简单的例子,让我感受到了Angular的强大,如果用JQuery做要‘复杂’的多。希望在后续的学习中,能不断深入,毕竟2.X出来以后和1.X差别较大,表示先把1.X过一遍再去看2.X


  • 相关阅读:
    Sliding Window
    方程的解数
    [JLOI2011]不重复数字
    A−B数对
    2007年分区联赛提高组之一 统计数字
    Magic Squares 魔板 (BFS+HASH)
    集合(normal)
    Place the Robots
    LoadRunner监控Linux
    CentOS6.3(64位)下安装Oracle11gR2(64)服务器
  • 原文地址:https://www.cnblogs.com/tiecheng/p/5895858.html
Copyright © 2011-2022 走看看