AngularJS

本文隶属于分类

Web开发

广告推荐

技术交流学习或者有任何问题欢迎加群 : 154514123 爱上编程

标签:class   style   log   com   http   si   使用   it   代码   

AngularJS 是一个 JavaScript 框架,扩展了HTML。

CRUD应用建议使用AngularJS,复杂的DOM操作建议使用JQuery。

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

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

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

ng-init 指令初始化应用程序数据

ng-repeat 指令会循环一个 HTML 元素

AngularJS 表达式写在双大括号内:{{ expression }}

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>

<div ng-app>
    <p><input type="text" ng-model="name" /></p>
    <p>{{name}}</p>
    <p ng-bind="name"></p>
</div>

</body>
</html> 
    <div ng-app="" ng-init="myName=‘Alvin‘">
        <input type="text" ng-model="myName" />
        <p>{{myName}}</p>
    </div>

HTML5 允许扩展的(自制的)属性,以 data- 开头。
AngularJS 属性以 ng- 开头,但是您可以使用 data-ng- 来让网页对 HTML5 有效。

<div data-ng-app="" data-ng-init="firstName=‘John‘">

 <p>姓名为 <span data-ng-bind="firstName"></span></p>

 </div> 

AngularJS 表达式中可以包含运算符:

<div ng-app="">
    <p>1+1={{1+1}}</p>
</div>
<div ng-app="" ng-init="a=1;b=2">
    <p>{{a+b}}</p>
    <p ng-bind="a*b"></p>
</div>

AngularJS对象:

<div ng-app="" ng-init="person={firstName:‘John‘,lastName:‘Doe‘}">

 <p>姓为 {{ person.lastName }}</p>
<p>姓为 <span ng-bind="person.lastName"></span></p> </div>

数组:

<div ng-app="" ng-init="points=[1,15,19,2,40]">
 <p>第三个值为 {{ points[2] }}</p>
 </div> 

循环:

    <div ng-app="" ng-init="names=[‘a‘,‘b‘,‘c‘]">
        <ul ng-repeat="x in names">
            <li>{{x}}</li>
        </ul>
    </div>
    <div ng-app="" ng-init="names=[{name:‘A‘,country:‘China‘},{name:‘B‘,country:‘USA‘}]">
        <ul>
            <li ng-repeat="x in names">
                {{ x.name + ‘, ‘ + x.country }}
            </li>
        </ul>
    </div>

自定义指令:通过.directive函数添加自定义指令。

<body ng-app="myApp">

<my-directive></my-directive>

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

</body>

可以通过以下方式来调用自定义指令:

<my-directive></my-directive>

<div my-directive></div>

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

可以限制自定义指令只能通过特定的方式来调用:

添加 restrict 属性,并设置只值为 "A", 来设置指令只能通过属性的方式来调用

  • E 只限元素名使用
  • A 只限属性使用
  • C 只限类名使用
var app = angular.module("myApp", []);
app.directive("myDirective", function() {
    return {
        restrict : "A",
        template : "<h1>自定义指令!</h1>"
    };
 });

$Scope对象:

Scope(作用域) 是应用在 HTML (视图) 和 JavaScript (控制器)之间的纽带。

<div ng-app="myApp" ng-controller="myCtrl">
    {{person}}
</div>

<script>
    var app = angular.module(‘myApp‘, []);
    app.controller(‘myCtrl‘, function ($scope) {
        $scope.person = "Leon";
    });
</script>    

$Scope对象的作用域:

作用于html元素指定的ng-controller="myCtrl"中

$rootScope根作用域:

用 rootscope 定义的值,可以在各个 controller 中使用。

 

AngularJS 控制器:

ng-controller 指令定义了应用程序控制器

<div ng-app="myApp" ng-controller="personCtrl">
名: <input type="text" ng-model="firstName"><br>
姓: <input type="text" ng-model="lastName"><br>
<br>
姓名: {{fullName()}}
</div>

<script>
var app = angular.module(myApp, []);
app.controller(personCtrl, function($scope) {
     $scope.firstName = "John";
    $scope.lastName = "Doe";
    $scope.fullName = function() {
        return $scope.firstName + " " + $scope.lastName;
    }
});
</script> 

<script>
    var app = angular.module(‘myApp‘, []);
    function myCtrl($scope) {
        $scope.person = "Leon";
    }
    app.controller = myCtrl;
    //app.controller(‘myCtrl‘, function ($scope) {
    //    $scope.person = "Leon";
    //});
