<!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>

match:!

sendRequest($http, api.userGet).success(function (response) {

                    a.name = response.name;

                    a.btndisable = (a.btndisable === true ? false : true);

                });

　　

AngularJs Test demo &front end MVVM implementation conjecture and argue.的更多相关文章

  1. AngularJS入门-demo

    双向绑定测试: <body ng-app> 请输入姓名:<input ng-model="myname"> <br> {{myname}},你好 ...

  2. AngularJS +HTML Demo

    <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="C ...

  3. AngularJS学习笔记(一) 关于MVVM和双向绑定

    写在前面: 因为需要开始学习ng,之前在知乎上听大神们介绍ng的时候说这个坑如何的大,学了一阵(其实也就三天),感觉ng做的很大很全,在合适的情境你可以完全使用ng搞定一切.这一点从诸如jqLite之 ...

  4. AngularJS入门Demo

    1 :表达式 <html> <head> <title>入门小Demo-1</title> <script src="angular.m ...

  5. angularjs transclude demo

    <!doctype html> <html lang="en" ng-app="expanderModule"> <head> ...

  6. angularjs ngRoute demo

    <!doctype html> <html lang="en" ng-app="AMail"> <head> <met ...

  7. angularjs $watch demo

    <!doctype html> <html lang="en" ng-app> <head> <meta charset="UT ...

  8. AngularJS 下拉列表demo

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script sr ...

  9. AngularJS 中文资料+工具+库+Demo 大搜集

    中文学习资料: 中文资料且成系统的就这么多,优酷上有个中文视频. http://www.cnblogs.com/lcllao/archive/2012/10/18/2728787.html   翻译的 ...

随机推荐

  1. Map的数据结构

    一:Map<String,Map<String,Map<String,List<A>>>>

  2. 后台list 如何转换为json格式

    request.setCharacterEncoding("utf-8"); response.setCharacterEncoding( "UTF-8"); ...

  3. HTML5 Web Storage -- 让Cookies看起来如此古老

    转载 原文 在此两部分组成的系列中,我们将来看看HTML5 规范中最棒而且最有趣的特性之一的Web Storage.我们将看看Web Storage 和 Cookies的历史,并从考虑以下几点: *C ...

  4. The Producer-Consumer Relationship

    //Listing 3-1. The Producer-Consumer Relationship Version 1 public class PC { public static void mai ...

  5. C 不改变顺序,原址剔除数组中的0元素

    #include <stdio.h> #include <malloc.h> #include <stdlib.h> #include <time.h> ...

  6. 在magento中如何回复客户的评论

    magento — 在magento中如何回复客户的评论 发表于 2012 年 8 月 18 日 agento本身是不带 回复评论的功能的,现成的扩展(无论免费的还是商业的)也没找到,那就自己写一个吧 ...

  7. 开始了ecshop

    一个多星期前开始接触ecshop,突然决定要用它来做网站,于是从网上找各种手册与视频,联系官网客服,然后知道官网一共提供三种类型的服务,一种是ecshop授权,不包含任何技术支持,第二种是易开店的标准 ...

  8. OrderSessionHelper查看订单在session是否存在的辅助类

    1. package com.biotool.web.controller.helper; import org.apache.commons.lang3.StringUtils; import ja ...

  9. toggle笔记

    <!DOCTYPE html> <!-- saved from url=(0040)http://v3.bootcss.com/examples/carousel/ --> & ...

  10. 私有IP地址范围

    私有IP地址范围 有一部分的地址专门是用于内网的地址,包括: A类中 10.0.0.0/8 B类中 172.16.0.0/12 ~ 172.31.0.0/12 C类中 192.168.0.0/16 这 ...