zoukankan      html  css  js  c++  java
  • AngularJS 简介

    AngularJS 简介

    AngularJS是一个JavaScript框架,它可以通过script标签添加到HTML页面。AngularJS通过指令扩展了HTML,且通过表达式绑定数据到HTML。

    AngularJS是一个JavaScript框架

    AngularJS是一个JavaScript框架,它是以javascript编写的库。

    AngularJS是以一个JavaScript文件形式发布,可通过Script标签添加到网页中,建议把脚本放到body元素的底部,这样会提高网页的加载速度,因为HTML的加载不受制于脚本的加载。

    AngularJS扩展了HTML

    AngularJS通过ng-directives扩展了HTML。

    ng-app指令定义了一个AngularJS应用程序。

    ng-model指令把元素的值绑定到应用程序。

    ng-bind指令把应用程序数据绑定到HTML视图。

    <!DOCTYPE html >
    <html lang="zh-cn">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta http-equiv="X-UA-Compatible"content="IE=edge" />
    <meta name="viewport"content="width=device-width,initial-scale=1.0" />
    <!--[if lt IE 9]>
    <script src="http://apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js"></script>
    <script src="http://apps.bdimg.com/libs/respond.js/1.4.2/respond.js"></script>
    <![endif]-->
    <title></title>
    <meta charset="utf-8" />
    <link rel="stylesheet"href="bootstrap-3.3.5/dist/css/bootstrap.min.css" />
    </head>
    <body>

    <div class="container" ng-app="">
    <p>在输入框尝试输入:</p>
    <p><input type="text" size="20"maxlength="16" ng-model="name"/></p>
    <p ng-bind="name"></p>
    </div>
    <script src="jQuery/jquery-2.1.4.js"></script>
    <script src="bootstrap-3.3.5/dist/js/bootstrap.min.js"></script>
    <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
    </body>
    </html>

    实例讲解

    页面加载完毕,AngularJS自动开启。

    ng-app指令告诉AngularJS,div元素是AngularJS应用程序的“所有者”。

    ng-model指令把输入域的值绑定到应用程序变量name。

    ng-bind指令把应用程序变量name绑定到某个有段落的innerHTML。

    提示:如果移除了ng-app指令,HTML直接把表达式显示出来,不会去计算表达式的结果。

  • 相关阅读:
    javaSE笔记-多态
    javaSE笔记-接口
    javaSE笔记-static关键字
    javaSE笔记-fianl关键字
    javaSE笔记-抽象类
    javaSE笔记-继承
    javaSE笔记-JKD、JRE、JVM各自的作用和关系
    搭建网络验证RIP协议
    计算机网络学习
    python itertools 模块讲解
  • 原文地址:https://www.cnblogs.com/melao2006/p/5027827.html
Copyright © 2011-2022 走看看