一、AngularJS 简介
　　1.AngularJS 是一个 JavaScript 框架。
　　　　AngularJS 是一个 JavaScript 框架。它是一个以 JavaScript 编写的库。AngularJS 是以一个 JavaScript 文件形式发布的
　　2.它可通过 <script> 标签添加到 HTML 页面。
　　　　<script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
　　3.AngularJS 通过 指令 扩展了 HTML。
　　　　1.AngularJS 指令是以 ng 作为前缀的 HTML 属性。

　　　　2.AngularJS 通过 ng-directives 扩展了 HTML。

　　　　3.ng-app 指令定义一个 AngularJS 应用程序。
　　　　　　ng-app 指令告诉 AngularJS，<div> 元素是 AngularJS 应用程序 的"所有者"。

　　　　4.ng-model 指令把元素值（比如输入域的值）绑定到应用程序。
　　　　　　ng-model 指令把输入域的值绑定到应用程序变量 name。
　　　　　　   eg：

  1.  <div ng-app="">
  2.        <p>名字 : <input type="text" ng-model="name"></p>
  3.        <h1>Hello {{name}}</h1>
  4.      </div>

　　　　5.ng-bind 指令把应用程序数据绑定到 HTML 视图。
　　　　　　ng-bind 指令把应用程序变量 name 绑定到某个段落的 innerHTML。

　　　　6.ng-init 指令初始化 AngularJS 应用程序变量。
　　　　　　eg：

  1.  <div ng-app="" ng-init="firstName='John'">
  2.  　　<p>姓名为 <span ng-bind="firstName"></span></p>
  3.  </div>

　　　　7.AngularJS 属性以 ng- 开头，但是您可以使用 data-ng- 来让网页对 HTML5 有效。

4.且通过 表达式 绑定数据到 HTML。
　　　　1.AngularJS 表达式写在双大括号内：{{ expression }}。

　　　　2.AngularJS 表达式把数据绑定到 HTML，这与 ng-bind 指令有异曲同工之妙。

　　　　3.AngularJS 将在表达式书写的位置"输出"数据。

　　　　4.AngularJS 表达式 很像 JavaScript 表达式：它们可以包含文字、运算符和变量。
　　　　　　实例 {{ 5 + 5 }} 或 {{ firstName + " " + lastName }}

二、代码演示

  1.  <!DOCTYPE html>
  2.  <html>
  3.  
  4.  <head>
  5.      <meta charset="utf-8">
  6.      <script src="js/angular.min.js"></script>
  7.  </head>
  8.  
  9.  <body>
  10.      <div ng-app="myApp" ng-controller="myCtrl">
  11.          <!-- AngularJS 扩展了 HTML -->
  12.          <p>名字 :
  13.              <input type="text" ng-model="name">
  14.          </p>
  15.          <h1>Hello {{name}}</h1>
  16.  
  17.          <!-- AngularJS 指令 -->
  18.          <p ng-init="firstName='John'">姓名为 :
  19.              <span ng-bind="firstName"></span>
  20.          </p>
  21.  
  22.          <!-- AngularJS 表达式 -->
  23.          <p >姓名为 :
  24.                  <p>我的第一个表达式： {{ 5 + 5 }}</p>
  25.          </p>
  26.  
  27.          <!-- AngularJS 属性以 ng- 开头，但是您可以使用 data-ng- 来让网页对 HTML5 有效。 -->
  28.          <p data-ng-init="firstName='John'">姓名为 :
  29.              <span data-ng-bind="firstName"></span>
  30.          </p>
  31.  
  32.          <!-- AngularJS 应用 -->
  33.           名:
  34.          <input type="text" ng-model="firstName">
  35.          <br>
  36.           姓:
  37.          <input type="text" ng-model="lastName">
  38.          <br>
  39.          <br> 姓名: {{firstName + " " + lastName}}
  40.      </div>
  41.  </body>
  42.  
  43.  </html>
  44.  <script>
  45.      var app = angular.module('myApp', []);
  46.      app.controller('myCtrl', function ($scope) {
  47.          $scope.firstName = "John";
  48.          $scope.lastName = "Doe";
  49.      });
  50.  </script>

  我的博客园地址：https://www.cnblogs.com/songjianhui/
  Copyright ©2018  __浮沉丶若轩◇

【转载文章务必保留出处和署名，谢谢！】

