标签：style blog http io ar color 使用 sp for
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>angular</title>
<script src="http://cdn.bootcss.com/jquery/2.1.1/jquery.js"></script>
<script src="http://cdn.bootcss.com/angular.js/1.3.0-beta.13/angular.min.js"></script>
<link href="http://cdn.bootcss.com/bootstrap/3.3.1/css/bootstrap.css" rel="stylesheet">
<script src="http://cdn.bootcss.com/underscore.js/1.7.0/underscore-min.js" type="text/javascript"></script>
</head>
<body ng-app="app">
<script type="text/javascript">
var app = angular.module("app",[]);
</script>
<div class="panel panel-default">
<div class="panel-heading">
ng-switch的使用
</div>
<div class="panel-body" ng-controller="sw">
<div ng-init="a=2">
<ul ng-switch on="a">
<li ng-switch-when="1">1</li>
<li ng-switch-when="2">2</li>
<li ng-switch-default>other</li>
</ul>
</div>
<div>
<button ng-click="a=1" class="btn btn-primary">test</button>
<button ng-click="a=2" class="btn btn-info">test</button>
<button ng-click="a=3" class="btn btn-warning">test</button>
</div>
</div>
<script type="text/javascript">
app.controller("sw", function($scope) {
});
</script>
</div>
<br>
<div class="panel panel-default">
<div class="panel-heading">
ng-src和ng-href的使用(如果使用src或者href的话,HTML初始化的时候就会加载,肯定是不行的)
</div>
<div class="panel-body" ng-controller="srcCon">
<a ng-href="{{logo}}" >
<img ng-src="{{logo}}" />
</a>
</div>
<script type="text/javascript">
app.controller("srcCon", function($scope) {
$scope.logo = "http://www.mainbo.com/templets/images/logo.gif";
});
</script>
</div>
<div class="panel panel-default">
<div class="panel-heading">
angular对样式进行操作;(jQ是手动选择元素对元素样式进行操作,angular提供了一种更屌的方法,把元素的属性赋值给一个变量,你只要改变这个变量即可)
</div>
<div class="panel-body">
<hehe id="wh" ng-style="{width: w + ‘px‘, height: h + ‘px‘, backgroundColor: ‘#364‘}">
hehe--o(^▽^)o哇;
</hehe>
</div>
<script type="text/javascript">
app.directive("hehe", function() {
function compile() {
};
return {
link : function($scope, $element) {
var obj = angular.element($element);
//obj.find不好用;
var add = obj[0].getElementsByClassName("add")[0];
var reduce = obj[0].getElementsByClassName("reduce")[0];
angular.element(add).bind("click", function(){
$scope.h = $scope.h+10;
apply();
})
angular.element(reduce).bind("click", function(){
$scope.h = $scope.h-10;
apply();
});
function apply() {
$scope.$apply();
}
return compile;
},
controller : function($scope) {
$scope.w = 200;
$scope.h = 50;
//$scope.$apply();
},
restrict: ‘AE‘,
replace : true,
scope : "=ng-style",
transclude : true,
template : ‘<div><div ng-transclude></div><button class="btn btn-default add">+</button><button class="btn btn-default reduce">-</button></div>‘
}
})
</script>
</div>
<div class="panel panel-default">
<div class="panel-heading">
使用模板
</div>
<div class="panel-body" ng-controller="ngTpl">
<!---这个type要声明准确-->
<script type="text/ng-template" id="tpl">
{{ver}}
</script>
<!---tpl是一个定值不是变量，要给变量要在scope中进行定义---->
<div ng-include src="‘tpl‘"></div>
<div class="well">
<button ng-click="chan()">change</button>
</div>
</div>
<script type="text/javascript">
app.controller("ngTpl", function($scope) {
function hehe(str) {
str = _.shuffle(str);
return str.join("")
};
$scope.ver = "var——ver--heehe";
$scope.chan = function() {
$scope.ver = hehe( $scope.ver );
};
});
</script>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<span class="label label-danger">update</span>angular的通知数据更新三种方式$scope.$digest(),$scope.$apply(),以及通过$scope.$watch监听进行更新;
</div>
<div class="panel-body" ng-controller="apply">
{{hehe}}
<input type="text" ng-model="m0" />
<div class="well">
the value set by $scope.$watch ==>> {{wat}}
</div>
<br>
<button ng-click="up()" class="btn btn-default">
applay;
</button>
</div>
<script type="text/javascript">
app.controller("apply", function($scope) {
$scope.hehe = "lll________xxx";
$scope.m0 = 1;
ss = $scope;
$scope.up = function() {
$scope.hehe = $scope.m0;
//可以,但是给了提示的报错, 谁知道为甚毛?
//$scope.$apply();
$scope.$digest();
};
//给$scope.m0变量是无效的;
$scope.$watch("m0", function(va) {
$scope.wat = va;
})
});
</script>
</div>
<div class="panel panel-default">
<div class="panel-heading">
angular中的工具方法列表
</div>
<div class="panel-body">
<ul class="nav nav-pills nav-stacked">
<li role="presentation"><a href="###">angular.bind</a></li>
<li role="presentation"><a href="###">angular.bootstrap</a></li>
<li role="presentation"><a href="###">angular.copy</a></li>
<li role="presentation"><a href="###">angular.element</a></li>
<li role="presentation"><a href="###">angular.equals</a></li>
<li role="presentation"><a href="###">angular.extend</a></li>
<li role="presentation"><a href="###">angular.forEach</a></li>
<li role="presentation"><a href="###">angular.fromJson</a></li>
<li role="presentation"><a href="###">angular.identity</a></li>
<li role="presentation"><a href="###">angular.injector</a></li>
<li role="presentation"><a href="###">angular.isArray</a></li>
<li role="presentation"><a href="###">angular.isDate</a></li>
<li role="presentation"><a href="###">angular.isDefined</a></li>
<li role="presentation"><a href="###">angular.isElement</a></li>
<li role="presentation"><a href="###">angular.isFunction</a></li>
<li role="presentation"><a href="###">angular.isNumber</a></li>
<li role="presentation"><a href="###">angular.isObject</a></li>
<li role="presentation"><a href="###">angular.isString</a></li>
<li role="presentation"><a href="###">angular.isUndefined</a></li>
<li role="presentation"><a href="###">angular.lowercase</a></li>
<li role="presentation"><a href="###">angular.module</a></li>
<li role="presentation"><a href="###">angular.noop</a></li>
<li role="presentation"><a href="###">angular.reloadWithDebugInfo</a></li>
<li role="presentation"><a href="###">angular.toJson</a></li>
<li role="presentation"><a href="###">angular.uppercase</a></li>
</ul >
<div class="well">
这些工具方法跟其他库差不多;
angular.element是anguarLite选择元素的小JQ;
<br>
angular.module是模块元素的方法;
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
ng-transclude的使用(这个是官方的案例):
</div>
<div class="panel-body" ng-controller="ExampleController">
<div>
<input ng-model="title"><br>
<textarea ng-model="text"></textarea> <br/>
<pane title="{{title}}">{{text}}</pane>
</div>
</div>
<script type="text/javascript">
app.directive(‘pane‘, function(){
return {
restrict: ‘E‘,
transclude: true,
scope: { title:‘@‘ },
template: ‘<div style="border: 1px solid black;">‘ +
‘<div style="background-color: gray">{{title}}</div>‘ +
‘<ng-transclude></ng-transclude>‘ +
‘</div>‘
};
})
.controller(‘ExampleController‘, [‘$scope‘, function($scope) {
$scope.title = ‘Lorem Ipsum‘;
$scope.text = ‘Neque porro quisquam est qui dolorem ipsum quia dolor...‘;
}]);
</script>
</div>
<div class="panel panel-default">
<div class="panel-heading">
ngPaste以及ngMouseup和ngKeyup,ngModelOptions....等方法参考官方的使用,要用查API就好了,(官方的要FQ哦;)
</div>
<script src="https://yearofmoo.github.io/ngMessages/angular-messages.js"></script>
<div class="panel-body" ng-controller="fromvaild">
如果不用ng-message组件的错误提示如下;
<form name="userForm">
<div class="field">
<label for="emailAddress">Enter your email address:</label>
<input type="email" name="emailAddress" ng-model="data.email" required />
<!-- this stuff is WAY too complex -->
<div ng-if="userForm.emailAddress.$error.required" class="error">
You forgot to enter your email address...
</div>
<div ng-if="!userForm.emailAddress.$error.required &&
userForm.emailAddress.$error.email" class="error">
You did not enter your email address correctly...
</div>
</div>
<input type="submit" />
</form>
<br>
使用angular的message组件, 我没跑起来，⑩吐了, 真不好用, 按照DEMO都没跑起来;
<div class="control-group">
<label for="input_email_address">Email Address:</label>
<input class="form-control"
type="email"
name="email_address"
id="input_email_address"
ng-model="data.email_address"
fake-remote-record-validator="fakeEmails"
required />
<div class="error-messages" ng-if="interacted(my_form.email_address)" ng-messages="my_form.email_address.$error" ng-messages-include="form-messages">
<div ng-message="required">You did not enter an email address</div>
<div ng-message="record-loading">Checking database...</div>
<div ng-message="record-taken">Sorry, but {{ $parent.data.email_address }} is already taken</div>
</div>
</div>
<div class="control-group">
<label for="input_phone">Phone Number:</label>
<input class="form-control"
type="text"
name="phone"
id="input_phone"
ng-model="data.phone"
ng-pattern="phoneNumberRegex"
required />
<div class="error-messages" ng-if="interacted(my_form.phone)" ng-messages="my_form.phone.$error" ng-messages-include="form-messages">
<div ng-message="required">You did not enter a phone number</div>
<div ng-message="pattern">Please enter your phone number in the format of: (XXX) YYY-ZZZZ</div>
</div>
</div>
<a href="https://yearofmoo.github.io/ngMessages/">老外写的DEMO</a>
</div>
<script type="text/javascript">
app.controller("fromvaild", function($scope) {
//$scope.myField.$error = { minlength : true, required : false };
})
</script>
</div>
<div class="panel panel-default">
<div class="panel-heading">
$timeout和$interval,这两个服务;
</div>
<div class="panel-body" ng-controller="st">
<div class="list-group">
<a href="#" class="list-group-item active">
<h4 class="list-group-item-heading">setInterval</h4>
<p class="list-group-item-text">
$interval(fn, delay, [count], [invokeApply]);
</p>
</a>
<a href="#" class="list-group-item">
<h4 class="list-group-item-heading">timeout</h4>
<p class="list-group-item-text">
$timeout(fn, [delay], [invokeApply]);
</p>
</a>
</div>
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 0%;">
0%
</div>
</div>
<button class="btn-default btn" ng-click="prog()">
start
</button>
</div>
<script type="text/javascript">
app.controller("st", function($scope,$element,$interval) {
var $el = $($element[0]).find(".progress-bar");
console.log(arguments);
//使用angular.element选中的元素用find找不到东西;
$scope.prog = function() {
var df = $interval(function() {
var val = parseInt($el.html())+4;
if(val>=104)return //df.cancel();
$el.html( val+"%" ).width(val+"%");
},100);
console.log(df)
//console.log(aa = $interval)
};
});
</script>
</div>
<div class="list-group">
<a class="list-group-item list-group-item-success" href="http://www.zouyesheng.com/angular.html"> 参考链接,zouyesheng
<span class="badge">4</span>
</a>
<a class="list-group-item" href="http://www.angularjs.cn/"> 参考链接,angular中文网;
<span class="badge">4</span>
</a>
<a class="list-group-item list-group-item-success" href="https://github.com/angular/"> 参考链接,angular的代码库(github);
<span class="badge">4</span>
</a>
</div>
</body>
</html>
<script type="text/javascript">
//滚动到最后,测试用的;
window.onload = function() { window.scrollTop = 1000000; }
</script>
标签：style blog http io ar color 使用 sp for
原文地址：http://www.cnblogs.com/diligenceday/p/4153936.html
