Angular JS 基础

Angular JS基本语法

1.angular JS简介
    1.ng-app 指令定义一个 AngularJS 应用程序。ng-app 指令告诉 AngularJS，<div> 元素是 AngularJS 应用程序 的"所有者"。
    2.ng-model 指令把元素值（比如输入域的值）绑定到应用程序。ng-model 指令把输入域的值绑定到应用程序变量 name。
    3.ng-bind 指令把应用程序数据绑定到 HTML 视图。ng-bind 指令把应用程序变量 name 绑定到某个段落的 innerHTML。

2.angular JS 表达式
    AngularJS 表达式写在双大括号内：{{ expression }}。
    AngularJS 表达式把数据绑定到 HTML，这与 ng-bind 指令有异曲同工之妙。
    AngularJS 将在表达式书写的位置"输出"数据。
    AngularJS 表达式 很像 JavaScript 表达式：它们可以包含文字、运算符和变量。实例 {{ 5 + 5 }} 或 {{ firstName + " " + lastName }}

    AngularJS 表达式 与 JavaScript 表达式：
    类似于 JavaScript 表达式，AngularJS 表达式可以包含字母，操作符，变量。
    与 JavaScript 表达式不同，AngularJS 表达式可以写在 HTML 中。
    与 JavaScript 表达式不同，AngularJS 表达式不支持条件判断，循环及异常。
    与 JavaScript 表达式不同，AngularJS 表达式支持过滤器。

3.angular JS指令
    1.ng-init 指令初始化应用程序数据。    
    2.ng-repeat 指令会重复一个 HTML 元素
        <ul>
              <li ng-repeat="x in names">
              {{ x.name + ', ' + x.country }}</li>
        </ul>
    3.通过添加 restrict 属性,并设置值为 "A", 来设置指令只能通过属性的方式来调用:
        var app = angular.module("myApp", []);
        app.directive("runoobDirective", function() {
             return      {
                restrict : "A",
                   template : "<h1>自定义指令!</h1>"
                };
        });
    restrict 值可以是以下几种:  E 作为元素名使用、A 作为属性使用、C 作为类名使用、M 作为注释使用
    restrict 默认值为 EA, 即可以通过元素名和属性名来调用指令。

4.angular JS模型
    1.使用 ng-model 指令来绑定输入域的值到控制器的属性。
        <div ng-app="myApp" ng-controller="myCtrl">
            名字: <input ng-model="name">
        </div>
        <script>
            var app = angular.module('myApp', []);
            app.controller('myCtrl', function($scope) {
                $scope.name = "John Doe";
            });
        </script>
    2.双向绑定，在修改输入域的值时， AngularJS 属性的值也将修改
    3.提示信息会在 ng-show 属性返回 true 的情况下显示。ng-show="myForm.myAddress.$error.email"
    4.ng-model 指令可以为应用数据提供状态值(invalid, dirty, touched, error)
        Valid: {{myForm.myAddress.$valid}} (如果输入的值是合法的则为 true)。
        Dirty: {{myForm.myAddress.$dirty}} (如果值改变则为 true)。
        Touched: {{myForm.myAddress.$touched}} (如果通过触屏点击则为 true)。
        ng-pristine:布尔值属性，表示用户是否修改了表单。如果为ture，表示没有修改过；false表示修改过

5.angular JS Scope（作用域）
    Scope(作用域) 是应用在 HTML (视图) 和 JavaScript (控制器)之间的纽带。
    Scope 是一个对象，有可用的方法和属性。
    Scope 可应用在视图和控制器上。
    AngularJS 创建控制器时，可以将 $scope 对象当作一个参数传递
    scope 是一个 JavaScript 对象，带有属性和方法，这些属性和方法可以在视图和控制器中使用。
        $scope.sayHello = function() {
                    $scope.greeting = 'Hello ' + $scope.name + '!';
            };

6.angular JS控制器
    1.ng-controller 指令定义了应用程序控制器。控制器是 JavaScript 对象，由标准的 JavaScript 对象的构造函数 创建。
    2.AngularJS 应用程序由 ng-app 定义。应用程序在 <div> 内运行。
        ng-controller="myCtrl" 属性是一个 AngularJS 指令。用于定义一个控制器。
        myCtrl 函数是一个 JavaScript 函数。
        AngularJS 使用$scope 对象来调用控制器。
        在 AngularJS 中， $scope 是一个应用对象(属于应用变量和函数)。
        控制器的 $scope （相当于作用域、控制范围）用来保存AngularJS Model(模型)的对象。
    3.model 中可以有多个 controller

7.angular JS 过滤器
    1.uppercase 过滤器将字符串格式化为大写 <p>姓名为 {{ lastName | uppercase }}</p>
    2.lowercase 过滤器将字符串格式化为小写 <p>姓名为 {{ lastName | lowercase }}</p>
    3.currency 过滤器将数字格式化为货币格式 <p>总价 = {{ (quantity * price) | currency }}</p>
    4.orderBy 过滤器根据表达式排列数组 
        <ul>
               <li ng-repeat="x in names | orderBy:'country'">
                    {{ x.name + ', ' + x.country }}
                </li>
        </ul>
    5.filter 过滤器从数组中选择一个子集 
        <p><input type="text" ng-model="test"></p>
        <ul>
                <li ng-repeat="x in names | filter:test | orderBy:'country'">
                   {{ (x.name | uppercase) + ', ' + x.country }}
                </li>
        </ul>

