AngularJS学习笔记

最新推荐文章于 2019-07-25 15:14:18 发布

陪你上房揭瓦

最新推荐文章于 2019-07-25 15:14:18 发布

阅读量436

点赞数

CC 4.0 BY-SA版权

分类专栏：学习笔记 JavaScript 文章标签：学习笔记

本文链接：https://blog.youkuaiyun.com/github_36496793/article/details/53056545

学习笔记同时被 2 个专栏收录

6 篇文章

订阅专栏

JavaScript

3 篇文章

订阅专栏

一 Angular表达式

<div ng-app="" ng-init="firstName='John';lastName='Doe'">
            <p>姓名： {{ firstName + " " + lastName }}</p>
        </div> 

        <div ng-app="" ng-init="firstName='John';lastName='Doe'">
            <p>姓名： <span ng-bind="firstName + ' ' + lastName"></span> </p>
        </div>

二 Angular指令

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

1 ng-app 指令初始化一个 AngularJS 应用程序。

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

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

<div ng-app="" ng-init="firstName='sunjiaxing'">
                <p>请输入你的名字：</p>
                <p>name:<input type="text" ng-model="firstName"></p>
                <p>你输入的是：{{firstName}}</p>
                <p>the name you have write : <span ng-bind="firstName"></span></p>      
            </div>

4 ng-repeat 指令会重复一个 HTML 元素

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

            <div ng-app="" ng-init="names=[{name:'sun',country:'china'},{name:'jia',country:'china1'},{name:'xing',country:'china3'}]">
                        <p>循环对象：</p>
                        <ul>
                            <li ng-repeat="x in names">
                                {{x.name+" "+x.country}}
                            </li>
                        </ul>
                    </div>

5 创建自定义的指令(使用 .directive 函数来添加自定义的指令。)

三 Angular模型

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 双向绑定

<div ng-app="myApp" ng-controller="myCtrl">
                <input type="text" ng-model="name" />
                <h2>{{name}}</h2>
            </div>
            <script>
                var app = angular.module('myApp',[]);
                app.controller("myCtrl",function(){

                })
            </script>

3   应用状态
4   CSS 类

四 AngularJS Scope(作用域)

1 如何使用 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>

2 Scope 概述

        AngularJS 应用组成如下：

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

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

3 Scope 作用范围

4 根作用域

        所有的应用都有一个 $rootScope，它可以作用在 ng-app 指令包含的所有 HTML 元素中。$rootScope 可作用于整个应用中。是各个 controller 中 scope 的桥梁。用 rootscope 定义的值，可以在各个 controller 中使用。

<div ng-app="myApp" ng-controller="myCtrl">
                <h1>{{lastname}}家族的成员有：</h1>
                <ul>
                    <li ng-repeat="x in names">{{x}}</li>
                </ul>
            </div>

            <script type="text/javascript">
                var app = angular.module('myApp',[]);
                app.controller('myCtrl',function($scope,$rootScope){
                    $scope.names = ['sun','jia','xing'];
                    $rootScope.lastname = "haha";
                })
            </script>

五 AngularJS 控制器

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

2 控制器方法

<div ng-app="myApp" ng-controller="myCtrl">
                <p>姓：<input type="text" ng-model="firstName"></p>
                <p>名：<input type="text" ng-model="lastName"></p>
                <p>名字是：{{fullName()}}</p>
            </div>
            <script type="text/javascript">
                var app = angular.module('myApp',[]);
                app.controller('myCtrl',function($scope){
                    $scope.fullName = function(){
                        return $scope.firstName+$scope.lastName;
                    }
                })
            </script>
            </body>

3 外部文件中的控制器

        在大型的应用程序中，通常是把控制器存储在外部文件中。
        <script src="personController.js"></script>

六 AngularJS 过滤器

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

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

2 表达式中添加过滤器

<div ng-app="myApp" ng-controller="myCtrl">
                <p>姓：<input type="text" ng-model="firstName"></p>
                <p>名：<input type="text" ng-model="lastName"></p>
                <p>名字是：{{fullName() | uppercase}}</p>
            </div>
            <script type="text/javascript">
                var app = angular.module('myApp',[]);
                app.controller('myCtrl',function($scope){
                    $scope.fullName = function(){
                        return $scope.firstName+$scope.lastName;
                    }
                })
            </script>

