10-angular 实例学习-1

2021-02-02 09:51:11 浏览数 (2)

controller 和 ng-options

CSDN 链接

1.demo：

代码语言：javascript复制
    <div ng-app="myApp" ng-init="number=1;cost=1" ng-controller="myCtr" class="wrapper">
        <div class="money">
            numebr:
            <input type="number" ng-model="number" name="" min="0" id="">
            
            <br>

            cost:
            <input type="number" name="" min="0" ng-model="cost" id="">
            <select ng-model="inCurr" ng-options=" x for x in rate">
                <option>{{ x }}option>
            select>
            <br>
            
            <p ng-repeat="x in rate">
                {{ total(x) | currency:x}}
            p>
            <br>
            <button ng-click="">paybutton> 
            
        div>

    div>
    <script src='https://cdn.bootcss.com/angular.js/1.6.8/angular.js'>script>
    <script>
        var app = angular.module('myApp',[]);
        app.controller('myCtr',function($scope){
            $scope.numebr = 1;
            $scope.cost = 1;
            $scope.rate = ['USD','EUR','CNY'];
            $scope.inCurr = 'CNY';
            $scope.totalRate = {
                USD: 1,
                EUR: 0.8,
                CNY: 6

            };

            $scope.total = function total(outCurr){
                // console.log(outCurr);
                
                return $scope.convert($scope.number * $scope.cost,$scope.inCurr,outCurr)
            };

            $scope.convert = function covert(amount,inCurr,outCurr){
                // console.log(amount);
                // console.log(outCurr);
                
                // console.log(amount * $scope.totalRate[outCurr]);
                console.log(inCurr);
                
                return amount * $scope.totalRate[outCurr] / $scope.totalRate[inCurr];
            }

        })
    script>
复制代码
1.1 思考上面的 demo
  • 其中逻辑：
    • 为了写了一个汇率转换的小组件，其中 EUR USD CNY 三种。
  • 难点：
    • select 其中 ng-options 配合 select 和 option 一起使用。x for x in items
  • 函数
    • total(x) 首先计算总值，然后再根据汇率进行换算。通过 ng-repeat 来遍历三种汇率的钱币。

service-factory

  • 我们可以把 service 封装起来
  • 使用 .factory 然后在返回这个 service 然后我们就可以使用 这个 service 作用就是返回一个有属性有方法的对象。
代码语言：javascript复制
    <span class="hljs-comment">//创建模型</span>
    <span class="hljs-keyword">var</span> app = angular.module(<span class="hljs-string">'myApp'</span>, []);

    <span class="hljs-comment">//通过工厂模式创建自定义服务</span>
    app.factory(<span class="hljs-string">'myFactory'</span>, <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>) </span>{
        <span class="hljs-keyword">var</span> service = {};<span class="hljs-comment">//定义一个Object对象'</span>
        service.name = <span class="hljs-string">"张三"</span>;
        <span class="hljs-keyword">var</span> age;<span class="hljs-comment">//定义一个私有化的变量</span>
        <span class="hljs-comment">//对私有属性写getter和setter方法</span>
        service.setAge = <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">newAge</span>)</span>{
            age = newAge
        }
        service.getAge = <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>)</span>{
            <span class="hljs-keyword">return</span> age; 
        }
        <span class="hljs-keyword">return</span> service;<span class="hljs-comment">//返回这个Object对象</span>
    });
    <span class="hljs-comment">//创建控制器</span>
    app.controller(<span class="hljs-string">'myCtrl'</span>, <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">$scope, myFactory</span>) </span>{
        myFactory.setAge(<span class="hljs-number">20</span>);
        $scope.r =myFactory.getAge();
        alert(myFactory.name);
    });
