前言：下面我将整理出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. OpenXML操作word
			
    OpenXML概述 项目中经常需要操作word,之前的方式是采用COM接口,这个接口很不稳定,经常报错.现在开始采用OpenXML.OpenXML(OOXML)是微软在Office 2007中提出的一 ...
    
			
    2. 
						
  2. css3 动画demo
			
    1)http://www.yyyweb.com/demo/css-cokecan/inner.html 2)页面切换效果demo http://www.yyyweb.com/demo/page-tra ...
    
			
    3. 
						
  3. http://docwiki.embarcadero.com/RADStudio/XE7/en/Delphi_Data_Types
			
    http://docwiki.embarcadero.com/RADStudio/XE7/en/Delphi_Data_Types
    
			
    4. 
						
  4. C++静态成员函数小结 [转]
			
    类中的静态成员真是个让人爱恨交加的特性.我决定好好总结一下静态类成员的知识点,以便自己在以后面试中,在此类问题上不在被动. 静态类成员包括静态数据成员和静态函数成员两部分. 一 静态数据成员: 类体中 ...
    
			
    5. 
						
  5. EasyMock问题总结
			
    1. java.lang.IllegalStateException: missing behavior definition for the preceding method call getBid ...
    
			
    6. 
						
  6. java中导入常量
			
    import关键字除了导入包之外,还可以导入静态成员,这时JDK5.0以上版本提供的新功能.导入静态成员可以是程序员编程更为方便. 使用import导入静态成员的语法为: import static  ...
    
			
    7. 
						
  7. （5）html表单
			
    本节解说: html的表单. form * <form> 标签用于为用户输入创建 HTML 表单. 表单能够包含 input 元素,比如文本字段.复选框.单选框.提交按钮等等. * < ...
    
			
    8. 
						
  8. Netty高并发原理
			
        Netty是一个高性能 事件驱动的异步的非堵塞的IO(NIO)框架,用于建立TCP等底层的连接,基于Netty可以建立高性能的Http服务器.支持HTTP. WebSocket .Protob ...
    
			
    9. 
						
  9. Eclipse和Android Studio中的DDMS使用时什么不同?
			
    http://www.jb51.net/softjc/454131.html Eclipse和Android Studio中的DDMS使用时什么不同? 相信很多经常开发Android应用的朋友应该都接 ...
    
			
    10. 
						
  10. Flex文件读取报错
			
    Flex文件读取 1.s:WindowedApplication <?xml version="1.0" encoding="utf-8"?> &l ...
    
			
    11.