<!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. Andrew Ng机器学习公开课笔记 -- Online Learning

    网易公开课,第11课 notes,http://cs229.stanford.edu/notes/cs229-notes6.pdf   和之前看到的batch learning算法不一样,batch ...

  2. phpexcel 读取数据

    最近公司做一个客户导入会员的功能,以前导入都是使用csv格式导入的,但是客户反应问题挺多的,普遍是乱码(由于各种系统各种环境可能引起编码问题).最近想着就把这个导入完全改成excel导入,就研究了下p ...

  3. JS中的工厂模式

    .一个栗子: var BicycleShop = function(){}; BicycleShop.prototype = { sellBicycle : function( model ){ va ...

  4. spring容器IOC创建对象<二>

    问题?spring是如何创建对象的?什么时候创建对象?有几种创建方式?测试对象是单例的还是多例的 ?对象的初始化和销毁? 下面的四大模块IOC的内容了!需要深刻理解 SpringIOC定义:把对象的创 ...

  5. Docker Device Mapper 使用 direct-lvm

      一.Device Mapper: loop-lvm 默认 CentOS7 下 Docker 使用的 Device Mapper 设备默认使用 loopback 设备,后端为自动生成的稀疏文件,如下 ...

  6. Solr4.3之拼写检查Spellcheck功能

    原文地址:http://www.656463.com/article/iaquii.htm 拼写检查功能,能在搜索时提供一个较好用户体验,所以,主流的搜索引擎都有这个功能,在这之前,笔者先简单的说一下 ...

  7. 《Haskell趣学指南 Learn You a Haskell for Great Good!》－代码实验

    doubleMe x = x + x doubleUs x y = doubleMe x + doubleMe y doubleSmallNumber x = then x else x * doub ...

  8. [LeetCode] Combination Sum (bfs)

    Given a set of candidate numbers (C) and a target number (T), find all unique combinations in C wher ...

  9. cell的imageVIew的fram问题

    今天你在输出cell的imageVIew的fram时,发现新建的cell的imageVIew的frame是(0,0,0,0),但是重用的cell的imageVIew的frame输出是(15,19,30 ...

  10. asp.net字符串的数学表达式计算结果

    using System; using System.Collections.Generic; using System.Web; using System.CodeDom.Compiler; usi ...