angularJS学习

最新推荐文章于 2019-12-11 14:34:19 发布

pdw2009

最新推荐文章于 2019-12-11 14:34:19 发布

阅读量606

点赞数

分类专栏： CSS/JS

本文链接：https://blog.csdn.net/pdw2009/article/details/45151415

版权

CSS/JS 专栏收录该内容

8 篇文章 1 订阅

订阅专栏

ng-app 指令

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

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

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

ng-init 指令

ng-init 指令为 AngularJS 应用程序定义了 初始值。

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

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

ng-model 指令

ng-model 指令 绑定 HTML 元素 到应用程序数据。

ng-model 指令也可以：

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

ng-repeat 指令

ng-repeat 指令对于集合中（数组中）的每个项会 克隆一次 HTML 元素。

控制器例子

<div ng-app="" ng-controller="personController">

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

</div>

<script>
function personController($scope) {
    $scope.person = {
        firstName: "John",
        lastName: "Doe"
    };
}
</script>

实例讲解：

AngularJS 应用程序由 ng-app 定义。应用程序在 <div> 内运行。

ng-controller 指令把控制器命名为 object。

函数 personController 是一个标准的 JavaScript 对象的构造函数。

控制器对象有一个属性：$scope.person。

person 对象有两个属性：firstName 和 lastName。

ng-model 指令绑定输入域到控制器的属性（firstName 和 lastName）。

控制器属性与方法

<div ng-app="" ng-controller="personController">

名： <input type="text" ng-model="person.firstName"><br>
姓： <input type="text" ng-model="person.lastName"><br>
<br>
姓名： {{person.fullName()}}

</div>

<script>
function personController($scope) {
    $scope.person = {
        firstName: "John",
        lastName: "Doe",
        fullName: function() {
            var x;
            x = $scope.person;
            return x.firstName + " " + x.lastName;
        }
    };

$scope.fullName = function() {
         var x;
         x = $scope.person;
         return x.firstName + " " + x.lastName;
     };
}
</script>

姓名： {{fullName()}} //调用方法

姓名： {{person.fullName()}} //属性

AngularJS $http

<div ng-app="" ng-controller="customersController">

<ul>
<li ng-repeat="x in names">
    {{ x.Name + ', ' + x.Country }}
</li>
</ul>

</div>

<script>
function customersController($scope,$http) {
    $http.get("http://www.w3cschool.cc/try/angularjs/data/Customers_JSON.php")
    .success(function(response) {$scope.names = response;});
}
</script>

应用解析:

AngularJS 应用通过 ng-app 定义。应用在 <div> 中执行。

ng-controller 指令设置了 controller 对象 名。

函数 customersController 是一个标准的 JavaScript 对象构造器。

控制器对象有一个属性: $scope.names。

$http.get() 从web服务器上读取静态 JSON 数据。

服务器数据文件为： http://www.w3cschool.cc/try/angularjs/data/Customers_JSON.php。

当从服务端载入 JSON 数据时，$scope.names 变为一个数组。

使用一个由模块替代的控制器

<span style="font-size:12px;"><!DOCTYPE html>
<html>
<head>
<script src="//www.w3cschool.cc/try/angularjs/1.2.5/angular.min.js"></script>
</head>

<body>

<div ng-app="myApp" ng-controller="myCtrl">
{{ firstName + " " + lastName }}
</div>

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

app.controller("myCtrl", function($scope) {
    $scope.firstName = "John";
    $scope.lastName = "Doe";
});
</script>

</body>
</html></span>

模块定义应放置在何处？

对于 HTML 应用程序，通常建议把所有的脚本都放置在 <body> 元素的最底部。

这会提高网页加载速度，因为 HTML 加载不受制于脚本加载。

在上面的多个 AngularJS 实例中，您将看到 AngularJS 库是在文档的 <head> 区域被加载。

在上面的实例中，AngularJS 在 <head> 元素中被加载，因为对 angular.module 的调用只能在库加载完成后才能进行。

另一个解决方案是在 <body> 元素中加载 AngularJS 库，但是必须放置在您的 AngularJS 脚本前面：

pdw2009

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
angularJS学习

ng-app 指令ng-app 指令定义了 AngularJS 应用程序的根元素。ng-app 指令在网页加载完毕时会自动引导（自动初始化）应用程序。稍后您将学习到 ng-app 如何通过一个值（比如 ng-app="myModule"）连接到代码模块。ng-init 指令ng-init 指令为 AngularJS 应用程序定义了初始值。通常
复制链接

扫一扫