angularJS entry basics

Author：Eve Cole Update Time：2025-06-14 16:00:03

angular

All libraries used, CDNs used:

The code copy is as follows:

.angular's data binding instance, this is the most basic, all branches and leaves of angular start from here:.

The code copy is as follows:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>angular</title>

</head>

var app = angular.module("app",[]);

</script>

<div>

The most powerful thing about angular is data binding binding

</div>

<div>

app.controller("bf", function($scope) {

$scope.data = "testData";

//$scope.$apply();

});

</script>

</div>

</body>

</html>

Through angular, display the corresponding data of the array;.

The code copy is as follows:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>angular</title>

</head>

var app = angular.module("app",[]);

</script>

<div>

Through angular, display the corresponding data of the array;

</div>

<div>

<style>

.s{

color:#f00;

}

li{

cursor: pointer;

}

</style>

<ul>

{{i.name}}----{{i.age}}

</li>

</ul>

//angular.module("arr-app", []);

function arrCon($scope) {

$scope.flag = 0;

$scope.bered = function(i) {

$scope.flag = i;

};

$scope.lists = [

{name : "hehe",

age:10},

{

name : "xx",

age : 20

{

name : "yy",

age : 2

{

name : "jj",

age : 220

}

]

};

</script>

</div>

</body>

</html>

DEMO of data filter:

The code copy is as follows:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>angular</title>

</head>

var app = angular.module("app",[]);

</script>

<div>

Data filter;

</div>

<br>

</div>

function filter($scope) {

$scope.sourCode = "hehe lala dudu oo zz";

};

app.filter("up" ,function() {

return function(ipt) {

return ipt.replace(/ (/w)/g,function($0,$1) {

return " "+$1.toUpperCase();

});

}

});

</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;:

The code copy is as follows:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>angular</title>

</head>

var app = angular.module("app",[]);

</script>

<div>

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>

app.factory("ff", function() {

return {

"noting" : "json"

};

});

app.controller("factory", function($scope, ff) {

$scope.json = ff;

});

</script>

</div>

<div>

angular directive;

</div>

<div>

<heh>do you content for?</heh>

app.directive("heh", function() {

return {

restrict : "AE",

replace : true,

transclude : true,

template : '<div> <button ng-transclude></button></div>'

};

})

</script>

</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)::

The code copy is as follows:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>angular</title>

</head>

var app = angular.module("app",[]);

</script>

<div>

Use of ng-switch

</div>

<li ng-switch-default>other</li>

</ul>

</div>

<div>

</div>

app.controller("sw", function($scope) {

});

</script>

</div>

</body>

</html>

ng-src and ng-href;

The code copy is as follows:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>angular</title>

</head>

var app = angular.module("app",[]);

</script>

<div>

Use of ng-src and ng-href (if you use src or href, the HTML will be loaded when initializing it, which is definitely not possible)

</div>

</a>

</div>

app.controller("srcCon", function($scope) {

$scope.logo = "http://www.mainbo.com/templets/images/logo.gif";

});

</script>

</div>

</body>

</html>

How to operate the page style, just change the bound data model directly:

The code copy is as follows:

<div>

angular operates on styles; (jQ is to manually select elements to operate on element styles. angular provides a more method to assign the attributes of the element to a variable, you just need to change this variable)

</div>

<div>

hehe--o(^^)o wow;

</hehe>

</div>

app.directive("hehe", function() {

function compile() {

};

return {

link : function($scope, $element) {

var obj = angular.element($element);

//obj.find is not easy to use;

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>+</button><button>-</button></div>'

}

})

</script>

</div>

How to use the template in angular? This needs to be used with the router:

The code copy is as follows:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>angular</title>

</head>

var app = angular.module("app",[]);

</script>

<div>

Using templates

</div>

</script>

<div>

<button ng-click="chan()">change</button>

</div>

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>

</body>

</html>

How to use $scope.$watch to change the template of the binding interface in real time:

The code copy is as follows:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>angular</title>

</head>

var app = angular.module("app",[]);

</script>

<div>

<span>update</span>angular notification data updates in three ways $scope.$digest(), $scope.$apply(), and updates through $scope.$watch listening;

</div>

<div>

the value set by $scope.$watch ==>> {{wat}}

</div>

<br>

apply;

</button>

</div>

app.controller("apply", function($scope) {

$scope.hehe = "lll________xxx";

$scope.m0 = 1;

ss = $scope;

$scope.up = function() {

$scope.hehe = $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 to be invalid;

$scope.$watch("m0", function(va) {

$scope.wat = va;

})

});

</script>

</div>

</body>

</html>

The tool method you define yourself in angular

The code copy is as follows:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>angular</title>

</head>

var app = angular.module("app",[]);

</script>

<div>

List of tool method in angular

</div>

<div>

<ul>

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

These tools and methods are similar to other libraries;

angular.element is a small JQ for anguarLite selection element;

<br>

angular.module is a method of module elements;

</div>

</body>

</html>

The use of ng-transclude (this is an official case), the code is as follows:

The code copy is as follows:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>angular</title>

</head>

var app = angular.module("app",[]);

</script>

<div>

Use of ng-transclude (this is an official case):

</div>

<div>

</div>

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 = 'Nequ porno quisquam est qui dolorem ipsum quia dolor...';

}]);

</script>

</div>

</body>

</html>

Here is an example of verifying the accuracy of the mailbox:

The code copy is as follows:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>angular</title>

</head>

var app = angular.module("app",[]);

</script>

<div>

ngPaste, ngMouseup, ngKeyup, ngModelOptions, etc., refer to the official use, just use the check API, (the official needs FQ;)

</div>

If you do not use the ng-message component, the error prompt is as follows;

<div>

<label for="emailAddress">Enter your email address:</label>

You forgot to enter your email address...

</div>

<div ng-if="!userForm.emailAddress.$error.required &&

userForm.emailAddress.$error.email">

You did not enter your email address correctly...

</div>

</form>

<br>

<a href="https://yearofmoo.github.io/ngMessages/">DEMO written by foreigners</a>

</div>

app.controller("fromvaild", function($scope) {

//$scope.myField.$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:

The code copy is as follows:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>angular</title>

</head>

var app = angular.module("app",[]);

</script>

<div>

$timeout and $interval, these two services;

</div>

<div>

<h4>setInterval</h4>

<p>

$interval(fn, delay, [count], [invokeApply]);

</p>

</a>

<h4>timeout</h4>

<p>

$timeout(fn, [delay], [invokeApply]);

</p>

</a>

</div>

<div>

</div>

start

</button>

</div>

app.controller("st", function($scope,$element,$interval) {

var $el = $($element[0]).find(".progress-bar");

console.log(arguments);

//Use the element selected by angular.element to find something without finding;

$scope.prog = function() {

var df = $interval(function() {

var val = parseInt($el.html())+4;

if(val>=104) $interval.cancel(df);

$el.html( val+"%" ).width(val+"%");

},100);

console.log(df)

//console.log(aa = $interval)

};

});

</script>

</div>

</body>

</html>