前言：下面我将整理出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一些更强大的特性。


    如果觉得这一篇文章对你有用请点个推荐吧。
												


											
100%会用到的angularjs的知识点【新手可mark】的更多相关文章
	

    
								
  1. AngularJS小知识点一
		
    AngularJS是由谷歌公司及一个由开发者组成的个人社区共同打造.其主要优势在于帮助使用者在web应用程序中实现必要的动态视图.它是通过原生的MVC(模型-视图-控制器)功能来增强HTML. PS: ...
    
		
    2. 
						
  2. AngularJS 杂项知识点
		
    1.要用ngChange要同时使用ngModel,下拉选择获取当前选中值. 2.打包代替动态加载(js文件) requirejs真正的价值在于模块化,不是动态加载,angularjs本身有模块化机制, ...
    
		
    3. 
						
  3. [后端人员耍前端系列]AngularJs篇：30分钟快速掌握AngularJs
		
    一.前言 对于前端系列,自然少不了AngularJs的介绍了.在前面文章中,我们介绍了如何使用KnockoutJs来打造一个单页面程序,后面一篇文章将介绍如何使用AngularJs的开发一个单页面应用 ...
    
		
    4. 
						
  4. [学习笔记] 七步从AngularJS菜鸟到专家（7）：Routing [转]
		
    这是＂AngularJS – 七步从菜鸟到专家＂系列的第七篇. 在第一篇,我们展示了如何开始搭建一个AngularaJS应用.在第四.五篇我们讨论了Angular内建的directives,上一篇了解 ...
    
		
    5. 
						
  5. AngularJS学习手册
		
    看书和视频结合是学习的最高效方式,看了这本书之后对angularjs才算是有一定的理解了.这本书以搭建一个博客为线索讲解了angularjs的知识点和实际项目开发流程.非常适合初学者!下面是我的读书笔 ...
    
		
    6. 
						
  6. 30分钟快速掌握AngularJs
		
    [后端人员耍前端系列]AngularJs篇:30分钟快速掌握AngularJs   一.前言 对于前端系列,自然少不了AngularJs的介绍了.在前面文章中,我们介绍了如何使用KnockoutJs来 ...
    
		
    7. 
						
  7. AngularJs快速上手掌握
		
    一.前言 对于前端系列,自然少不了AngularJs的介绍了.在前面文章中,我们介绍了如何使用KnockoutJs来打造一个单页面程序,后面一篇文章将介绍如何使用AngularJs的开发一个单页面应用 ...
    
		
    8. 
						
  8. 【JavaScript】随机生成10个0~100的数字
		
    随机生成10个0~100不重复的数字(包含0和100): 需要用到的知识点:随机数 去重 下面放代码 <!DOCTYPE html> <html> <head> & ...
    
		
    9. 
						
  9. day68—angularJS学习笔记之-过滤器
		
    转行学开发,代码100天——2018-05-23 今天学习angularJS的过滤器的使用. angular中的常用过滤器用来修改数据格式,主要有以下几类: 1.大写,| uppercase 2.小写 ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. QListWidgetItem带上颜色的问题
			
    new_item = QListWidgetItem(_fromUtf8(item_content), self.listWidget) 首先创建一个QListWidgetItem,第一个参数内容是I ...
    
			
    2. 
						
  2. python 前向引用
			
    即函数调用在函数定义之前 可以这样 def bbb(): print('this is b') aaa() def aaa(): print('this is a') bbb() ---------& ...
    
			
    3. 
						
  3. HDU 1520Anniversary party（树型DP）
			
    HDU 1520   Anniversary party 题目是说有N个人参加party,每个人有一个rating值(可以理解为权值)和一个up(上司的编号),为了保证party的趣味性,每一个人不可 ...
    
			
    4. 
						
  4. My集合框架第三弹 AVL树
			
    旋转操作: 由于任意一个结点最多只有两个儿子,所以当高度不平衡时,只可能是以下四种情况造成的: 1. 对该结点的左儿子的左子树进行了一次插入. 2. 对该结点的左儿子的右子树进行了一次插入. 3. 对 ...
    
			
    5. 
						
  5. centos下 Apache、php、mysql默认安装路径
			
    centos下 Apache.php.mysql默认安装路径 http://blog.sina.com.cn/s/blog_4b8481f70100ujtp.html apache: 如果采用RPM包 ...
    
			
    6. 
						
  6. Tun/Tap interface tutorial
			
    Foreword: please note that the code available here is only for demonstration purposes. If you want t ...
    
			
    7. 
						
  7. ie7下z-index失效问题解决方法(详细分析)
			
    (从已经死了一次又一次终于挂掉的百度空间人工抢救出来的,发表日期2014-04-03) 点评:绝对定位元素的“有定位属性(relative或absolute)的父元素”在渲染层次时起到了主要作用,前面 ...
    
			
    8. 
						
  8. C# 反射 通过类名创建类实例
			
    “反射”其实就是利用程序集的元数据信息. 反射可以有很多方法,编写程序时请先导入 System.Reflection 命名空间. 1.假设你要反射一个 DLL 中的类,并且没有引用它(即未知的类型): ...
    
			
    9. 
						
  9. 在ASP.NET MVC中使用MySQL【并使用membership】
			
            大多数情况下我们使用.NET或ASP.NET(包括MVC)程序时,我们会同时选择SQL Server 或者SQL Express (其他微软产品)做数据库.但是今天使用MVC已经完全没 ...
    
			
    10. 
						
  10. Unable to execute dex: Multiple dex files define 解决方法
			
    程序编译正常,在用Eclipse调试执行时,报错Unable to execute dex: Multiple dex files define: 方法:      原因是有重复的.jar被引用,可以 ...
    
			
    11.