首页 > 代码库 > angularJS初学篇-1添加随笔

angularJS初学篇-1添加随笔

2024-10-01 02:57:39   222人阅读

1.头部引入angularJS文件

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

2.angularjs指令

ng-app    

　　--指定了一个Angularjs的应用程序

　　ng-app 指令定义了 AngularJS 应用程序的 根元素。

　　　　ng-app 指令在网页加载完毕时会自动引导（自动初始化）应用程序。

　　　　稍后您将学习到 ng-app 如何通过一个值（比如 ng-app="myModule"）连接到代码模块。

 

　　ng-model  

　　　　--把输入域的值（元素值）绑定到应用程序。

ng-model 指令也可以：

    • 为应用程序数据提供类型验证（number、email、required）。
    • 为应用程序数据提供状态（invalid、dirty、touched、error）。
    • 为 HTML 元素提供 CSS 类。
    • 绑定 HTML 元素到 HTML 表单。

 

 

　　ng-bind    

　　　　--把应用程序数据绑定到html视图。

　　ng-init    

　　　　 --初始化应用程序变量

　　　　--通常情况下，不使用 ng-init。您将使用一个控制器或模块来代替它。

　　　　--稍后您将学习更多有关控制器和模块的知识。

<div ng-app=""   ng-init="firstng=‘hang‘">          -----指定了一个Angularjs的应用程序

　　<input type="text" ng-model="firstng"/>           --把输入域的值（元素值）绑定到应用程序。

　　{{ firstng }}   ---获取绑定到应用程序的值

</div>

     ng-repeat    --有点类似foreach功能

　　　　

<div ng-app="" ng-init="names=[
　　{name:‘Jani‘,country:‘Norway‘},
　　{name:‘Hege‘,country:‘Sweden‘},
　　{name:‘Kai‘,country:‘Denmark‘}]">
 
　　<p>循环对象：</p>
　　<ul>
　　  <li ng-repeat="x    in names">
 　　   {{ x.name + ‘, ‘ + x.country }}
 　　 </li>
　　</ul>
 
</div>

 

技术分享

 

 

3.angularjs表达式

　　写在HTML body里面

　　1.表达式写在双大括号内: {{ 表达式 }}

　　　　例如:<div ng-app="" ag-init="obj">  

　　　　其中ag-init应用程序中的初始变量初始值可为json对象，数组，任意值。obj=[‘a‘,‘b‘,‘c‘]   ==> {{obj[0]}}     ,obj={a:‘a‘,c:‘c‘}   ==>{{obj.a}}

　　2.{{表达式}} 如果为angular应用程序变量名,则功能与ng-bind一样，在html中显示变量值。

4.angularjs应用

　　1.angularjs模块（module） 定义了angularjs应用。

　　2.angularjs控制器（controller ）用于控制angularjs应用

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

　　

技术分享 
 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <meta charset="utf-8">
 5 <script src=http://www.mamicode.com/"http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script> 
 6 </head>
 7 <body>
 8 
 9 　　<p>尝试修改以下表单。</p>
10 
11 　　<div ng-app="myApp" ng-controller="myCtrl">
12 
13 　　名: <input type="text" ng-model="firstName"><br>
14 　　姓: <input type="text" ng-model="lastName"><br>
15 　　<br>
16 　　姓名: {{firstName + " " + lastName}}
17 
18 　　</div>
19 
20 　　<script>
21 　　var app = angular.module(‘myApp‘, []);
22 　　app.controller(‘myCtrl‘, function($scope) {
23 　　$scope.firstName= "Joh333n";
24 　　$scope.lastName= "Doe";
25 　　});
26 　　</script>
27 
28 </body>
29 </html>
View Code

 

5.创建自定义的指令

除了 AngularJS 内置的指令外，我们还可以创建自定义指令。

你可以使用 .directive 函数来添加自定义的指令。

要调用自定义指令，HTML 元素上需要添加自定义指令名。

使用驼峰法来命名一个指令， runoobDirective, 但在使用它时需要以 - 分割, runoob-directive:

　　.可以通过元素名调用指令   //restrict:"E";   E=element;

<body ng-app="myApp">

　　　　

<body>
    <div ng-app="myApp">
        <runoob-directive></runoob-directive>
        <script>
             var app=angular.module("myApp");
             app.directive("runoobDirective",function(){
  　　　　return {template:"<h1>this is auto defined code<h1>"}
    
　　　　});
        </script>
    </div>
</body>

     通过属性来调用//restrict:"A";   E=attribute;

<body ng-app="myApp">

<div runoob-directive></div>

<script>
var app = angular.module("myApp", []);
app.directive("runoobDirective", function() {
    return {
        template : "<h1>自定义指令!</h1>"
    };
});
</script>

</body>

      通过类来调用

<body ng-app="myApp">

<div class="runoob-directive"></div>

<script>
var app = angular.module("myApp", []);
app.directive("runoobDirective", function() {
    return {
        restrict : "C",//C=class
        template : "<h1>自定义指令!</h1>"
    };
});
</script>

<p><strong>注意：</strong> 你必须设置 <b>restrict</b> 的值为 "C" 才能通过类名来调用指令。</p>

</body>

通过注释来调用

<body ng-app="myApp">

<!-- directive: runoob-directive -->

<script>
var app = angular.module("myApp", []);
app.directive("runoobDirective", function() {
    return {
        restrict : "M",//M=comment
        replace : true,
        template : "<h1>自定义指令!</h1>"
    };
});
</script>

<p><strong>注意：</strong> 我们需要在该实例添加 <strong>replace</strong> 属性， 否则评论是不可见的。</p>

<p><strong>注意：</strong> 你必须设置 <b>restrict</b> 的值为 "M" 才能通过注释来调用指令。</p>

</body>

 

 

 

 

angularJS初学篇-1添加随笔


联系
我们