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


  • 相关阅读:
    django框架个人博客实战
    django框架简介
    Nginx 反向代理设置
    Nginx 动静分离设置
    nginx 安装
    nginx-简介及概念
    自己的Qt GUI 项目+vs2013+opencv+caffe环境配置
    机器学习实战之K-Means算法
    机器学习实战之树回归
    机器学习实战之回归
  • 原文地址:https://www.cnblogs.com/tiecheng/p/5895858.html
Copyright © 2011-2022 走看看