AngularJS的初步学习（1）

时间：2023-03-09 16:51:46
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>

aaarticlea/png;base64,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" alt="" />

当网页加载完毕，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>

aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAHAAAAAZCAIAAABmeT2OAAAB90lEQVRoge2YUXLEIAiGvZEn4kDexsN4n/bBqCAImmXaTsf/aSdhQb4gmISvK1eF317Af9MF6qwL1FkcaEkxxFS4aUkxQNacZQjyXxU3GYLh9RPRZEqKRrBTey4RKIXSUjaAlhQ3cDLLnwRqRzu15+JAM1AXnaMGtKQYFHHOLcqbIlCUocfs7knwaROd2tvCQJH3wWGJalCoJiIVs2yXDeadMvRFy4A+tLc1V+gowxoLlaVYoRVmTIVVtsTZKGT5eQkBlzljQIDqIwLMkSG/sD8H2rFUfLiHCEDR7VIySrUW+8YaxC2lda59oH+iQp8A7VfCmdlTHlXg5qrEBD7Iag0Ir37ehvv2tijQMeEHWZKn5ra14IMR86x/Olg4A32e7yh75P/U3tYENENs3qoLNqh4T9lojAvGY7/neSs4AG09ER3QerDp2ra9LeFNacwZfp2SqbTp6BLdrU8A9LH0ffj2JKX1xHYRL+jU3tYSKGeqOH4DlI+jZyB+cjRVh0x9UGQ9p/a2GNDukuXlCVSb1fqON6c8aTPcF71yam+LDSX9wOIDNIMyu9Sbm8cmYs22AX1TOrK3hYGumqQ9aay5NH0MmYFNf3d8c3pSkvLQPgBt23P5fL7brVCj+lyV4QjEsf1C93uosy5QZ12gzrpAnXWBOusCddY3koBI+Vt+dSkAAAAASUVORK5CYII=" alt="" />

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

<3>实例三

<body>

    <script src="Scripts/angular.min.js"></script>

    <div ng-app="">

        <p>我的第一个表达式： {{  +  }}</p>

    </div>

</body>

aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAL4AAAAjCAIAAACl7idXAAACb0lEQVR4nO2aW5qDIAxG2VFWlAWxmyyG/XQeqMolIGSorX7/eZsRBMlpCLXuBYAJ9+0JgLsCdYARqAOMQB1gBOoAI1AHGIE6wAjUAUagDjAyoY6wIx8aF4MnltlO6m1ie2Gn3a++3eQAYBktdYTdIDFwQZi0GBrVCUE8uaqrsCuN6g1w9hCq7P+kMZ90Kp8Y9gusyjqvJGPMdOoNEjzlfePF4GnA5Xf7ZpyCp7UxPKalLcI+kaB9JG7JQnWUWDc6nQW/oYJ6r9/IOpuImhjBUzZU+fddaaozGN55L/r6dRKFfulMHXPWMaUHpVNtSpqEbszSrLOgUzOi0cj3pXY6qWNkzTqr1BFWZbr/nrVGnT1GZTBaJjRSE4taMB0jHOoojarBLq119rueqqP964bo6kwVI9siKMHIUoVOaYEa7uDJMfNs1rkeqFMRPDlirqrgsk0eOWHn2PerwlIdNRsIs6RSnWUdk/orwIaVc5R1Wci0k0Ma9GPv6a1VZUFzlxFD1snmdMG3h0Nl8kOOWGfqxCDlvhDRHqYQ9mXK1Sk+bE17qni2qp2ZrKN0eenCLXZJe8zyQPUQc3rqbJUpj1Qjr3q/0EpmbS/KvuZjyd1JdJjPOrGZMeusOmEVy/EUcVrqZGt+rPjx2ML1J/Yd5d7a5MFLBGiWB0mP2awT28e4be/FPqWOWlyVSVffU2/LQK0j7IiZdFf2jWtfm5GVKdJBxRZvSTWMKgy8XCMfiv2y3+kpsbyYc3W0BKO1GT/bDIVqu9HYG6l6Pvc/wfw6+L0OMAJ1gBGoA4xAHWAE6gAjUAcYgTrACNQBRqAOMAJ1gJE/RPFQEYpENW4AAAAASUVORK5CYII=" alt="" />

