• Angular JS 学习之简介


    1.Angular JS是一个JavaScript框架,它是一个以JavaScript编写的库,它可以通过<script>标签添加到HTML页面:

    <script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>

    2.Angular JS通过指令扩展了HTML,且通过表达式绑定数据到HTML

    3.Angular JS扩展了HTML:

    (1)Angular JS通过ng-directives扩展了HTML;

    (2)ng-app指令定义了一个Angular JS应用程序;

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

    (4)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="">                                       //ng-app指令告诉AngularJS ,<div>元素是AngularJS应用程序的所有者

      <p>名字:<input type="text" ng-model="name"></p>        //ng-model指令把输入域的值绑定到应用程序变量name

      <h1>Hello {{name}}</h1>                   //ng-bind指令把应用程序变量name绑定到某个段落的innerHTML

    </div>

    </body>

    </html>

    4.AngularJS使得开发现代的单一页面应用程序变得更加简单;

    **AngularJS把应用程序数据绑定到HTML元素

    **AngularJS可以克隆和重复HTML元素

    **AngularJS可以隐藏和显示HTML元素

    **AngularJS可以在HTML背后添加代码

    **AngularJS支持输入验证

    5.AngularJS指令:AngularJS指令是以ng作为前缀的HTML属性,ng-init指令初始化AngularJS应用程序

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

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

    </div>

    6.AngularJS表达式:

    **AngularJS表达式写在双大括号内:{{expression}}

    **AngularJS表达式把数据绑定到HTML,这与ng-bind指令有异曲同工之妙;

    **AngularJS将在表达式书写的位置"输出"数据;

    **AngularJS表达式很像JavaScript表达式:它们可以包含文字,运算符和变量;

    <!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>

    7.AngularJS应用:

    **AngularJS模块(Module)定义了AngularJS应用;

    **AngularJS控制器(Controller)用于控制AngularJS应用;

    **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>

    var app=angular.module('myApp',[]);            //AngularJS模块定义应用

    app.controller('myCtrl',function($scope){       //AngularJS控制器控制应用

      $scope.firstName="John";

      $scope.lastName="Doe";

    });

    </script>

  • 相关阅读:
    为什么我的tomcat启动不起来?
    图解leetcode —— 128. 最长连续序列
    java实现单链表增删改查
    搞定java String校招面试题
    java反射快速入门
    java中线程安全,线程死锁,线程通信快速入门
    理清Java中try-catch-finally带return的执行顺序
    Java可变参数与Collections工具类使用了解
    HashMap常见面试题整理
    ArrayList去除重复元素(多种方法实现)
  • 原文地址:https://www.cnblogs.com/hqutcy/p/6020906.html
Copyright © 2020-2023  润新知