8.angularJS  服务(Service)
    1.$location 服务，它可以返回当前页面的 URL 地址  $scope.myUrl = $location.absUrl();
    2.$http 是 AngularJS 应用中最常用的服务。 服务向服务器发送请求，应用响应服务器传送过来的数据
        app.controller('myCtrl', function($scope, $http) {
                $http.get("welcome.htm").then(function (response) {
                    $scope.myWelcome = response.data;
                });
        });
    3.AngularJS $timeout 服务对应了 JS window.setTimeout 函数 --$timeout 访问在规定的毫秒数后执行指定函数。
    4.AngularJS $interval 服务对应了 JS window.setInterval 函数。
        app.controller('myCtrl', function($scope, $interval) {
                $scope.theTime = new Date().toLocaleTimeString();
                $interval(function () {
                    $scope.theTime = new Date().toLocaleTimeString();
                }, 1000);
        });

8.angularJS  Http服务
    1.$http 是 AngularJS 中的一个核心服务，用于读取远程服务器的数据。
    使用格式：
    // 简单的 GET 请求，可以改为 POST
        $http({
               method: 'GET',
                url: '/someUrl'
            }).then(function successCallback(response) {
                // 请求成功执行代码
                }, function errorCallback(response) {
                // 请求失败执行代码
        });
    2.POST 与 GET 简写方法格式：
    $http.get('/someUrl', config).then(successCallback, errorCallback);
    $http.post('/someUrl', data, config).then(successCallback, errorCallback);
    3.实例
    基本方法：
        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) {
                        // 请求失败执行代码
                });
        });
    简单方法：
        app.controller('siteCtrl', function($scope, $http) {
        $http.get("http://www.runoob.com/try/angularjs/data/sites.php")
                 .then(function (response) {$scope.names = response.data.sites;});
        });

9.angular select（选择框）
    1.使用ng-option来创建选择框
        <select ng-init="selectedName = names[0]" ng-model="selectedName" ng-options="x for x in names">
        </select>
        ng-init 设置默认选中值。
    2.使用ng-repeat来创建下拉列表
        <select>
        <option ng-repeat="x in names">{{x}}</option>
        </select>
    3.使用 ng-options 的选项是一个对象， ng-repeat 是一个字符串。    

10.angularJS 表格
    1.ng-repeat 指令可以完美的显示表格。
        <table>
              <tr ng-repeat="x in names">
                    <td>{{ x.Name }}</td>
                    <td>{{ x.Country }}</td>
              </tr>
        </table>
    2.显示序号 ($index)   表格显示序号可以在 <td> 中添加 $index:

11.angularJS SQL
    http://www.runoob.com/angularjs/angularjs-sql.html

12.angularJS HTML DOM元素  显示与隐藏
    1.ng-disabled 指令直接绑定应用程序数据到 HTML 的 disabled 属性。
    2.ng-disabled 指令绑定应用程序数据 "mySwitch" 到 HTML 的 disabled 属性。
        ng-model 指令绑定 "mySwitch" 到 HTML input checkbox 元素的内容（value）。
        如果 mySwitch 为true, 按钮将不可用: 
    3.ng-show 指令隐藏或显示一个 HTML 元素。
    4.ng-hide 指令用于隐藏或显示 HTML 元素。

13.angularJS 事件
    1.ng-click 指令定义了 AngularJS 点击事件。

14.angularJS 模块
    1.通过 AngularJS 的 angular.module 函数来创建模块
        var app = angular.module("myApp", []);  "myApp" 参数对应执行应用的 HTML 元素。
    2.使用 ng-controller 指令来添加应用的控制器
        <div ng-app="myApp" ng-controller="myCtrl">
        var app = angular.module("myApp", []);
        app.controller("myCtrl", function($scope) {
                $scope.firstName = "John";
                $scope.lastName = "Doe";
            });

15.angularJS 表单
    1.复选框操作
        <div ng-app="">
          <form>
                选中复选框，显示标题:
                <input type="checkbox" ng-model="myVar">
          </form>
              <h1 ng-show="myVar">My Header</h1>
        </div>
    2.单选框操作
        <form>
              选择一个选项:
              <input type="radio" ng-model="myVar" value="dogs">Dogs
              <input type="radio" ng-model="myVar" value="tuts">Tutorials
              <input type="radio" ng-model="myVar" value="cars">Cars
        </form>
        <div ng-switch="myVar">
              <div ng-switch-when="dogs">
                 <h1>Dogs</h1>
                 <p>Welcome to a world of dogs.</p>
             </div>
              <div ng-switch-when="tuts">
                 <h1>Tutorials</h1>
                 <p>Learn from examples.</p>
             </div>
              <div ng-switch-when="cars">
               <h1>Cars</h1>
                 <p>Read about cars.</p>
             </div>
            </div>
    3.下拉菜单和单选框操作类似

16.angular JS 输入验证
    http://www.runoob.com/angularjs/angularjs-validation.html

17.angular JS API 判定数据
    API    描述
    angular.lowercase()    转换字符串为小写
    angular.uppercase()    转换字符串为大写
    angular.isString()    判断给定的对象是否为字符串，如果是返回 true。
    angular.isNumber()    判断给定的对象是否为数字，如果是返回 true。

18.angular JS  bootstrap
    http://www.runoob.com/angularjs/angularjs-bootstrap.html

19.angular JS 动画
    1.AngularJS 提供了动画效果，可以配合 CSS 使用。
        AngularJS 使用动画需要引入 angular-animate.min.js 库。
    2. transition: all linear 0.5s;    css过渡

20.angular JS 
    1.实例：    http://www.runoob.com/angularjs/angularjs-examples.html
    2.参考手册： http://www.runoob.com/angularjs/angularjs-reference.html