angular项目学习笔记

_{引用地址：}

<script src="https://cdn.staticfile.org/angular.js/1.4.6/angular.min.js"></script>

1.AngularJS 指令

angular自定义属性可以ng-或者是data-ng-开头

1）ng-app=" "  定义angularJS的使用范围；

2）ng-init="变量=值;变量='值'"  初始化变量的值，有多个变量时，中间用分号隔开；

3）ng-model="变量"  定义变量名；数据的双向绑定；

4）ng-bind="变量"  绑定变量名，获取该变量的数据。这里的变量就是第3条的变量名。但是一般都用双重花括号来获取变量的值，比如：{{变量}}；

    <div ng-app="" ng-init="name='John'">
        <p>名字 : <input type="text" ng-model="name"></p>
        <h1>Hello {{name}}</h1>
        <p ng-bind="name"></p>
    </div>

5）ng-controller 指明了控制器；ng-app指令指明了应用,

    <div ng-app="myApp" ng-controller="myCtrl">
        <p>名字 : <input type="text" ng-model="name"></p>
        <h1>Hello {{name}}</h1>
        <p ng-bind="name"></p>
    </div>

    <script>
　　　　　// AngularJS 模块定义应用:
        var app = angular.module('myApp',[]);
　　　　　// AngularJS 控制器控制应用:
        app.controller('myCtrl',function($scope){
            $scope.name = 'Ben'
        })

    </script>

 6）ng-repeat 指令会重复一个 HTML 元素；

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

7）ng-options创建选择框，使用 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>

<select ng-model="selectedSite" ng-options="x.site for x in sites">
</select>

<h1>你选择的是: {{selectedSite.site}}</h1>
<p>网址为: {{selectedSite.url}}</p>

</div>

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
   $scope.sites = [
        {site : "Google", url : "http://www.google.com"},
        {site : "Runoob", url : "http://www.runoob.com"},
        {site : "Taobao", url : "http://www.taobao.com"}
    ];
});
</script>

ng-option的数据源可以使对象，ng-options="x for (x, y) in sites" 这时你选择的值为在 key-value 对中的 value，视图展示的选项是键

 

这里也可以使用ng-repeat来创建选择框，ng-repeat 有局限性，选择的值是一个字符串

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

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

    </div>

    <script>
        var app = angular.module('myApp', []);
        app.controller('myCtrl', function ($scope) {
            $scope.names = ["Google", "Runoob", "Taobao"];
        });
    </script>

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

9）ng-show 指令隐藏或显示一个 HTML 元素；

10）ng-hide 指令用于隐藏或显示 HTML 元素；

12）ng-click 指令定义了 AngularJS 点击事件；

13）ng-switch根据值搭配ng-switch-when对节点进行显示隐藏；

14） ng-include 指令来包含 HTML 内容；

15）自定义指令

除了 AngularJS 内置的指令外，我们还可以创建自定义指令。

你可以使用 .directive 函数来添加自定义的指令。

要调用自定义指令，HTML 元素上需要添加自定义指令名。

使用驼峰法来命名一个指令， runoobDirective, 但在使用它时需要以 - 分割, runoob-directive

    <!-- <runoob-directive></runoob-directive> -->
    <!-- <div runoob-directive></div> -->
    <div class="runoob-directive"></div>

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

注意： 必须设置 restrict 的值为 "C" 才能通过类名来调用指令。

    <!-- directive: runoob-directive -->

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

注意： 我们需要在该实例添加 replace 属性，必须设置 restrict 的值为 "M" 才能通过注释来调用指令。

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

• E 作为元素名使用
• A 作为属性使用
• C 作为类名使用
• M 作为注释使用

 

2.AngularJS 表达式写在双大括号内：{{ expression }}

3.AngularJS的service

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

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

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

        <p>两秒后显示信息:</p>

        <h1>{{myHeader}}</h1>

    </div>

    <p>$timeout 访问在规定的毫秒数后执行指定函数。</p>

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

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