AngularJS 1.x学习<1>

  1. AngularJS 通过 指令 (ng-directives)扩展了 HTML,且通过 表达式 绑定数据到 HTML。
  2. ng-app 指令定义一个 AngularJS 应用程序;ng-model指令把元素值(比如输入域的值)绑定到应用程序;ng-bind 指令把应用程序数据绑定到 HTML 视图;ng-init 指令初始化 AngularJS 应用程序变量
  3. AngularJS 指令是以 ng 作为前缀的 HTML 属性
  4. HTML5 允许扩展的(自制的)属性,以 data- 开头
  5. AngularJS 表达式写在双大括号内:{{ expression }};表达式把数据绑定到 HTML,这与 ng-bind 指令有异曲同工之妙

AngularJS 应用


<div ng-app="myApp" ng-controller="myCtrl">

名: <input type="text" ng-model="firstName"><br>
姓: <input type="text" ng-model="lastName"><br>
<br>
姓名: {{firstName + " " + lastName}}

</div>

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

AngularJS 模块(Module) 定义了 AngularJS 应用。
AngularJS 控制器(Controller) 用于控制 AngularJS 应用。
ng-app指令定义了应用, ng-controller 定义了控制器。

一.指令

AngularJS 指令是扩展的 HTML 属性,带有前缀ng-

1.ng-repeat指令会重复一个 HTML 元素:


<div ng-app="" ng-init="names=['Jani','Hege','Kai']">
  <p>使用 ng-repeat 来循环数组</p>
  <ul>
    <li ng-repeat="x in names">
      {{ x }}
    </li>
  </ul>
</div>

2.ng-app 指令定义了 AngularJS 应用程序的 根元素
3.ng-model指令用于绑定应用程序数据到 HTML 控制器(input, select, textarea)的值

二.Scope(作用域)

Scope(作用域) 是应用在 HTML (视图) 和 JavaScript (控制器)之间的纽带。Scope 是一个对象,有可用的方法和属性。Scope 可应用在视图和控制器上。

在 AngularJS 创建控制器时,可以将 $scope 对象当作一个参数传递:


<div ng-app="myApp" ng-controller="myCtrl">

<h1>{{carname}}</h1>

</div>

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

app.controller('myCtrl', function($scope) {
    $scope.carname = "Volvo";
});
</script>

当在控制器中添加 scope(HTML)scope 前缀, 只需要添加属性名即可,如: {{carnage}}

三.控制器

AngularJS 控制器 控制 AngularJS 应用程序的数据。 AngularJS 控制器是常规的 JavaScript 对象。

四.过滤器

过滤器可以使用一个管道字符(|)添加到表达式和指令中。

<div ng-app="myApp" ng-controller="personCtrl">

<p>姓名为 {{ lastName | uppercase }}</p>

</div>

五.服务(Service)

在 AngularJS 中,服务是一个函数或对象,可在你的 AngularJS 应用中使用。AngularJS 内建了30 多个服务。

var app = angular.module('myApp', []);
app.controller('customersCtrl', function($scope, $location) {
    $scope.myUrl = $location.absUrl();
});

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

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


var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $http) {
    $http.get("welcome.htm").then(function (response) {
        $scope.myWelcome = response.data;
    });
});
阅读更多
想对作者说点什么?

博主推荐

换一批

没有更多推荐了,返回首页