Angular的学习笔记

Angular的学习笔记

ng-app=""定义Angular的使用的范围。

ng-model=“变量”，定义变量名。

ng-bind=“变量”，绑定变量名，获取该变量的数据。

ng-init=“变量=值；变量=值” 初始化变量的值，有多个变量时，中间用分号隔开；

HTML5 允许扩展的（自制的）属性，以 data- 开头。

AngularJS 属性以 ng- 开头，但是您可以使用 data-ng- 来让网页对 HTML5 有效。

表达式写在{{expression}}中，eg.{{5+5}}或者{{firstname+" "+firstname}}

M: 模块（Module） 定义了 AngularJS 应用。

C: 控制器（Controller） 用于控制 AngularJS 应用。

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

指令
ng-app:指令初始化一个AngularJS应用程序。
ng-init:指令初始化应用程序数据。
ng-model:指令吧元素值（比如输入域的值）绑定到应用程序。
ng-repeat:来循环数组。

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

AngularJS 完美的支持数据库的CRUD（增加Create、读取Read、更新Update、删除Delete）。

ng-app: 指令是 AngularJS 应用程序的根元素。

ng-init: 指令为 AngularJS 应用程序的初始值。

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

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

创建自定义指令：
通过添加 restrict 属性,并设置值为 “A”, 来设置指令只能通过属性的方式来调用:

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

restrict 值可以是以下几种:

1. E 作为元素名使用
2. A 作为属性使用
3. C 作为类名使用
4. M 作为注释使用

restrict 默认值为 EA, 即可以通过元素名和属性名来调用指令。

Scope （作用域）概述

AngularJS 应用组成如下：

View(视图), 即 HTML。
Model(模型), 当前视图中可用的数据。
Controller(控制器), 即 JavaScript 函数，可以添加或修改属性。
scope 是模型。

scope 是一个 JavaScript 对象，带有属性和方法，这些属性和方法可以在视图和控制器中使用。

AngularJS 服务(Service)

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

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

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

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

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

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

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

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

<p>现在时间是:</p>

<h1>{{theTime}}</h1>

</div>

<p>$interval 访问在指定的周期(以毫秒计)来调用函数或计算表达式。</p>

<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>

使用自定义的的服务 hexafy 将一个数字转换为16进制数:

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

<p>255 的16进制是:</p>

<h1>{{hex}}</h1>

</div>

<p>自定义服务，用于转换16进制数：</p>

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

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

XMLHttpRequest
$http 是 AngularJS 中的一个核心服务，用于读取远程服务器的数据。

// 简单的 GET 请求，可以改为 POST
$http({
    method: 'GET',
    url: '/someUrl'
}).then(function successCallback(response) {
        // 请求成功执行代码
    }, function errorCallback(response) {
        // 请求失败执行代码
});

$http
AngularJS $http 是一个用于读取web服务器上数据的服务。

$http.get(url) 是用于读取服务器数据的函数。

var app = angular.module('myApp', []);
    
app.controller('siteCtrl', function($scope, $http) {
    $http({
        method: 'GET',
        url: 'https://www.runoob.com/try/angularjs/data/sites.php'
    }).then(function successCallback(response) {
            $scope.names = response.data.sites;
        }, function errorCallback(response) {
            // 请求失败执行代码
    });
  
});

Select(选择框)
AngularJS 可以使用数组或对象创建一个下拉列表选项。

使用 ng-options 创建选择框

<div ng-app="myApp" ng-controller="myCtrl">
 
<select ng-init="selectedName = names[0]" ng-model="selectedName" ng-options="x for x in names">
</select>
 
</div>
 
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.names = ["Google", "Runoob", "Taobao"];
});
</script>

跨域 HTTP 请求
如果你需要从不同的服务器（不同域名）上获取数据就需要使用跨域 HTTP 请求。

跨域请求在网页上非常常见。很多网页从不同服务器上载入 CSS, 图片，Js脚本等。

在现代浏览器中，为了数据的安全，所有请求被严格限制在同一域名下，如果需要调用不同站点的数据，需要通过跨域来解决。

以下的 PHP 代码运行使用的网站进行跨域访问。

header("Access-Control-Allow-Origin: *");

ng-disabled 指令
ng-disabled 指令直接绑定应用程序数据到 HTML 的 disabled 属性。

ng-show 指令
ng-show 指令隐藏或显示一个 HTML 元素。

<p ng-show="true">我是可见的。</p>

<p ng-show="false">我是不可见的。</p>

ng-hide 指令
ng-hide 指令用于隐藏或显示 HTML 元素。

ng-click 指令
ng-click 指令定义了 AngularJS 点击事件。

隐藏 HTML 元素
ng-hide 指令用于设置应用部分是否可见。

ng-hide=“true” 设置 HTML 元素不可见。

ng-hide=“false” 设置 HTML 元素可见。

AngularJS 动画
ngAnimate 模型可以添加或移除 class 。

ngAnimate 模型并不能使 HTML 元素产生动画，但是 ngAnimate 会监测事件，类似隐藏显示 HTML 元素 ，如果事件发生 ngAnimate 就会使用预定义的 class 来设置 HTML 元素的动画。

AngularJS 添加/移除 class 的指令:

ng-show
ng-hide
ng-class
ng-view
ng-include
ng-repeat
ng-if
ng-switch
ng-show 和 ng-hide 指令用于添加或移除 ng-hide class 的值。

其他指令会在进入 DOM 会添加 ng-enter 类，移除 DOM 会添加 ng-leave 属性。

当 HTML 元素位置改变时，ng-repeat 指令同样可以添加 ng-move 类 。

此外， 在动画完成后，HTML 元素的类集合将被移除。例如： ng-hide 指令会添加以下类：

ng-animate
ng-hide-animate
ng-hide-add (如果元素将被隐藏)
ng-hide-remove (如果元素将显示)
ng-hide-add-active (如果元素将隐藏)
ng-hide-remove-active (如果元素将显示)

$routeProvider.when(url,{
    template:string, //在ng-view中插入简单的html内容
    templateUrl:string, //在ng-view中插入html模版文件
    controller:string,function / array, //在当前模版上执行的controller函数
    controllerAs:string, //为controller指定别名
    redirectTo:string,function, //重定向的地址
    resolve:object<key,function> //指定当前controller所依赖的其他模块
});