AngularJS学习之旅—AngularJS 简介(一)的更多相关文章

  1. AngularJS学习之旅—AngularJS 模块(十五)

    一.AngularJS 模块 模块定义了一个应用程序. 模块是应用程序中不同部分的容器. 模块是应用控制器的容器. 控制器通常属于一个模块. 1.创建模块 通过 AngularJS 的 angular ...

  2. AngularJS学习之旅—AngularJS 控制器(六)

    1.AngularJS 控制器 AngularJS 应用程序被控制器控制. ng-controller 指令定义了应用程序控制器. 控制器是 JavaScript 对象,由标准的 JavaScript ...

  3. AngularJS学习之旅—AngularJS 指令(三)

    1.AngularJS 指令 AngularJS 通过被称为 指令 的新属性来扩展 HTML. AngularJS 通过内置的指令来为应用添加功能. AngularJS 允许你自定义指令.2.Angu ...

  4. AngularJS学习之旅—AngularJS 表达式(二)

    1.AngularJS 表达式 AngularJS 表达式写在双大括号内:{{ expression }}. AngularJS 表达式把数据绑定到 HTML,这与 ng-bind 指令有异曲同工之妙 ...

  5. AngularJS学习之旅—AngularJS 表单(十六)

    一.AngularJS 表单 AngularJS 表单是输入控件的集合. HTML 控件 以下 HTML input 元素被称为 HTML 控件: input 元素 select 元素 button ...

  6. AngularJS学习之旅—AngularJS 事件(十四)

    1.AngularJS 事件 ng-click ( 适用标签 :所有,触发事件:单击): ng-dblclick( 适用标签 :所有,触发事件:双击): ng-blur(适用标签 : a,input, ...

  7. AngularJS学习之旅—AngularJS HTML DOM(十三)

    1.AngularJS HTML DOM AngularJS 为 HTML DOM 元素的属性提供了绑定应用数据的指令. ng-disabled 指令:ng-disabled 指令直接绑定应用程序数据 ...

  8. AngularJS学习之旅—AngularJS Table(十一)

    1.AngularJS 表格 1. ng-repeat 指令可以完美的显示表格 AngularJS 实例 <!DOCTYPE html> <html> <head> ...

  9. AngularJS学习之旅—AngularJS Select(十)

    1.AngularJS Select(选择框) AngularJS 可以使用数组或对象创建一个下拉列表选项. ng-option:创建一个下拉列表,列表项通过对象和数组循环输出 eg: <div ...

随机推荐

  1. 【原创】c++拷贝初始化和直接初始化的底层区别

    说明:如果看不懂的童鞋,可以直接跳到最后看总结,再回头看上文内容,如有不对,请指出~ 环境:visual studio 2013(编译器优化关闭) 源代码 下面的源代码修改自http://blog.c ...

  2. 使用字面量，比new更加有效

    参考原文:http://www.cnblogs.com/yxf2011/archive/2012/04/01/2428225.html http://www.cnblogs.com/mushishi/ ...

  3. Jenkins入门之执行Powershell脚本

    之前章节提到过powershell,如果需要构建复杂的任务时,使用cmd不是很方便(也可能是由于笔者不太熟悉cmd命令,这里见笑了),这时候powershell就派上用场了,这里并不详细介绍power ...

  4. 使用Asp.Net Core MVC 开发项目实践[第四篇:基于EF Core的扩展2]

    上篇我们说到了基于EFCore的基础扩展,这篇我们讲解下基于实体结合拉姆达表达式的自定义更新以及删除数据. 先说下原理:其实通过实体以及拉姆达表达式生成SQL语句去执行 第一种更新扩展: 自定义更新字 ...

  5. Redis基础认识及常用命令使用(一)--技术流ken

    Redis简介 redis是一个key-value存储系统.和Memcached类似,它支持存储的value类型相对更多,包括string(字符串).list(链表).set(集合)和zset(有序集 ...

  6. Spring Cloud Stream消费失败后的处理策略（三）：使用DLQ队列（RabbitMQ）

    应用场景 前两天我们已经介绍了两种Spring Cloud Stream对消息失败的处理策略: 自动重试:对于一些因环境原因(如:网络抖动等不稳定因素)引发的问题可以起到比较好的作用,提高消息处理的成 ...

  7. 详解Javascript中prototype属性(推荐)

    在典型的面向对象的语言中,如java,都存在类(class)的概念,类就是对象的模板,对象就是类的实例.但是在Javascript语言体系中,是不存在类(Class)的概念的,javascript中不 ...

  8. Windows server 2008 R2配置多个远程连接

    1.右键计算机属性——远程设置——出现系统属性对话框——选择“远程”选项卡,按如下图操作:. 2.默认只有administrator具有远程桌面的权限,其他用户都没有权限远程桌面连接服务器.因此,我们 ...

  9. Flask 系列之 Bootstrap-Flask

    说明 操作系统:Windows 10 Python 版本:3.7x 虚拟环境管理器:virtualenv 代码编辑器:VS Code 实验目标 通过使用 Bootstrap-Flask 来进行页面美化 ...

  10. 内省（Introspector）

    /** * 内省:通过反射来操作javabean * 内省类 --> Bean信息 --> 属性描述符 --> 属性的get/set对应的Method --> 进行反射 * c ...