• 学习AngularJS(一)


    学习AngularJS AngularJS 是比较新的技术,版本 1.0 是在 2012 年发布的。

    AngularJS 是由 Google 的员工 Miško Hevery 从 2009 年开始着手开发。

    这是一个非常好的构想,该项目目前已由 Google 正式支持,有一个全职的开发团队继续开发和维护这

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

    AngularJS 通过 ng-directives 扩展了 HTML: 一.介绍了AngularJS扩展了HTML

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

       ng-model 指令把元素值(比如输入域的值)绑定到应用程序。

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

    例如:

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
    </head>
    <body>
     
    <div ng-app="">
         <p>名字 : <input type="text" ng-model="name"></p>
         <h1>Hello {{name}}</h1>
    </div>
     
    </body>
    </html>
    

    实例讲解:

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

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

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

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

    二.AngularJS的用途:   

    1.AngularJS 把应用程序数据绑定到 HTML 元素。   

    2.AngularJS 可以克隆和重复 HTML 元素。   

    3.AngularJS 可以隐藏和显示 HTML 元素。   

    4.AngularJS 可以在 HTML 元素"背后"添加代码。   

    5.AngularJS 支持输入验证。

    三.AngularJS指令:   

      正如您所看到的,AngularJS 指令是以 ng 作为前缀的 HTML 属性。

       ng-init 指令初始化 AngularJS 应用程序变量。    例如:

       <div data-ng-app="" data-ng-init="firstName='John'"><p>姓名为 <span data-ng-bind="firstName"></span></p>      </div>

    四.AngularJS表达式   

        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="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script> 
    </head>
    <body>
     
    <div ng-app="">
         <p>我的第一个表达式: {{ 5 + 5 }}</p>
    </div>
     
    </body>
    </html>
    

     五.AngularJS 应用

      1.AngularJS 模块(Module) 定义了 AngularJS 应用。

      2.AngularJS 控制器(Controller) 用于控制 AngularJS 应用。

      3.ng-app指令定义了应用,  ng-controller 定义了控制器。

    <div ng-app="myApp" ng-controller="myCtrl">
     
    名: <input type="text" ng-model="firstName"><br>
    姓: <input type="text" ng-model="lastName"><br>
    <br>
    姓名: {{firstName + " " + lastName}}
     
    </div>
     
    <script>
    /*AngularJS 模块*/
    var app = angular.module('myApp', []);
    /*AngularJS 控制器*/
    app.controller('myCtrl', function($scope) {
        $scope.firstName= "John";
        $scope.lastName= "Doe";
    });
    </script>
  • 相关阅读:
    JSP九大内置对象的作用和用法总结(转)
    Java web的几种异常处理 (转)
    response.getWriter().write()与out.print()的区别(转)
    【JavaWeb】Session(转)
    java web中cookies的用法 转
    1123
    1120
    jsp 内置对象
    include与jsp:include区别
    11.24作业1
  • 原文地址:https://www.cnblogs.com/wangbaohui/p/6588111.html
Copyright © 2020-2023  润新知