一、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. Centos 搭建named dns服务无法解析外网地址

    搭建了DNS服务器来解析自定义的域名,但是在遇到非自定义的域名时,不会去自动解析.使用nslookup 会提示 ** server can't find xxxx: NXDOMAIN 网上找了说要配置 ...

  2. excel 中批量生成mysql的脚本

    一.假设你的表格有A.B.C三列数据,希望导入到你的数据库中表格table,对应的字段分别是col1.col2.col3 二.在你的表格中增加一列,利用excel的公式自动生成sql语句,具体方法如下 ...

  3. JS判断滚动条到底部，页面是否有滚动条

    要判断页面滚动条是否到底,需要了解三个属性: scrollHeight:获取元素内容高度的度量,包括由于溢出导致的视图中不可见内容,说直白点,算上了滚动条不可见的那部分高度. clientHeight ...

  4. 消息中间件RabbitMQ(一)

    1.消息中间件 消息队列中间件是指利用高效可靠地消息传递机制传递消息.有两种传递模式:点对点模式.发布/订阅模式.流行的消息中间件有RabblitMQ.Kafka.RockerMQ.它们都提供了基于存 ...

  5. 十大经典排序算法详细总结（含JAVA代码实现）

    原文出处:http://www.cnblogs.com/guoyaohua/p/8600214.html 0.排序算法说明 0.1 排序的定义 对一序列对象根据某个关键字进行排序. 0.2 术语说明 ...

  6. 跨域 webpack + vue-cil 中 proxyTable 处理跨域

    博客地址:https://ainyi.com/27 跨域 了解同源政策:所谓"同源"指的是"三个相同". 协议相同 域名相同 端口相同 解决跨域 jsonp 缺 ...

  7. 收官之作：利用Microsoft Teams构建中大型社区的技术架构与运营经验

    这是我在 精彩又一年:Microsoft Teams技术社区2018年度回顾和展望 活动上面的主题分享,我用Microsoft Teams技术社区的实践经验,给大家整理和分享了技术架构和一些运营经验. ...

  8. Python在Office 365 开发中的应用

    我在昨天发布的文章 -- 简明 Python 教程:人生苦短,快用Python -- 中提到了Python已经在Office 365开发中全面受支持,有不同朋友留言或私信说想了解更加详细的说明,所以特 ...

  9. 再谈 C# 对象二进制序列化，序列化并进行 AES 加密

    对象的二进制序列化非常有用,也非常方便. 我们可以把对象序列化为字节数组,也可以把对象序列化到文件,还可以把对象序列化到文件并进行加密. 先引用这些命名空间: using System.IO;usin ...

  10. EF Codefirst 中间表（关系表）的增删改查（转）

    EF Codefirst 多对多关系 操作中间表的 增删改查(CRUD)   前言 此文章只是为了给新手程序员,和经验不多的程序员,在学习ef和lambada表达式的过程中可能遇到的问题. 本次使用订 ...