AngularJS 是一个 JavaScript 框架
AngularJS 是一个 JavaScript 框架。它是一个以 JavaScript 编写的库。
AngularJS 是以一个 JavaScript 文件形式发布的，引入方式如下：
<script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
基本指令
ng-app 指令定义一个 AngularJS 应用程序。
ng-controller 指令区分模块域。
ng-model 指令把元素值（比如输入域的值）绑定到应用程序。
ng-bind 指令把应用程序数据绑定到 HTML 视图。
ng-show/hide/if 指令数据显示或隐藏。
ng-checked 指令选中元素
ng-submit 表单提交绑定方法
ng-disabled 验证数据点击次数 ng-disabled="form[name].$invalid"
ng-repeat 循环指令 ng-repeat="item in arr" 里面含有三个属性：$index(下标索引),$first(对象的第一个子对象),$last(对象的最后一个子对象)
1 <body ng-app="app" style="padding:10px"> 2 <div ng-controller="form"> 3 <form name="forms" ng-submit="register()"> 4 <fieldset> 5 <legend>基本信息</legend> 6 <img ng-class="{'img':user.imgClass}" ng-show="{{user.imgShow}}" ng-src="{{user.url}}"> 7 <div style="padding:10px 20px"> 8 <input class="form-control" type="text" placeholder="用户名" required /></br> 9 <input class="form-control" type="password" placeholder="密码" required /> 10 职位：<select class="form-control"> 11 <option>---select-</option> 12 <option ng-selected="user.zw==1">web</option> 13 <option ng-selected="user.zw==2">android</option> 14 </select> 15 性别：<input ng-checked="user.sex==1" type="radio" name="sex" value="男"> 16 <input ng-checked="user.sex==2" type="radio" name="sex" value="女"> 17 </div> 18 </fieldset> 19 <fieldset> 20 <legend>爱好</legend> 21 <div style="padding:10px 20px"> 22 <input type="checkbox" ng-checked="choice(1)"/> 篮球 23 <input type="checkbox" ng-checked="choice(2)"/> 排球 24 </div> 25 </fieldset> 26 <button ng-disabled="forms.$invalid" type="submit" class="button expand" style="display:block;margin:0 auto">submit</button> 27 </form> 28 </div> 29 <script type="text/javascript" src="js/angular.js"></script> 30 <script type="text/javascript" src="js/controller.js"></script> 31 </body>
1 angular.module('app',[]) 2 .controller('Task1',function($scope){ 3 $scope.task=""; 4 $scope.tasks=[]; 5 $scope.add=function(){ 6 $scope.tasks.push($scope.task); 7 } 8 }) 9 .controller('Task2',function($scope){ 10 $scope.task=""; 11 $scope.tasks=[]; 12 $scope.add=function(){ 13 $scope.tasks.push($scope.task); 14 } 15 }) 16 .controller('loginmodel',function($scope){ 17 $scope.user={name:'',pwd:''}; 18 $scope.errmsg=""; 19 $scope.logining = function(){ 20 if($scope.user.name == "admin" && $scope.user.pwd == "123"){ 21 alert("success"); 22 }else{ 23 $scope.errmsg = "username or userpassword err!"; 24 } 25 } 26 27 }) 28 .value('valued','xujiangli')//可以改变其值 29 .constant('constant',"http://www.baidu.com") 30 .factory('data',function(){ 31 return { 32 msg:'are you ok!', 33 msgFun:function(){ 34 this.msg = 'yes I am fine'; 35 } 36 } 37 }) 38 .controller('jinjie',function($scope,valued,constant,data){ 39 $scope.value = valued; 40 $scope.contant = constant; 41 $scope.data = data; 42 data.msgFun=data.msgFun(); 43 }) 44 //form 45 .controller("form",function($scope){ 46 $scope.user={ 47 url:'img/haohao.png', 48 imgShow:true, 49 imgClass:true, 50 name:'', 51 pwd:'', 52 sex:'2', 53 zw:'1', 54 perzition:[1,2,3] 55 }; 56 // checkbox 57 $scope.choice=function(n){ 58 var se = false; 59 for (var i = 0; i < $scope.user.perzition.length; i++) { 60 if(n==$scope.user.perzition[i]){ 61 se = true; 62 break; 63 } 64 } 65 return se; 66 console.log(n); 67 }; 68 //form submit 69 $scope.register=function(){ 70 console.log('submit') 71 } 72 73 })
创建自定义的指令
除了 AngularJS 内置的指令外，我们还可以创建自定义指令。
你可以使用 .directive 函数来添加自定义的指令。
要调用自定义指令，HTML 元素上需要添加自定义指令名。
使用驼峰法来命名一个指令， runoobDirective, 但在使用它时需要以 - 分割, runoob-directive:
1 <body ng-app="myApp"> 2 <!-- 元素名 --> 3 <!-- <runoob-directive></runoob-directive> --> 4 <!-- 你必须设置 restrict 的值为 "M" 才能通过注释来调用指令,我们需要在该实例添加 replace 属性， 否则评论是不可见的。--> 5 <!-- directive: runoob-directive --> 6 <!-- 你必须设置 restrict 的值为 "C" 才能通过类名来调用指令--> 7 <!-- <div class="runoob-directive"></div> --> 8 <!-- 通过设置 restrict 属性值为 "A" 来设置指令只能通过 HTML 元素的属性来调用--> 9 <!-- <div runoob-directive></div> --> 10 <script> 11 var app = angular.module("myApp", []); 12 app.directive("runoobDirective", function() { 13 return { 14 restrict : "M",//A/E/C 15 replace : true,//注释才用到 16 template : "<h1>自定义指令!</h1>" 17 }; 18 }); 19 </script> 20 </body>
根作用域
所有的应用都有一个 $rootScope，它可以作用在 ng-app 指令包含的所有 HTML 元素中。
$rootScope 可作用于整个应用中。是各个 controller 中 scope 的桥梁。用 rootscope 定义的值，可以在各个 controller 中使用。
1 <div ng-app="myApp" ng-controller="myCtrl"> 2 3 <h1>姓氏为 {{lastname}} 家族成员:</h1> 4 5 <ul> 6 <li ng-repeat="x in names">{{x}} {{lastname}}</li> 7 </ul> 8 9 </div> 10 11 <script> 12 var app = angular.module('myApp', []); 13 14 app.controller('myCtrl', function($scope, $rootScope) { 15 $scope.names = ["Emil", "Tobias", "Linus"]; 16 $rootScope.lastname = "Refsnes"; 17 }); 18 </script> 19 20 <p>注意 $rootScope 在循环对象内外都可以访问。</p>
请求方式
.controller('customersCtrl', function($scope, $http) {
// $http.get("http://www.runoob.com/try/angularjs/data/Customers_MySQL.php")
$http.get("url")
.success(function (response) {
console.log(response);
// $scope.list = response.records;
});
})
API函数
angular.lowercase()//转换字符串为小写
angular.uppercase()//转换字符串为大写
angular.isNumber()//判断给定的对象是否为数字，如果是返回 true
angular.isString()//判断给定的对象是否为字符串，如果是返回 true