一、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：

 <div ng-app="">

       <p>名字 : <input type="text" ng-model="name"></p>

       <h1>Hello {{name}}</h1>

     </div>

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

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

 <div ng-app="" ng-init="firstName='John'">

 　　<p>姓名为 <span ng-bind="firstName"></span></p>

 </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 }}

二、代码演示

 <!DOCTYPE html>

 <html>

 <head>

     <meta charset="utf-8">

     <script src="js/angular.min.js"></script>

 </head>

 <body>

     <div ng-app="myApp" ng-controller="myCtrl">

         <!-- AngularJS 扩展了 HTML -->

         <p>名字 :

             <input type="text" ng-model="name">

         </p>

         <h1>Hello {{name}}</h1>

         <!-- AngularJS 指令 -->

         <p ng-init="firstName='John'">姓名为 :

             <span ng-bind="firstName"></span>

         </p>

         <!-- AngularJS 表达式 -->

         <p >姓名为 :

                 <p>我的第一个表达式： {{ 5 + 5 }}</p>

         </p>

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

         <p data-ng-init="firstName='John'">姓名为 :

             <span data-ng-bind="firstName"></span>

         </p>

         <!-- AngularJS 应用 -->

          名:

         <input type="text" ng-model="firstName">

         <br>

          姓:

         <input type="text" ng-model="lastName">

         <br>

         <br> 姓名: {{firstName + " " + lastName}}

     </div>

 </body>

 </html>

 <script>

     var app = angular.module('myApp', []);

     app.controller('myCtrl', function ($scope) {

         $scope.firstName = "John";

         $scope.lastName = "Doe";

     });

 </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. linux下umask的使用讲解

    最近开始学习linux ,看完马哥的linux课程关于umask的这个部分, 写这篇博客希望加深下我对umask的理解 和对umask不太清楚的博友一些帮助. 1 umask 是什么 当我们登录系统之 ...

  2. SOAP系列目录

    1.协议分析 2.WebService.WCF介绍 3.HttpClientHelper实现webservice调用 4.SoapCore介绍

  3. nginx部署django应用

    Django部署方式有很多种,之前写过一篇部署在Apache上的博文:https://www.cnblogs.com/shenh/p/7552722.html .下文介绍的是通过Nginx来部署. N ...

  4. Linux命令-基本操作和软件安装

    配置JDK环境:JAVA_HOME:D:\software\JDK1.7Path:%JAVA_HOME%\bin;%JAVA_HOME%\lib; ls(查看当前目录下的文件及文件夹)sh initN ...

  5. IdentityServer4 中文文档 -12- （快速入门）添加外部认证支持

    IdentityServer4 中文文档 -12- (快速入门)添加外部认证支持 原文:http://docs.identityserver.io/en/release/quickstarts/4_e ...

  6. [转]bitcoin: 通过 rpc 请求节点数据

    本文转自:https://laravel-china.org/index.php/articles/8919/bitcoin-requests-node-data-through-rpc 文章来自本人 ...

  7. ___Json帮助类

    using Newtonsoft.Json;using Newtonsoft.Json.Converters;using Newtonsoft.Json.Linq;using System.Colle ...

  8. 重构——与设计模式的恋情

    慢慢的,我发现,我想和<重构>加深感情不那么容易,于是我就想办法,重构有个好闺蜜<设计模式>,他们青梅竹马两小无猜,行为习性喜好都差不多,要让重构爱上我,我或许可以和设计模式多 ...

  9. 禅道导入bugfree 3.0的数据

    禅道项目导入bugfree功能只支持到2.0, 官方不提供3.0的导入,只好自己写了一个.因为bugfree 3.0换人开发了,表结构和禅道差别很大,所以,这个工具不是完全转换,一些History表内 ...

  10. C#程序实现软件开机自动启动的两种常用方法

    C#/WPF/WinForm/.NET程序代码实现软件程序开机自动启动的两种常用方法函数的示例与实例带详细注释 方法一:将软件的快捷方式创建到计算机的自动启动目录下(不需要管理员权限) 1.必要引用 ...