zoukankan      html  css  js  c++  java
  • AngularJS的初步学习(1)

                    AngularJS 是一个Javascript框架。它可通过 <script> 标签添加到 HTML 页面。AngularJS 通过 指令 扩展了 HTML,且通过 表达式绑定数据到 HTML。是一个以 JavaScript 编写的库,是以一个 JavaScript 文件形式发布的,可通过 script 标签添加到网页中:

    <script src="http://apps.bdimg.com/libs/angular.js/1.3.9/angular.min.js"></script>  

                  AngularJS 通过ng-directives扩展了 HTML;

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

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

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

             <1>实例一:

    <body>
        <div ng-app="">
            <p>请输入您的姓名:</p>
            <p>姓名:<input  type="text"  ng-model="name"/></p>
            <p ng-bind="name"></p>
        </div>
        <script src="Scripts/angular.min.js"></script>
    </body>

                 

              当网页加载完毕,AngularJS 自动开启。ng-app指令告诉 AngularJS,<div> 元素是 AngularJS应用程序的"所有者";ng-model指令把输入域的值绑定到应用程序变量name;ng-bind指令把应用程序变量name绑定到某个段落的innerHTML。

              可能有时间也是比较好奇的,AngularJS究竟是什么?其实我也不得不说,我之前也在好奇,但是看过后我就了解了一些。其实AngularJS 把应用程序数据绑定到HTML元素,可以克隆、重复、隐藏和显示HTML元素等,这样说来就是对html的操作的啦。而变一种方式,AngularJS指令是以ng作为前缀的HTML属性,这样说起来或许你就认为简单了吧。

              <2>实例二

    <body>
        <script src="Scripts/angular.min.js"></script>
        <div data-ng-app="" ng-init="firstName='啦啦'">
            <p>姓名为:<span ng-bind="firstName"></span></p>
        </div>
    </body>

                    

                     如上所示,ng-init指令初始化 AngularJS 应用程序变量

                     <3>实例三

    <body>
        <script src="Scripts/angular.min.js"></script>
        <div ng-app="">
            <p>我的第一个表达式: {{ 5 + 5 }}</p>
        </div>
    </body>

                    

                      表达式写在双大括号内{{}},在表达式书写的位置"输出"数据,和JavaScript 表达式:它们可以包含文字、运算符和变量。

               <4>.实例四

    <body>
        <script src="Scripts/angular.min.js"></script>
    <div ng-app="myApp" ng-controller="myController">
        名:<input type="text" ng-model="firstName" />
        姓:<input type="text" ng-model="lastName"  />
        <br />
        姓名:{{firstName+""+lastName}}
    </div>
    </body>
    </html>
    <script>
        var app = angular.module("myApp", []);
        app.controller("myController", function ($scope) {
            $scope.firstName = "果果";
            $scope.lastName = "啦啦";
        })
    </script>

                    

                      AngularJS模块(Module)定义了 AngularJS 应用,控制器(Controller)用于控制AngularJS应用,ng-app指令定义了应用, ng-controller定义了控制器而变量app的定义就是AngularJS 模块定义应用,下面的即是控制器控制应用。好啦,就写到这里啦,嘿嘿。

  • 相关阅读:
    利用Clojure统计代码文件数量和代码行数
    Workflow:添加工作流存储功能
    MongoDB:最简单的增删改查(Oops,可能太简单了)
    《WF in 24 Hours》读书笔记
    推荐一个学习python的网站
    Inter系列处理器名称浅析
    [Android1.5]TextView跑马灯效果
    Code::Blocks 的配色方案
    PuTTY + Xming 远程使用 Linux GUI
    Linux下查看文件和文件夹大小
  • 原文地址:https://www.cnblogs.com/dyxd/p/4930372.html
Copyright © 2011-2022 走看看