angularJS 入门基础

作者：Eve Cole 更新时间：2025-06-14 16:00:03

angular 　　

所有用到的库, 全部用的CDN：

复制代码代码如下:

.angular的数据绑定实例,这个是最基础的,angular的所有枝叶全部从这里开始:.

复制代码代码如下:

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

angular最强大的东西,数据的绑定binding

</div>

<div>

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

$scope.data = "testData";

//$scope.$apply();

});

</script>

</div>

</body>

</html>

通过angular,展示数组对应的数据;.

复制代码代码如下:

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

通过angular,展示数组对应的数据;

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

复制代码代码如下:

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

数据过滤器;

</div>

<br>

</div>

function filte($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工厂, $provider, service等等都是一样样的, 不要感觉很难, 其实就是看出一个数据模型或者实例就好了;：

复制代码代码如下:

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

angular中的factory就相当于一个公用的实例方法,可以理解为一个多个控制器都可以用的函数;

</div>

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

return {

"noting" : "json"

};

});

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

$scope.json = ff;

});

</script>

</div>

<div>

angular的指令;

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

.ng-switch指令的使用(这个跟模板很想的,就是我们常见的点击隐藏和显示Tab插件的angular首先):：

复制代码代码如下:

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

ng-switch的使用

</div>

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

</ul>

</div>

<div>

</div>

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

});

</script>

</div>

</body>

</html>

ng-src和ng-href;

复制代码代码如下:

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

ng-src和ng-href的使用(如果使用src或者href的话,HTML初始化的时候就会加载,肯定是不行的)

</div>

</a>

</div>

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

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

});

</script>

</div>

</body>

</html>

如何操作页面的样式,这个直接改绑定的数据模型就好了：

复制代码代码如下:

<div>

angular对样式进行操作;(jQ是手动选择元素对元素样式进行操作,angular提供了一种更的方法,把元素的属性赋值给一个变量,你只要改变这个变量即可)

</div>

<div>

hehe--o(^^)o哇;

</hehe>

</div>

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

}

})

</script>

</div>

angular中的模板如何使用,这个要配合路由器使用比较叼:

复制代码代码如下:

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

使用模板

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

如何使用$scope.$watch实时改变绑定界面的模板:

复制代码代码如下:

<!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的通知数据更新三种方式$scope.$digest(),$scope.$apply(),以及通过$scope.$watch监听进行更新;

</div>

<div>

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

</div>

<br>

applay;

</button>

</div>

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>

</body>

</html>

angular中自己定义的工具方法

复制代码代码如下:

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

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>

这些工具方法跟其他库差不多;

angular.element是anguarLite选择元素的小JQ;

<br>

angular.module是模块元素的方法;

</div>

</body>

</html>

ng-transclude的使用(这个是官方的案例)，代码如下:

复制代码代码如下:

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

ng-transclude的使用(这个是官方的案例):

</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 = 'Neque porro quisquam est qui dolorem ipsum quia dolor...';

}]);

</script>

</div>

</body>

</html>

一下验证邮箱准确性的例子:

复制代码代码如下:

<!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....等方法参考官方的使用,要用查API就好了,(官方的要FQ哦;)

</div>

如果不用ng-message组件的错误提示如下;

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

</div>

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

//$scope.myField.$error = { minlength : true, required : false };

})

</script>

</div>

</body>

</html>

setTimeout和setInterval都是经过angular包装过的，返回的是延迟对象的实例:

复制代码代码如下:

<!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和$interval,这两个服务;

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

//使用angular.element选中的元素用find找不到东西;

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