您的位置：首页 > Web前端 > AngularJS

100%会用到的angularjs的知识点【新手可mark】

2016-01-05 14:47 627 查看
前言：下面我将整理出100%会到的angularjs的知识点，掌握这些知识点你基本上就可以独立完成一个angularjs的项目，前提是你有一定web开发的经验：1.了解基本的javascript的概念和使用。2.熟练掌握浏览器调试的技巧！ 如果你还对angularjs的基本配置还有点疑惑，请花十分钟的时间浏览上一篇文章：10分钟学会AngularJS的数据绑定

一、 ng-controller中自定义函数的使用

二、 ng-class【不同的结果，绑定不同的class】

三、 ng-show

当姓名为王小明的时候，这句html显示出来，否则angularjs会为他加上一个隐藏的class

四、 ng-if

当姓名为王小明的时候，这句html存在，否则不存在

五、 ng-click

六、 三元表达式

七、 ng-repeat对象排序

当age对应true时，代表根据年龄的大小倒序排列相当于desc，正序则为false，相当于asc！是不是觉得很方便！

八、angularjs的http请求的方法->$http

九、源码

<!DOCTYPE html>
<html>
<head>
<script src='javascripts/jquery-1.11.3.min.js' type="text/javascript"></script>
<script src='javascripts/angular.js' type="text/javascript"></script>
<script src='javascripts/main-controller.js' type="text/javascript"></script>
</head>
<style>
.red{color:#FF0000}
.green{color:#00DB00}
</style>
<body ng-app="mainApp">
<h1></h1>

<div ng-controller="studentsController">
<!--遍历对象-->
<div  ng-repeat="item in students|orderBy:'age':true">
<h1 ng-bind="item.name"></h1>
<p ng-bind="item.age"></p>
学校：<p ng-bind="returnSchool(item.name)" ng-class="item.name=='王小明'?'red':'green'"></p>
<p ng-if="item.name=='王小明'">大神</p>
<p ng-show="item.name=='王小明'">程序员</p>
</div>

<input type="button" value="点击弹框" ng-click="changeName('王小明')">
</div>

</body>
</html>
/**
* Created by Administrator on 2016/1/5.
*/

var mainApp = angular.module('mainApp', []);

//1.ng-repeat的数据绑定
mainApp.controller('studentsController',function($scope,$http){

$scope.student=null;
//这边定义一个json的对象
$scope.students=[{'name':'王小明',"age":"22"},{'name':'李小刚',"age":"30"}];

//自定义函数的使用
$scope.returnSchool=function(name){
if(name==='王小明'){
return '上海大学';
}
else{
return '复旦大学';
}
};

$scope.returnClass=function(name){
if(name==='王小明'){
return 'red';
}
else{
return 'green';
}
};

$scope.changeName=function(name){
if(name==='王小明'){
alert('其实我叫黄晓明');
}

};

////http get请求
//$http.get('/someUrl').success(function(data, status, headers, config) {
//
//}).
//error(function(data, status, headers, config) {
//
//});
//
////http post请求
//$http.post('/someUrl', {msg:'hello word!'}).
//success(function(data, status, headers, config) {
//
//}).
//error(function(data, status, headers, config) {
//
//});
//
////http jsonp请求
//$http({
//    method: 'jsonp',
//    url: "/someUrl",
//    params: {msg:'hello word!'}
//}).success(function(data, status, headers, config) {
//
//}).
//error(function(data, status, headers, config) {
//
//});

});

总结：掌握以上的知识，你几乎可以独立完成一个angularjs的项目，下一章我们将会学习angularjs一些更强大的特性。
    如果觉得这一篇文章对你有用请点个推荐吧。

                                            

                                        

                        
                        内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息 
                    

                    

                    

                        

                         标签： 
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                
            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航