前言：下面我将整理出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. Spark RDD概念学习系列之RDD的5大特点（五）
			
      RDD的5大特点  1)有一个分片列表,就是能被切分,和Hadoop一样,能够切分的数据才能并行计算. 一组分片(partition),即数据集的基本组成单位,对于RDD来说,每个分片都会被一个计 ...
    
			
    2. 
						
  2. HDU 5861 Road （线段树）
			
    Road 题目链接: http://acm.split.hdu.edu.cn/showproblem.php?pid=5861 Description There are n villages alo ...
    
			
    3. 
						
  3. HD2043猜密码
			
    密码 Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others) Total Submission ...
    
			
    4. 
						
  4. CentOS安装配置VSFTP服务器
			
    {:toc} 前言 本文用最简单的方式创建FTP服务,即创建一个大家都可以访问的目录,没有涉及到各种权限限制. 创建目录 在安装配置ftp之前,首先创建一个目录,用来做ftp根目录.我创建的是/hom ...
    
			
    5. 
						
  5. quartz中关键类
			
    job job是一个接口,你对某一类job的定义,可以通过实现该接口来实现.例如为销售报告定义一个SalesReportJob,包含变量name. job可以使用的几个注解 @DisallowConc ...
    
			
    6. 
						
  6. webbench压力测试
			
    webbench最多可以模拟3w多个并发请求去测试网站负载能力. 一:获取webbench工具,安装编译: wget http://blog.zyan.cc/soft/linux/webbench/w ...
    
			
    7. 
						
  7. Custom ReadOnlyProperty【PluraSight】
			
    Limited functionality: Not settable No data binding No validation No animation No Inheritance When t ...
    
			
    8. 
						
  8. jqGrid初次使用遇到的问题及解决方法
			
    问题一:初始化定义翻页用的导航栏时,表中出现"undefined"方框: 解决:需要导入grid.locale-cn.js文件. 问题二:页面只有一页,无法翻页: 解决:初始化设置 ...
    
			
    9. 
						
  9. Firefox 32 支持 Public Key Pinning 对抗中间人攻击。
			
    Firefox 32 支持 Public Key Pinning 对抗中间人攻击.8月28日消息,即将发布的Firefox 32将支持Public Key Pinning机制,以防止中间人攻击.Pub ...
    
			
    10. 
						
  10. Java组各任务工作流程
			
    1.周枫 A.提供基于SQL SERVER的数据库基本表结构创建脚本,基础数据脚本,按学科(产品)的数据脚本. 2.吴缤 A.提供给周茉的安装包用的项目文件,共三个digital,xylinkWeb和 ...
    
			
    11.