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

angularJS初学篇-1添加随笔

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添加随笔