angular
All libraries used, CDNs used:
Copy the codeThe code is as follows:
<script src="/jquery/2.1.1/">>
<script src="//1.3.0-beta.13/">>
<link href="/bootstrap/3.3.1/css/" rel="stylesheet">
<script src="//1.7.0/" type="text/javascript"></script>
.angular's data binding instance, this is the most basic, all branches and leaves of angular start from here:.
Copy the codeThe code is as follows:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http:///TR/xhtml1/DTD/">
<html xmlns="http:///1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>angular</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<script src="/jquery/2.1.1/">>
<script src="//1.3.0-beta.13/">>
<link href="/bootstrap/3.3.1/css/" rel="stylesheet">
<script src="//1.7.0/" type="text/javascript"></script>
</head>
<body ng-app="app">
<script type="text/javascript">
var app = ("app",[]);
</script>
<div class="panel panel-default">
<div class="panel-heading">
The most powerful thing about angular, data binding binding
</div>
<div class="panel-body">
<div ng-controller="bf">
<input type="text" ng-model="data" />
{{data}}
<script>
("bf", function($scope) {
$ = "testData";
//$scope.$apply();
});
</script>
</div>
</div>
</div>
</body>
</html>
Through angular, display the corresponding data of the array;.
Copy the codeThe code is as follows:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http:///TR/xhtml1/DTD/">
<html xmlns="http:///1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>angular</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<script src="/jquery/2.1.1/">>
<script src="//1.3.0-beta.13/">>
<link href="/bootstrap/3.3.1/css/" rel="stylesheet">
<script src="//1.7.0/" type="text/javascript"></script>
</head>
<body ng-app="app">
<script type="text/javascript">
var app = ("app",[]);
</script>
<div class="panel panel-default">
<div class="panel-heading">
Through angular, display the corresponding data of the array;
</div>
<div class="panel-body">
<div ng-app="arr-app" ng-controller="arrCon">
<style>
.s{
color:#f00;
}
li{
cursor: pointer;
}
</style>
<ul>
<li ng-repeat="i in lists" ng-click="bered($index)" ng-class="{s : $index == flag}">
{{}}----{{}}
</li>
</ul>
<script>
//("arr-app", []);
function arrCon($scope) {
$ = 0;
$ = function(i) {
$ = i;
};
$ = [
{name : "hehe",
age:10},
{
name : "xx",
age : 20
},
{
name : "yy",
age : 2
},
{
name : "jj",
age : 220
}
]
};
</script>
</div>
</div>
</div>
</body>
</html>
DEMO of data filter:
Copy the codeThe code is as follows:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http:///TR/xhtml1/DTD/">
<html xmlns="http:///1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>angular</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<script src="/jquery/2.1.1/">>
<script src="//1.3.0-beta.13/">>
<link href="/bootstrap/3.3.1/css/" rel="stylesheet">
<script src="//1.7.0/" type="text/javascript"></script>
</head>
<body ng-app="app">
<script type="text/javascript">
var app = ("app",[]);
</script>
<div class="panel panel-default">
<div class="panel-heading">
Data filter;
</div>
<div class="panel-body" ng-controller="filte">
{{sourCode}}
<br>
{{sourCode | up}}
</div>
<script>
function filte($scope) {
$ = "hehe lala dudu oo zz";
};
("up" ,function() {
return function(ipt) {
return (/ (\w)/g,function($0,$1) {
return " "+$();
});
}
});
</script>
</div>
</body>
</html>
.factory factory, $provider, service, etc. are all the same. Don’t feel it’s difficult. In fact, it’s just to see a data model or instance;:
Copy the codeThe code is as follows:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http:///TR/xhtml1/DTD/">
<html xmlns="http:///1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>angular</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<script src="/jquery/2.1.1/">>
<script src="//1.3.0-beta.13/">>
<link href="/bootstrap/3.3.1/css/" rel="stylesheet">
<script src="//1.7.0/" type="text/javascript"></script>
</head>
<body ng-app="app">
<script type="text/javascript">
var app = ("app",[]);
</script>
<div class="panel panel-default">
<div class="panel-heading">
The factory in angular is equivalent to a common instance method, which can be understood as a function that can be used by multiple controllers;
</div>
<div class="panel-body" ng-controller="factory">
{{json}}
<script>
("ff", function() {
return {
"noting" : "json"
};
});
("factory", function($scope, ff) {
$ = ff;
});
</script>
</div>
</div>
<div class="panel panel-default">
<div class="panel-title">
angular instruction;
</div>
<div class="panel-body">
<heh>do you content for?</heh>
<script>
("heh", function() {
return {
restrict : "AE",
replace : true,
transclude : true,
template : '<div> <button class="btn-danger" ng-transclude></button></div>'
};
})
</script>
</div>
</div>
</body>
</html>
The use of .ng-switch directive (I really want this template, which is the angular of our common clicks to hide and display the Tab plug-in first)::
Copy the codeThe code is as follows:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http:///TR/xhtml1/DTD/">
<html xmlns="http:///1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>angular</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<script src="/jquery/2.1.1/">>
<script src="//1.3.0-beta.13/">>
<link href="/bootstrap/3.3.1/css/" rel="stylesheet">
<script src="//1.7.0/" type="text/javascript"></script>
</head>
<body ng-app="app">
<script type="text/javascript">
var app = ("app",[]);
</script>
<div class="panel panel-default">
<div class="panel-heading">
Use of 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">
("sw", function($scope) {
});
</script>
</div>
</body>
</html>
ng-src and ng-href;
Copy the codeThe code is as follows:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http:///TR/xhtml1/DTD/">
<html xmlns="http:///1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>angular</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<script src="/jquery/2.1.1/">>
<script src="//1.3.0-beta.13/">>
<link href="/bootstrap/3.3.1/css/" rel="stylesheet">
<script src="//1.7.0/" type="text/javascript"></script>
</head>
<body ng-app="app">
<script type="text/javascript">
var app = ("app",[]);
</script>
<div class="panel panel-default">
<div class="panel-heading">
Use of ng-src and ng-href (if src or href is used, the HTML will be loaded when initializing, which is definitely not possible)
</div>
<div class="panel-body" ng-controller="srcCon">
<a ng-href="{{logo}}" >
<img ng-src="{{logo}}" />
</a>
</div>
<script type="text/javascript">
("srcCon", function($scope) {
$ = "/templets/images/";
});
</script>
</div>
</body>
</html>
How to operate the page style, just change the bound data model directly:
Copy the codeThe code is as follows:
<div class="panel panel-default">
<div class="panel-heading">
angular operates on styles; (jQ is to manually select elements to operate on element styles. angular provides a more remarkable method, assigning the attributes of the element to a variable, you just need to change this variable)
</div>
<div class="panel-body">
<hehe ng-style="{width: w + 'px', height: h + 'px', backgroundColor: '#364'}">
hehe--o(^▽^)o wow;
</hehe>
</div>
<script type="text/javascript">
("hehe", function() {
function compile() {
};
return {
link : function($scope, $element) {
var obj = ($element);
//Not easy to use;
var add = obj[0].getElementsByClassName("add")[0];
var reduce = obj[0].getElementsByClassName("reduce")[0];
(add).bind("click", function(){
$ = $+10;
apply();
})
(reduce).bind("click", function(){
$ = $-10;
apply();
});
function apply() {
$scope.$apply();
}
return compile;
},
controller : function($scope) {
$ = 200;
$ = 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>
How to use the template in angular? This needs to be used with the router:
Copy the codeThe code is as follows:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http:///TR/xhtml1/DTD/">
<html xmlns="http:///1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>angular</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<script src="/jquery/2.1.1/">>
<script src="//1.3.0-beta.13/">>
<link href="/bootstrap/3.3.1/css/" rel="stylesheet">
<script src="//1.7.0/" type="text/javascript"></script>
</head>
<body ng-app="app">
<script type="text/javascript">
var app = ("app",[]);
</script>
<div class="panel panel-default">
<div class="panel-heading">
Using templates
</div>
<div class="panel-body" ng-controller="ngTpl">
<!---This type must be declared accurately-->
<script type="text/ng-template" >
{{ver}}
</script>
<!---tpl is a fixed value, not a variable, and the variable must be defined in scope--->
<div ng-include src="'tpl'"></div>
<div class="well">
<button ng-click="chan()">change</button>
</div>
</div>
<script type="text/javascript">
("ngTpl", function($scope) {
function hehe(str) {
str = _.shuffle(str);
return ("")
};
$ = "var——ver--heehe";
$ = function() {
$ = hehe( $ );
};
});
</script>
</div>
</body>
</html>
How to use $scope.$watch to change the template of the binding interface in real time:
Copy the codeThe code is as follows:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http:///TR/xhtml1/DTD/">
<html xmlns="http:///1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>angular</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<script src="/jquery/2.1.1/">>
<script src="//1.3.0-beta.13/">>
<link href="/bootstrap/3.3.1/css/" rel="stylesheet">
<script src="//1.7.0/" type="text/javascript"></script>
</head>
<body ng-app="app">
<script type="text/javascript">
var app = ("app",[]);
</script>
<div class="panel panel-default">
<div class="panel-heading">
<span class="label label-danger">update</span>angular notification data update three ways $scope.$digest(), $scope.$apply(), and update through $scope.$watch listening;
</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">
("apply", function($scope) {
$ = "lll________xxx";
$scope.m0 = 1;
ss = $scope;
$ = function() {
$ = $scope.m0;
//Yes, but an error was reported when the prompt was given. Who knows why?
//$scope.$apply();
$scope.$digest();
};
//Give the $scope.m0 variable is invalid;
$scope.$watch("m0", function(va) {
$ = va;
})
});
</script>
</div>
</body>
</html>
The tool method you define yourself in angular
Copy the codeThe code is as follows:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http:///TR/xhtml1/DTD/">
<html xmlns="http:///1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>angular</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<script src="/jquery/2.1.1/">>
<script src="//1.3.0-beta.13/">>
<link href="/bootstrap/3.3.1/css/" rel="stylesheet">
<script src="//1.7.0/" type="text/javascript"></script>
</head>
<body ng-app="app">
<script type="text/javascript">
var app = ("app",[]);
</script>
<div class="panel panel-default">
<div class="panel-heading">
List of tools and methods in angular
</div>
<div class="panel-body">
<ul class="nav nav-pills nav-stacked">
<li role="presentation"><a href="###"></a></li>
<li role="presentation"><a href="###"></a></li>
<li role="presentation"><a href="###"></a></li>
<li role="presentation"><a href="###"></a></li>
<li role="presentation"><a href="###"></a></li>
<li role="presentation"><a href="###"></a></li>
<li role="presentation"><a href="###"></a></li>
<li role="presentation"><a href="###"></a></li>
<li role="presentation"><a href="###"></a></li>
<li role="presentation"><a href="###"></a></li>
<li role="presentation"><a href="###"></a></li>
<li role="presentation"><a href="###"></a></li>
<li role="presentation"><a href="###"></a></li>
<li role="presentation"><a href="###"></a></li>
<li role="presentation"><a href="###"></a></li>
<li role="presentation"><a href="###"></a></li>
<li role="presentation"><a href="###"></a></li>
<li role="presentation"><a href="###"></a></li>
<li role="presentation"><a href="###"></a></li>
<li role="presentation"><a href="###"></a></li>
<li role="presentation"><a href="###"></a></li>
<li role="presentation"><a href="###"></a></li>
<li role="presentation"><a href="###"></a></li>
<li role="presentation"><a href="###"></a></li>
<li role="presentation"><a href="###"></a></li>
</ul >
<div class="well">
These tools and methods are similar to other libraries;
It is a small JQ for the anguarLite selection element;
<br>
It is a method of module elements;
</div>
</div>
</div>
</body>
</html>
The use of ng-transclude (this is an official case), the code is as follows:
Copy the codeThe code is as follows:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http:///TR/xhtml1/DTD/">
<html xmlns="http:///1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>angular</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<script src="/jquery/2.1.1/">>
<script src="//1.3.0-beta.13/">>
<link href="/bootstrap/3.3.1/css/" rel="stylesheet">
<script src="//1.7.0/" type="text/javascript"></script>
</head>
<body ng-app="app">
<script type="text/javascript">
var app = ("app",[]);
</script>
<div class="panel panel-default">
<div class="panel-heading">
Use of ng-transclude (this is an official case):
</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">
('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) {
$ = 'Lorem Ipsum';
$ = 'Neque porro quisquam est qui dolorem ipsum quia dolor...';
}]);
</script>
</div>
</body>
</html>
Here is an example of verifying the accuracy of the mailbox:
Copy the codeThe code is as follows:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http:///TR/xhtml1/DTD/">
<html xmlns="http:///1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>angular</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<script src="/jquery/2.1.1/">>
<script src="//1.3.0-beta.13/">>
<link href="/bootstrap/3.3.1/css/" rel="stylesheet">
<script src="//1.7.0/" type="text/javascript"></script>
</head>
<body ng-app="app">
<script type="text/javascript">
var app = ("app",[]);
</script>
<div class="panel panel-default">
<div class="panel-heading">
ngPaste, ngMouseup, ngKeyup, ngModelOptions... etc. refer to the official use, just use the check API, (the official needs FQ;)
</div>
<script src="/ngMessages/">>
<div class="panel-body" ng-controller="fromvaild">
If you do not use the ng-message component, the error message is as follows;
<form name="userForm">
<div class="field">
<label for="emailAddress">Enter your email address:</label>
<input type="email" name="emailAddress" ng-model="" required />
<!-- this stuff is WAY too complex -->
<div ng-if=".$" class="error">
You forgot to enter your email address...
</div>
<div ng-if="!.$ &&
.$" class="error">
You did not enter your email address correctly...
</div>
</div>
<input type="submit" />
</form>
<br>
<a href="/ngMessages/">DEMO written by foreigners</a>
</div>
<script type="text/javascript">
("fromvaild", function($scope) {
//$.$error = { minlength : true, required : false };
})
</script>
</div>
</body>
</html>
setTimeout and setInterval are both wrapped by angular, and return an instance of the delayed object:
Copy the codeThe code is as follows:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http:///TR/xhtml1/DTD/">
<html xmlns="http:///1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>angular</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<script src="/jquery/2.1.1/">>
<script src="//1.3.0-beta.13/">>
<link href="/bootstrap/3.3.1/css/" rel="stylesheet">
<script src="//1.7.0/" type="text/javascript"></script>
</head>
<body ng-app="app">
<script type="text/javascript">
var app = ("app",[]);
</script>
<div class="panel panel-default">
<div class="panel-heading">
$timeout and $interval, these two services;
</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">
("st", function($scope,$element,$interval) {
var $el = $($element[0]).find(".progress-bar");
(arguments);
//Use the selected element to use find to find;
$ = function() {
var df = $interval(function() {
var val = parseInt($())+4;
if(val>=104) $(df);
$( val+"%" ).width(val+"%");
},100);
(df)
//(aa = $interval)
};
});
</script>
</div>
</body>
</html>