zoukankan      html  css  js  c++  java
  • AngularJs Test demo &front end MVVM implementation conjecture and argue.

    <!DOCTYPE html>
    <html>
    <head>
        <title></title>
        <meta charset="utf-8" />
        <script src="scripts/angular.js"></script>
    </head>
    <body ng-app="app" ng-controller="cur">
        how are you!
        <div>
            <input type="text" ng-model="name" />
            {{name}}
            <button ng-click="pop(this)">pop</button>
        </div>
        <ul>
            <li ng-repeat="num in list">{{num}}</li>
        </ul>
        <select>
            <option ng-repeat="no in select" value="{{no}}">{{no}}</option>
        </select>
        <div ng-show="show()">ng show test</div>
        <div ng-show="show1">ng show test boolean</div>
        <script>
            var app = angular.module('app', []);
            app.controller('cur', function ($scope) {
                $scope.name = 'test';
                $scope.list = [1, 2, 3, 4];
                $scope.select = [4, 3, 2, 1];
                $scope.pop = function (obj) {
                    //alert(obj);
                    alert($scope.name);
                }
                $scope.show = function () {
                    return false;
                };
                $scope.show1 = true;
            });
        </script>
    </body>
    </html>
    

     mark 前端MVVM的实现方案:

    整个scope内部的模型,统一由pipe的property change事件来处理,每次触发捕获的change等事件时对比原有scope的data,发现不相同即重新刷新data。 每次执行,均执行整个scope模块init,内部事件全部采用捕获的方式,事件全部绑定在scope最外层。

    实现起来与后端mvvm是一致的,如wpf....

    自动替换:添加事件检测,捕获change等事件,change之后重新init整个scope.

    ==section 2016.7.15 deeper practice!

    <!DOCTYPE html>
    <html>
    <head>
        <title>calos practising angular!</title>
        <meta charset="utf-8" />
        <script src="scripts/angular.js"></script>
    </head>
    <body ng-app="app" ng-controller="cur">
        how are you!
        <div>
            <input type="text" ng-model="name" />
            {{name}}
            <button ng-disabled="!btndisable" ng-click="pop(this)">pop</button>
            <button ng-disabled="btndisable" ng-click="pop(this)">pop</button>
        </div>
        <ul>
            <li ng-repeat="num in list">{{num}}</li>
        </ul>
        <select ng-model="nameselected" ng-change="changename(this)">
            <option ng-repeat="no in select" value="{{no}}">{{no}}</option>
        </select>
        <div ng-show="show()">ng show test</div>
        <div ng-show="show1">ng show test boolean</div>
        <div ng-include="'/partials/partial1.html'">
            <!--how to use partial: remember to add sing quotation!
            like this. but these words will not be displayed!-->
        </div>
        <a href="#/">/ will show by default!</a>
        <a href="#/page1">Nav to page1 under pages folder!</a>
        <a href="#/showinfo">Nav to page1 under pages folder!</a>
        <a href="#/home">embeded page!</a>
        <div ng-view>
            <!-- this is a placeholder for routed pages to present! must have the tag ng-view="" -->
        </div>
        <script type="text/ng-template" id="embeded.home.html">
            <h1> Home </h1>
        </script>
    
        <script src="scripts/angular-route.js"></script>
        <script>
            var app = angular.module('app', ['ngRoute'])
    
            //#region infrastructure this is controllers region before configuring routes
            app.controller('cur', function ($scope, $http, $timeout, $interval) {
                //there should be a argument name validation in this controller
                //injection function, so, 1st name must be $scope, but can use alias inner!
                var a = $scope;
                a.btndisable = true;
                a.name = 'test';
                a.list = [1, 2, 3, 4];
                a.nameselected = '请选择';
                a.select = [4, 3, 2, 1];
                a.select = ['请选择'].concat(a.select);
                a.pop = function (obj) {
                    //alert(obj);
                    alert(a.name);
                    //below for $http.get practice!
                    $http.get('/jsons/json.json').success(function (response) {
                        a.name = response.name;
                        a.btndisable = (a.btndisable === true ? false : true);
                    }).then(function (ret) {//the data returned has a wapper including data!
                        a.name = ret.data.name;
                    });
                }
                a.show = function () {
                    return false;
                };
                a.changename = function (obj) {
                    console.log(obj);
                    a.name = a.name + 'reissue!'
                }
                a.show1 = true;
    
    
                //$timeout(function () { alert('timeout!') }, 5000);
                //$interval(function () { alert('interval') }, 2000);
            });
            app.controller('page1', function ($scope, $http) {
                $scope.name = 'page1 controller';
            });
            //#endregion
    
            app.config(['$routeProvider', function ($routeProvider) {
                $routeProvider
                .when('/', { template: 'Welcome!' })
                .when('/page1', { templateUrl: 'pages/page1.html', controller: 'page1' })
                .when('/showinfo', { template: 'show pure text!' })
                .when('/home', { templateUrl: 'embeded.home.html' })
                .otherwise({ redirectTo: '/' });
            }]);
        </script>
    </body>
    </html>
    View Code

    match:!

    sendRequest($http, api.userGet).success(function (response) {
                        a.name = response.name;
                        a.btndisable = (a.btndisable === true ? false : true);
                    });
    

      

  • 相关阅读:
    安装VMtools vim编辑器的使用 压缩包命令 Linux下的用户管理 (第三天)
    VM虚拟机安装 常用Linux命令 网卡配置 (第二天)
    数据库的交互模式 常用的dos命令 (第一天)
    Validate US Telephone Numbers FreeCodeCamp
    Arguments Optional FreeCodeCamp
    Everything Be True FreeCodeCamp
    Binary Agents FreeCodeCamp
    Steamroller FreeCodeCamp
    Drop it FreeCodeCamp
    Smallest Common Multiple FreeCodeCamp
  • 原文地址:https://www.cnblogs.com/hualiu0/p/5670280.html
Copyright © 2011-2022 走看看