<span class="xml"><span class="hljs-tag"></<span class="hljs-name">script</span>></span></span>
<span class="copy-code-btn">复制代码</span></code></pre><ul>
<li>在自定义服务里注入服务示例，但不能注入$scope作用域对象。</li>
</ul>
<pre><code class="hljs javascript copyable" lang="javascript"><script
    <span class="hljs-keyword">var</span> app = angular.module(<span class="hljs-string">'myApp'</span>, []);
    app.factory(<span class="hljs-string">'myFactory'</span>, <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">$http,$q</span>) </span>{
        <span class="hljs-keyword">var</span> service = {};
        service.name = <span class="hljs-string">"张三"</span>;
        <span class="hljs-comment">//请求数据</span>
        service.getData = <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>)</span>{
            <span class="hljs-keyword">var</span> d = $q.defer();
            $http.get(<span class="hljs-string">"url"</span>)<span class="hljs-comment">//读取数据的函数。</span>
            .success(<span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">response</span>) </span>{
                d.resolve(response);
            })
            .error(<span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>)</span>{
                d.reject(<span class="hljs-string">"error"</span>);
            });
            <span class="hljs-keyword">return</span> d.promise;
        }       
        <span class="hljs-keyword">return</span> service;
    });
    app.controller(<span class="hljs-string">'myCtrl'</span>, <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">$scope, myFactory</span>) </span>{
        <span class="hljs-comment">//alert(myFactory.name);</span>
        myFactory.getData().then(<span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">data</span>)</span>{
            <span class="hljs-built_in">console</span>.log(data);<span class="hljs-comment">//正确时走这儿</span>
        },<span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">data</span>)</span>{
            alert(data)<span class="hljs-comment">//错误时走这儿</span>
        });;
    });
<span class="xml"><span class="hljs-tag"></<span class="hljs-name">script</span>></span></span>
<span class="copy-code-btn">复制代码</span></code></pre><h2 class="heading" data-id="heading-4">service-service</h2>
<ul>
<li>通过service方式创建自定义服务，相当于new的一个对象：var s = new myService();，只要把属性和方法添加到this上才可以在controller里调用。</li>
</ul>
<pre><code class="hljs html copyable" lang="html"><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">ng-app</span>=<span class="hljs-string">"myApp"</span> <span class="hljs-attr">ng-controller</span>=<span class="hljs-string">"myCtrl"</span>></span>
    <span class="hljs-tag"><<span class="hljs-name">h1</span>></span>{{r}}<span class="hljs-tag"></<span class="hljs-name">h1</span>></span>
<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
<span class="hljs-tag"><<span class="hljs-name">script</span>></span><span class="javascript">
    <span class="hljs-keyword">var</span> app = angular.module(<span class="hljs-string">'myApp'</span>, []);

    app.service(<span class="hljs-string">'myService'</span>, <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">$http,$q</span>) </span>{
        <span class="hljs-keyword">this</span>.name = <span class="hljs-string">"service"</span>;
        <span class="hljs-keyword">this</span>.myFunc = <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">x</span>) </span>{
            <span class="hljs-keyword">return</span> x.toString(<span class="hljs-number">16</span>);<span class="hljs-comment">//转16进制</span>
        }
        <span class="hljs-keyword">this</span>.getData = <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>)</span>{
            <span class="hljs-keyword">var</span> d = $q.defer();
            $http.get(<span class="hljs-string">"ursl"</span>)<span class="hljs-comment">//读取数据的函数。</span>
                .success(<span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">response</span>) </span>{
                d.resolve(response);
            })
                .error(<span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>)</span>{
                alert(<span class="hljs-number">0</span>)
                d.reject(<span class="hljs-string">"error"</span>);
            });
            <span class="hljs-keyword">return</span> d.promise;
        }
    });
    app.controller(<span class="hljs-string">'myCtrl'</span>, <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">$scope, myService</span>) </span>{
        $scope.r = myService.myFunc(<span class="hljs-number">255</span>);
        myService.getData().then(<span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">data</span>)</span>{
            <span class="hljs-built_in">console</span>.log(data);<span class="hljs-comment">//正确时走这儿</span>
        },<span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">data</span>)</span>{
            alert(data)<span class="hljs-comment">//错误时走这儿</span>
        });
    });
</span><span class="hljs-tag"></<span class="hljs-name">script</span>></span>

<span class="copy-code-btn">复制代码</span></code></pre><h2 class="heading" data-id="heading-5">service-provder</h2>
<ul>
<li>
<p>只有provder是能传 .config() 函数的 service。如果想在 service 对象启用之前，先进行模块范围的配置，那就应该选择 provider。需要注意的是：在config函数里注入provider时，名字应该是：providerName Provider.</p>
</li>
<li>
<p>使用Provider的优点就是，你可以在Provider对象传递到应用程序的其他部分之前在app.config函数中对其进行修改。</p>
</li>
<li>
<p>当你使用Provider创建一个service时，唯一的可以在你的控制器中访问的属性和方法是通过$get()函数返回内容。</p>
</li>
</ul>
<pre><code class="hljs html copyable" lang="html"><span class="hljs-tag"><<span class="hljs-name">body</span>></span>
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">ng-app</span>=<span class="hljs-string">"myApp"</span> <span class="hljs-attr">ng-controller</span>=<span class="hljs-string">"myCtrl"</span>></span>
<span class="hljs-tag"></<span class="hljs-name">div</span>></span>

