星期一入职新公司，听说会用AngularJS,所以这个周末会一直学习和加强认识AngularJS.
so， let's start...
api：http://docs.angularjs.org/api/ng/function/angular.bootstrap
1 AngularJS 的核心是MVC 模块化 自动化双向数据绑定 语义化标签 依赖注入
虽然我还不是很明白上面的具体是怎样使用，但是先mark下来，等后面在慢慢理解
1 Hello world!
首先去官网下载angular.js,然后还得修改html文件
<!DOCTYPE html> <html ng-app> <head> <title></title> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" /> <script src="angular.min.js"></script> <script> function hello($scope) { $scope.name = "world"; } </script> </head> <body ng-controller="hello"> <h1> hello {{name}} </h1> </body> </html>
需要注意的是
1 必须指明ng-app
2 ng-controller划分vm的作用于范围
3 函数的第一个参数必须是$scope
4 在ie7下显示不正常，暂时我还没找到解决方法，先放一下，等深入了解再回来解决，mark
我们再来了解一下另外一个陌生的名词ng-model，我目前的理解是用来绑定数据的
看例子
<!DOCTYPE html> <html ng-app> <head> <title></title> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" /> <script src="angular.min.js"></script> <script> function helloControler($scope) { $scope.name = "world"; $scope.greet = {name:'Jackey',sex:'male'}; } </script> </head> <body ng-controller="helloControler"> <h1> <input ng-model="greet.name" /> <p>{{greet.name}},go</p> </h1> </body> </html>
看了一下司徒正美的博客http://www.cnblogs.com/rubylouvre/p/3140251.html
2 参考学习一下用于生产环境的写法
<!DOCTYPE html> <html ng-app="text"> <head> <title></title> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" /> <script src="angular.min.js"></script> <script> angular.module("text", []).controller("helloControler", function ($scope) { $scope.greet = "Jackey"; }); </script> </head> <body ng-controller="helloControler"> <h1> <input ng-model="greet.name" /> <p>{{greet}},go</p> </h1> </body> </html>
主要注意的几点是：
1 ng-app:"text" 和module一致
3 绑定数据
我们再试着绑定数据，用ng-bind /ng-bind-html /ng-bind-html-unsafe
看下效果
<!DOCTYPE html> <html ng-app="text"> <head> <title></title> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" /> <script src="angular.min.js"></script> <script> angular.module("text", []).controller("helloControler", function ($scope) { $scope.htm = "<strong>Jackey</strong>"; }); </script> </head> <body ng-controller="helloControler"> <h1></h1> <input ng-model="htm" /> <p>{{htm}},go</p> <p ng-bind-html-unsafe="htm"></p> <p ng-bind-htmle="htm"></p> <p ng-bind="htm"></p> </body> </html>
经过测试，只有ng-bind能正常绑定数据
4 循环输出
循环输出
<!DOCTYPE html> <html ng-app="text"> <head> <title></title> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" /> <script src="angular.min.js"></script> <script> //angular.module("text", []).controller("helloControler", function ($scope) { //$scope.htm = "<strong>Jackey</strong>"; //}); angular.module("text", []).controller("eachController", function ($scope, $timeout) { $scope.friends = [{ name: 'Jackey', age: 25 }, { name: 'Cassi', age: 20 }, { name: 'JC', age: 1.2}]; $timeout(function () { $scope.friends.push({ name: 'add', age: 10 }); }, 1000); }); </script> </head> <body ng-controller="eachController"> <!--<div ng-controller="helloControler"> <h1>基本绑定</h1> <input ng-model="htm" /> <p>{{htm}},go</p> <p ng-bind-html-unsafe="htm"></p> <p ng-bind-htmle="htm"></p> <p ng-bind="htm"></p> </div>--> <div > <h1>循环</h1> <h2>I have {{friends.length}} friends,they are:</h2> <ul> <li ng-repeat="friend in friends"> [{{$index+1}}] {{friend.name}} who is {{friend.age}} years old </li> </ul> </div> </body> </html>
再次学习正美的东西
如果不想使用$timeout，那么先声明一个全局变量，将$scope赋值给它，再在外围使用js原生态的函数。
但是需要注意的是要添加一个东西。看代码：
<!DOCTYPE html> <html ng-app="text"> <head> <title></title> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" /> <script src="angular.min.js"></script> <script> //angular.module("text", []).controller("helloControler", function ($scope) { //$scope.htm = "<strong>Jackey</strong>"; //}); var s; angular.module("text", []).controller("eachController", function ($scope, $timeout) { $scope.friends = [{ name: 'Jackey', age: 25 }, { name: 'Cassi', age: 20 }, { name: 'JC', age: 1.2}]; s = $scope; //$timeout(function () { //$scope.friends.push({ name: 'add', age: 10 }); //}, 1000); }); setTimeout(function () { s.friends.push({ name: 'add', age: 10 }); s.$digest();//必须有 }, 1000); setInterval(function () { s.friends.push({ name: 'add', age: 10 }); s.$digest(); //必须有 },1000); </script> </head> <body ng-controller="eachController"> <!--<div ng-controller="helloControler"> <h1>基本绑定</h1> <input ng-model="htm" /> <p>{{htm}},go</p> <p ng-bind-html-unsafe="htm"></p> <p ng-bind-htmle="htm"></p> <p ng-bind="htm"></p> </div>--> <div > <h1>循环</h1> <h2>I have {{friends.length}} friends,they are:</h2> <ul> <li ng-repeat="friend in friends"> [{{$index+1}}] {{friend.name}} who is {{friend.age}} years old </li> </ul> </div> </body> </html>
这个必须的东西就是
s.$digest(); //必须有
5 事件
我们先来做个简单的click事件
看代码
<!DOCTYPE html> <html ng-app="text"> <head> <title></title> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" /> <script src="angular.min.js"></script> <script> //angular.module("text", []).controller("helloControler", function ($scope) { //$scope.htm = "<strong>Jackey</strong>"; //}); var s; angular.module("text", []).controller("eachController", function ($scope, $timeout) { $scope.friends = [{ name: 'Jackey', age: 25 }, { name: 'Cassi', age: 20 }, { name: 'JC', age: 1.2}]; s = $scope; //$timeout(function () { //$scope.friends.push({ name: 'add', age: 10 }); //}, 1000); $scope.name = "Jackey"; $scope.changeName = function () { $scope.name = "Cassi"; }; }); setTimeout(function () { s.friends.push({ name: 'add', age: 10 }); s.$digest();//必须有 }, 1000); //setInterval(function () { //s.friends.push({ name: 'add', age: 10 }); //s.$digest(); //必须有 //},1000); </script> </head> <body ng-controller="eachController"> <!--<div ng-controller="helloControler"> <h1>基本绑定</h1> <input ng-model="htm" /> <p>{{htm}},go</p> <p ng-bind-html-unsafe="htm"></p> <p ng-bind-htmle="htm"></p> <p ng-bind="htm"></p> </div>--> <div > <h1>循环</h1> <h2>I have {{friends.length}} friends,they are:</h2> <ul> <li ng-repeat="friend in friends"> [{{$index+1}}] {{friend.name}} who is {{friend.age}} years old </li> </ul> <h2>点击事件</h2> <button ng-click="changeName()">点击</button> <p>my name is {{name}} sparrow</p> </div> </body> </html>
6 绑定修改样式
<!DOCTYPE html> <html ng-app="text"> <head> <title></title> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" /> <script src="angular.min.js"></script> <style> .row { background:yellow; } .row-noton { background:white; } </style> <script> //angular.module("text", []).controller("helloControler", function ($scope) { //$scope.htm = "<strong>Jackey</strong>"; //}); var s; angular.module("text", []).controller("eachController", function ($scope, $timeout) { $scope.friends = [{ name: 'Jackey', age: 25 }, { name: 'Cassi', age: 20 }, { name: 'JC', age: 1.2}]; s = $scope; //$timeout(function () { //$scope.friends.push({ name: 'add', age: 10 }); //}, 1000); $scope.name = "Jackey"; $scope.changeName = function () { $scope.name = "Cassi"; }; $scope.remove = function (index) { $scope.friends.splice(index, 1); }; $scope.starting = { begin: 0 }; $scope.needed = 0; $scope.changeMoney = function () { $scope.needed = $scope.starting.begin * 10; }; $scope.show = "noton"; $scope.changeBackground = function (index) { $scope.selectRow = index; }; $scope.$watch('starting.begin', $scope.changeMoney); //添加监视 }).controller("helloController", function ($scope) { $scope.name = "Cassi"; }); setTimeout(function () { s.friends.push({ name: 'add', age: 10 }); s.$digest();//必须有 }, 1000); //setInterval(function () { //s.friends.push({ name: 'add', age: 10 }); //s.$digest(); //必须有 //},1000); </script> </head> <body > <!--<div ng-controller="helloControler"> <h1>基本绑定</h1> <input ng-model="htm" /> <p>{{htm}},go</p> <p ng-bind-html-unsafe="htm"></p> <p ng-bind-htmle="htm"></p> <p ng-bind="htm"></p> </div>--> <div ng-controller="eachController"> <h1>循环</h1> <h2>I have {{friends.length}} friends,they are:</h2> <ul> <li ng-repeat="friend in friends" ng-class='{row:$index==selectRow}' ng-click='changeBackground($index)' > [{{$index+1}}] {{friend.name}} who is {{friend.age}} years old <button ng-click="remove($index)">删除</button> </li> </ul> <h2>点击事件</h2> <button ng-click="changeName()">点击</button> <p>my name is {{name}} sparrow</p> <h2>change事件</h2> <input ng-change="changeMoney()" ng-model="starting.begin"/> result:{{needed}} </div> <div ng-controller="helloController"> <h2>共存controller</h2> {{name}} </div> </body> </html>
ng-class='{row:$index==selectRow}' 将选择中的row 设置为row的样式