表达式写在双大括号内{{}},在表达式书写的位置"输出"数据，和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>

aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAXkAAAA8CAIAAAAMg10BAAAE5ElEQVR4nO3dzW6bQBSGYe5ormguiGupKiF1GWWTa2DXRapEqpQqUrOwlCVd8DfA/DMcTPM+8iKxj21axh8DOJyqA4DjVWcvAIAvgawBIIGsASCBrAEggawBIOGQrHn+9fLw+PTt+w9u93x7eHx6/vVyxABgbFz9dsTYOCRrXl7/vL1/HPHKKOjt/ePn82/hN2VsXMIRY+OorDniZVHcKVkj/I7IQ9agJLIGLudlTaOrStVtVC3j6Srs46mtlX1dt7WqdLPrHRkbV3FS1rS1ik8axtN1OLNmubIbXVW6IWu+lDOypq1V5WGJIHM8eZ9tPDe2DiXZx1Ojl4kyRcxxWWO8pfdNYuuwm3jW9BFgXaXuyc4qa+Ya9y/RdShpPZ4abUl552Yg55M+jY3prVTdruJtscZj61CYaNb0Y0zV7WZDZ42gRo8DgnnNVdjG0zxfaHSl6taYP8RNJbx73GbW6KZra6W0Hle9Umqz2mPrUJhg1oz76F3XtW1jDJ9+Q7Mdcs6sYV5zt2zjadqw9MlijIODsmYzX7EsTrgOhZ14znueeAQ/+cxrrsIynvrJzPRTbURN0eM19gwxg65fjNg6FHZW1ow7zXEDjXnNVWzH0/y/PYeO+eBxWVNVlaqbZcQk1KEw6awJnINyxI/zvGZsbBAvQixZ0+h+D2iKms3xYt+qD3IfrzGjpWtrNbx6bB0Kk8uacQPS+rZljse25xo8hmPPUXUozDGe5rMC2/uP3Yca7jA2NrF1KOyEfag9WWNqdKW0Vkpr/5Yotg4FeLNmGzcCWdP/1OjpnWPrUNg9Z439PNT4wDjjnacxmxeNrUMx1vE0/YlCW6vlf3/h81BGni0Pu5i/xdahsItlTa2WYWH7ktawmxZTl/qPQ4j12LA73suf8x4NsxTLAaHYOhR2Utb4cGz4wtbjaRsm3kNpGZ/x7dgYBlhwhcfWoYx7ntfM+Pu6q+CaEnDh+jUoiayBC1mDksgauFwma7im7P3jesNwucz1hm+3z9e3v9zu/3a7fR4xABgb/8Gt+NigPxQACWQNAAlkDQAJZA0ACf6s2dG8I6XHizzzYnMxy5paD2AlmDVZzTsSe7xMTwkwXzG1fmmZHe5Mza0HsOLPmqzmHek9XsZnLR5aXRZu/XhSvbFI8/Wf1n/AvPzbz6R6ACGurMlt3pHV42V+Yvw8Jal+jMbFteYC87KUegAhoZ4tKc07snu8jBWHzmvG7Jg7f1RVpbUtU5PrAYT4siateceOHi/jK4pkDfMa4AyerNnZvCOhx8uyXHYfyoyo6efUegAh7qzZ1bwjrcfL+Iqy85p++Yy6OVBS6wGEeLImp3lHXo8Xq9RJg6/eevxlfejJcjgqth5ASFR/qJjmHXt6vMS0bDGzKrXef/xlvNMIq9R6ACGxvejim3dkZM1ao/szPkrrqOsOB+u92THsFZnRkVoPIMSbNVnNOzL6Lqwq+pLhsxz4im5cffC7eat7UusBhHiPDWc178jNmmknbP7d3KXZxFJK/WaZNkmxrEitBxDiypr85h3pPV7sB4U2+yhTz44msd4yKZq/nBixfBn1AFbKX1OiwPGaruvKnodaLUJKRqTWA7Di+jUAJJA1ACSQNQAkkDUAJJA1ACSQNQAkkDUAJJA1ACSQNQAkkDUAJJA1ACSQNQAk/AMw3SRzsu2cmgAAAABJRU5ErkJggg==" alt="" />

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

相关文章