</script>

在大型的应用程序中,通常是把控制器存储在外部js文件中。

只需要把 <script> 标签中的代码复制到外部文件中即可

 

过滤器:

|currency 格式化数字为货币格式。
|filter 从数组项中选择一个子集。
|lowercase 格式化字符串为小写。
|orderBy 根据某个表达式排列数组。
|uppercase 格式化字符串为大写。

{{person.lastName | uppercase}}

 <ul>
  <li ng-repeat="x in names | filter:name | orderBy:‘country‘">
    {{ (x.name | uppercase) + ‘, ‘ + x.country }}
  </li>
</ul>


Service:

可以创建自己的服务,或使用内建服务

$location 服务,它可以返回当前页面的 URL 地址。

<div ng-app="myApp" ng-controller="myCtrl">
{{myUrl}}
</div>

<script>
var app = angular.module(myApp, []);
app.controller(myCtrl, function($scope, $location) {
    $scope.myUrl = $location.absUrl();
});
</script>

$http 服务向服务器发送请求,应用响应服务器传送过来的数据。

<div ng-app="myApp" ng-controller="myCtrl"> 
<h1>{{myWelcome}}</h1>
</div>

<script>
var app = angular.module(myApp, []);
app.controller(myCtrl, function($scope, $http) {
  $http.get("welcome.htm").then(function (response) {
      $scope.myWelcome = response.data;
  });
});
</script>

 

<div ng-app="myApp" ng-controller="customersCtrl"> 
<ul>
  <li ng-repeat="x in names">
    {{ x.Name + ‘, ‘ + x.Country }}
  </li>
</ul>
</div>

<script>
var app = angular.module(myApp, []);
app.controller(customersCtrl, function($scope, $http) {
  $http.get("http://www.runoob.com/try/angularjs/data/Customers_JSON.php")
  .success(function (response) {$scope.names = response.records;});   //records是返回JSON的跟节点,是个数组
});
</script>

 

$timeout 服务对应了 JS window.setTimeout 函数。

<div ng-app="myApp" ng-controller="myCtrl"> 
<p>两秒后显示信息:</p>
<h1>{{myHeader}}</h1>
</div>

<script>
var app = angular.module(myApp, []);
app.controller(myCtrl, function($scope, $timeout) {
  $scope.myHeader = "Hello World!";
  $timeout(function () {
      $scope.myHeader = "How are you today?";
  }, 2000);
});
</script>

$interval 服务对应了 JS window.setInterval 函数。

<div ng-app="myApp" ng-controller="myCtrl"> 
<p>现在时间是:</p>
<h1>{{theTime}}</h1>
</div>

<script>
var app = angular.module(myApp, []);
app.controller(myCtrl, function($scope, $interval) {
  $scope.theTime = new Date().toLocaleTimeString();
  $interval(function () {
      $scope.theTime = new Date().toLocaleTimeString();
  }, 1000);
});
</script>

自定义Service:

<div ng-app="myApp" ng-controller="myCtrl">
<h1>{{aaa}}</h1>
</div>

<script>
var app = angular.module(myApp, []);

app.service(myService, function() {
    this.myFunc = function (x) {
        return x.toString(16);
    }
});
app.controller(myCtrl, function($scope, myService) {
  $scope.aaa = myService.myFunc(255);
});
</script>

 

<div ng-app="myApp" ng-controller="myCtrl">
<p>在获取数组 [255, 251, 200] 值时使用过滤器:</p>

<ul>
  <li ng-repeat="x in counts">{{x | myFormat}}</li>
</ul>

<p>过滤器使用服务将10进制转换为16进制。</p>
</div>

<script>
var app = angular.module(myApp, []);
app.service(hexafy, function() {
    this.myFunc = function (x) {
        return x.toString(16);
    }
});
app.filter(myFormat,[hexafy, function(hexafy) {
    return function(x) {
        return hexafy.myFunc(x);
    };
}]);
app.controller(myCtrl, function($scope) {
    $scope.counts = [255, 251, 200];
});
</script>

 

AngularJS

标签:class   style   log   com   http   si   使用   it   代码   

原文:http://www.cnblogs.com/leon-y-liu/p/5230185.html

技术交流学习或者有任何问题欢迎加群 : 154514123 爱上编程

广告推荐

讨论区