3 向指令添加过滤器

        过滤器可以通过一个管道字符（|）和一个过滤器添加到指令中。
        orderBy 过滤器根据表达式排列数组：

 <div ng-app="myApp" ng-controller="namesCtrl">
            <ul>
              <li ng-repeat="x in names | orderBy:'country'">
                {{ x.name + ', ' + x.country }}
              </li>
            </ul>
            <div>

七 AngularJS 服务(Service)

1 在 AngularJS 中，服务是一个函数或对象，可在你的 AngularJS 应用中使用。

3 $timeout 服务

    AngularJS $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);
            });

4 $interval 服务

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

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

5 创建自定义服务

    创建

app.service('hexafy', function() {
            this.myFunc = function (x) {
                return x.toString(16);
            }
        });

        使用
        app.controller('myCtrl', function($scope, hexafy) {
            $scope.hex = hexafy.myFunc(255);
        });

八 AngularJS XMLHttpRequest

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

1 读取 JSON 文件

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

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

                        <script type="text/javascript">
                            var app = angular.module('myApp',[]);
                            app.controller('myCtrl',function($scope,$http){
                                $http.get("sites.php").success(function(response){
                                    $scope.names = response.sites;
                                });
                            })
                        </script>

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

1 使用 ng-options 创建选择框

<div ng-app="myapp" ng-controller="myctrl">
            <select ng-model="selet" ng-options="x for x in names"></select>

            </div>
            <script type="text/javascript">
                var app = angular.module('myapp',[]);
                app.controller('myctrl',function($scope){
                    $scope.names = ['sun','jia','xing'];
                })
            </script>

2 也可以使用ng-repeat 指令来创建下拉列表

<select>
            <option ng-repeat="x in names">{{x}}</option>
            </select>

十 AngularJS 表格（ng-repeat 指令可以完美的显示表格。）

1 在表格中显示数据

<div ng-app="myapp" ng-controller="myctrl">
            <table>
                <tr ng-repeat="x in names">
                    <td>{{x.Name}}</td>
                    <td>{{x.Country}}</td>
                </tr>
            </table>

        </div>
        <script type="text/javascript">
            var app = angular.module('myapp',[]);
            app.controller('myctrl',function($scope,$http){
                $http.get("sites.php").success(function(response){
                    $scope.names = response.sites; 
                })
            })
        </script>

2 使用 CSS 样式

<style>
                table, th , td {
                  border: 1px solid grey;
                  border-collapse: collapse;
                  padding: 5px;
                }
                table tr:nth-child(odd) {
                  background-color: #f1f1f1;
                }
                table tr:nth-child(even) {
                  background-color: #ffffff;
                }
            </style>

十一 AngularJS SQL

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

            <table>
              <tr ng-repeat="x in names">
                <td>{{ x.Name }}</td>
                <td>{{ x.Country }}</td>
              </tr>
            </table>

        </div>

        <script>
            var app = angular.module('myApp', []);
            app.controller('customersCtrl', function($scope, $http) {
                $http.get("http://www.runoob.com/try/angularjs/data/Customers_MySQL.php")
                .success(function (response) {$scope.names = response.records;});
            });
        </script>

十二 AngularJS HTML DOM

1 ng-disabled 指令

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

 <div ng-app="" ng-init="mySwitch=true">

                <p>
                <button ng-disabled="mySwitch">点我!</button>
                </p>

                <p>
                <input type="checkbox" ng-model="mySwitch">按钮
                </p>

                <p>
                {{ mySwitch }}
                </p>

            </div>

2 ng-show 指令

ng-show 指令隐藏或显示一个 HTML 元素。
                 <div ng-app="">

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

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

                </div>

3 ng-hide 指令

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

<div ng-app="">

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

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

            </div>

十三 AngularJS 事件

1 ng-click 指令

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

                <button ng-click="count = count + 1">点我！</button>

                <p>{{ count }}</p>

            </div>