angularJS基础知识

来源：互联网发布：捷联惯导速度算法编辑：程序博客网时间：2024/06/03 23:40
<!DOCTYPE html><html>    <head>        <meta charset="UTF-8">        <title></title>        <script type="text/javascript" src="js/Angular.js"></script>    </head>    <body >        <div ng-app="myApp" >            <p>名字 : <input type="text" ng-model="name"></p>            <h1>Hello {{name}}</h1>            自定义标签：<br/>            通过标签调用：<runoob-directive></runoob-directive><br/>            通过属性调用：<div runoob-directive></div>            通过类名调用：<div class="runoob-directive"></div>            通过注释调用：<!-- directive: runoob-directive --><br/>            <span style="color: red;">注意：replace 值为true是才能通过注释调用自定义标签，其他方式可以忽略该属性</span>        </div>        <div ng-app="myApp1" id="myApp1" ng-init="firstName='John'">             <p>在输入框中尝试输入：</p>             <p>姓名：<input type="text" ng-model="firstName"></p>             <p>你输入的为： {{firstName}}</p>        </div>        <div ng-app="myApp2" id="myApp2" ng-init="names=['jont','tom','cat']">            <ul>                <li ng-repeat="x in names">{{x}}</li>            </ul>        </div>        <div ng-app="myApp3" id="myApp3" ng-init="objects=[            {name:'join',age:'20'},            {name:'tome',age:'21'},            {name:'cat',age:'22'},            {name:'feill',age:'23'}]">            <ul><li ng-repeat="h in objects">                    {{h.name}}   {{h.age}}                </li>            </ul>        </div>        <h3>正式开始</h3>        <div ng-app="lastApp" id="lastApp">        </div>        <script>            //初始化一个AngularJS程序属性            var app = angular.module("myApp", []);            //自定义标签   只能在第一个自动加载的angularJS程序中使用，在手动加载的程序块使用方法待寻            app.directive("runoobDirective", function() {                return {                    restrict : "EACM",                    replace : true,                    template: "<h1>自定义指令!</h1>"//                  注意：replace 值为true是才能通过注释调用自定义标签，其他方式可以忽略该属性//                  restrict 值可以是以下几种://                  E 作为元素名使用//                  A 作为属性使用//                  C 作为类名使用//                  M 作为注释使用//                  restrict 默认值为 EA, 即可以通过元素名和属性名来调用指令。                };            });            //初始化两个AngularJS程序属性            var app1 = angular.module("myApp1", []);            angular.bootstrap(document.getElementById("myApp1"), ['myApp1']);            //初始化三个AngularJS程序属性            var app2 = angular.module("myApp2", []);            angular.bootstrap(document.getElementById("myApp2"), ['myApp2']);            //初始化四个AngularJS程序属性            var app3 = angular.module("myApp3", []);            angular.bootstrap(document.getElementById("myApp3"), ['myApp3']);            var lastApp = angular.module("lastApp", []);            angular.bootstrap(document.getElementById("lastApp"), ['lastApp']);        </script>        <hr />        <div>            <h3>AngularJS指令</h3>            ng-app 指令告诉 AngularJS，div 元素是 AngularJS 应用程序 的"所有者"。<br>            ng-model 指令把输入域的值绑定到应用程序变量 name。<br>            ng-bind 指令把应用程序变量 name 绑定到某个段落的 innerHTML。<br>            ng-init 指令初始化 AngularJS 应用程序变量。<br>            ng-repeat 指令会重复一个 HTML 元素：<br>            HTML5 允许扩展的（自制的）属性，以 data- 开头。AngularJS 属性以 ng- 开头，但是您可以使用 data-ng- 来让网页对 HTML5 有效。        </div>        <div>            <h3>AngularJS 表达式</h3>            AngularJS 表达式写在双大括号内：{{ expression }}。            AngularJS 表达式把数据绑定到 HTML，这与 ng-bind 指令有异曲同工之妙。            AngularJS 将在表达式书写的位置"输出"数据。            AngularJS 表达式 很像 JavaScript 表达式：它们可以包含文字、运算符和变量。            实例 {{ 5 + 5 }} 或 {{ firstName + " " + lastName }}        </div>        <div>            <h3>AngularJS 应用</h3>            AngularJS 模块（Module） 定义了 AngularJS 应用。<br />            AngularJS 控制器（Controller） 用于控制 AngularJS 应用。<br />            ng-app指令定义了应用, ng-controller 定义了控制器。<br />        </div>        <div>            <h3>AngularJS 表达式 与 JavaScript 表达式</h3>            与 JavaScript 表达式不同，AngularJS 表达式可以写在 HTML 中。<br />            与 JavaScript 表达式不同，AngularJS 表达式不支持条件判断，循环及异常。<br />            与 JavaScript 表达式不同，AngularJS 表达式支持过滤器。<br />        </div>        <div>            <h3>数据绑定</h3>                input type="text" ng-model="firstName" value="join"             <p>你输入的为： 双花括号 firstName </p>             <p>你输入的为： span ng-bind="firstName" span</p>        </div>        <div>            <h3>ng-model 指令</h3>            ng-model 指令 绑定 HTML 元素 到应用程序数据。<br />            ng-model 指令也可以：<br />            为应用程序数据提供类型验证（number、email、required）。<br />            为应用程序数据提供状态（invalid、dirty、touched、error）。<br />            为 HTML 元素提供 CSS 类。<br />            绑定 HTML 元素到 HTML 表单<br />        </div>        <div>            <h3>创建自定义的指令</h3>            除了 AngularJS 内置的指令外，我们还可以创建自定义指令。<br />            你可以使用 .directive 函数来添加自定义的指令。<br />            要调用自定义指令，HTML 元素上需要添加自定义指令名。<br />            使用驼峰法来命名一个指令， runoobDirective, 但在使用它时需要以 - 分割, runoob-directive:<br />        </div>        <div>            <h3></h3>        </div>        <div>            <h3></h3>        </div>        <div>            <h3></h3>        </div>    </body></html>
0 0