<span class="hljs-tag"><<span class="hljs-name">script</span>></span><span class="actionscript">
    <span class="hljs-keyword">var</span> app = angular.module(<span class="hljs-string">'myApp'</span>, []);

    <span class="hljs-comment">//需要注意的是：在注入provider时，名字应该是：providerName Provider   </span>
    app.config(<span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">(myProviderProvider)</span></span>{
        myProviderProvider.setName(<span class="hljs-string">"大圣"</span>);       
    });
    app.provider(<span class="hljs-string">'myProvider'</span>, <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">()</span> </span>{
        <span class="hljs-keyword">var</span> name=<span class="hljs-string">""</span>;
        <span class="hljs-keyword">var</span> test={<span class="hljs-string">"a"</span>:<span class="hljs-number">1</span>,<span class="hljs-string">"b"</span>:<span class="hljs-number">2</span>};
        <span class="hljs-comment">//注意的是，setter方法必须是(set 变量首字母大写)格式</span>
        <span class="hljs-keyword">this</span>.setName = <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">(newName)</span></span>{
            name = newName  
        }

        <span class="hljs-keyword">this</span>.$<span class="hljs-keyword">get</span> =<span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">($http,$q)</span></span>{
            <span class="hljs-keyword">return</span> {
                getData : <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">()</span></span>{
                    <span class="hljs-keyword">var</span> d = $q.defer();
                    $http.get(<span class="hljs-string">"url"</span>)<span class="hljs-comment">//读取数据的函数。</span>
                        .success(<span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">(response)</span> </span>{
                            d.resolve(response);
                        })
                        .error(<span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">()</span></span>{
                            d.reject(<span class="hljs-string">"error"</span>);
                        });
                    <span class="hljs-keyword">return</span> d.promise;
                },
                <span class="hljs-string">"lastName"</span>:name,
                <span class="hljs-string">"test"</span>:test
            }   
        }

    });
    app.controller(<span class="hljs-string">'myCtrl'</span>, <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">($scope,myProvider)</span> </span>{
        alert(myProvider.lastName);
        alert(myProvider.test.a)
        myProvider.getData().then(<span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">(data)</span></span>{
            <span class="hljs-comment">//alert(data)</span>
        },<span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">(data)</span></span>{
            <span class="hljs-comment">//alert(data)</span>
        });
    });
</span><span class="hljs-tag"></<span class="hljs-name">script</span>></span>
<span class="hljs-tag"></<span class="hljs-name">body</span>></span>
<span class="copy-code-btn">复制代码</span></code></pre><h3 class="heading" data-id="heading-6">过滤器中注入自定义服务</h3>
<pre><code class="hljs html copyable" lang="html"><span class="hljs-tag"><<span class="hljs-name">body</span>></span>
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">ng-app</span>=<span class="hljs-string">"myApp"</span>></span>
    在过滤器中使用服务:
    <span class="hljs-tag"><<span class="hljs-name">h1</span>></span>{{255 | myFormat}}<span class="hljs-tag"></<span class="hljs-name">h1</span>></span>
<span class="hljs-tag"></<span class="hljs-name">div</span>></span>

<span class="hljs-tag"><<span class="hljs-name">script</span>></span><span class="actionscript">
    <span class="hljs-keyword">var</span> app = angular.module(<span class="hljs-string">'myApp'</span>, []);
    app.service(<span class="hljs-string">'hexafy'</span>, <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">()</span> </span>{
        <span class="hljs-keyword">this</span>.myFunc = <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">(x)</span> </span>{
            <span class="hljs-keyword">return</span> x.toString(<span class="hljs-number">16</span>);
        }
    });
    app.filter(<span class="hljs-string">'myFormat'</span>,[<span class="hljs-string">'hexafy'</span>, <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">(hexafy)</span> </span>{
        <span class="hljs-keyword">return</span> <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">(x)</span> </span>{
            <span class="hljs-keyword">return</span> hexafy.myFunc(x);
        };
    }]);
</span><span class="hljs-tag"></<span class="hljs-name">script</span>></span>
<span class="hljs-tag"></<span class="hljs-name">body</span>></span>
<span class="copy-code-btn">复制代码</span></code></pre></div> <div class="image-viewer-box" data-v-78c9b824=""><!----></div>
sdn controller factory select service

0 人点赞