前言：下面我将整理出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. 转】MyEclipse使用总结——MyEclipse中配置WebLogic12c服务器
			
    原博文出自于:http://www.cnblogs.com/xdp-gacl/p/4142495.html 感谢! MyEclipse中配置WebLogic12c服务器的步骤如下: [Window]→ ...
    
			
    2. 
						
  2. New Objective-C Feature
			
    [Advance Objective-C Feature] 1.@import避免反复解析头文件,本地宏对框架API定义无影响. 2.可以导入单独一个头文件. 3.使用了@import后,不再需要选择 ...
    
			
    3. 
						
  3. labview 中的一些简写全称
			
    MAX:Measurement & Automation Explorer 测量自动化管理器 :可用于配置DAQ通道名称,VISA资源名称和IVI逻辑名称. DAQ: Device Data  ...
    
			
    4. 
						
  4. CIDR
			
    CIDR的介绍: CIDR(Classless Inter-Domain Routing,无类域间路由选择)它消除了传统的A类.B类和C类地址以及划分子网的概念,因而可以更加有效地分配IPv4的地址空 ...
    
			
    5. 
						
  5. 接口是干爹, 继承是亲爹 ---JAVA
			
    接口(interface)是干爹, 因为你可以有很多很多的干爹爹... 继承(extends)是亲爹, 因为你只能有一个父类, 只有一个亲生的父亲. 单继承,多接口?./>./..
    
			
    6. 
						
  6. js打开新页面 关闭当前页 关闭父页面
			
    js打开新页面.关闭当前页.关闭父页面 2010-04-29 14:04:13|  分类: 页面与JavaScript |  标签: |字号大中小 订阅     //关闭当前页面,并且打开新页面,(不 ...
    
			
    7. 
						
  7. C：数组
			
    数组.排序 关于排序 :参考 关于数组: 参考 求a[i][j]行与列的和然后求平均值 参考 二维数组使用指针的表示方法  参考 字符串数组:char  name [5][20] ={ {} , {} ...
    
			
    8. 
						
  8. urlrewritingnet 域名http状态302 问题（转）
			
    UrlRewritingNet is an Url rewriting tool for ASP .Net and Elmahis a module for logging unhandled err ...
    
			
    9. 
						
  9. HttpContext及HttpContext.current
			
    慎用System.Web.HttpContext.Current http://www.cnblogs.com/david1989/p/3879201.html 线程编程中用到HttpContext. ...
    
			
    10. 
						
  10. ie7下z-index失效问题解决方法(详细分析)
			
    (从已经死了一次又一次终于挂掉的百度空间人工抢救出来的,发表日期2014-04-03) 点评:绝对定位元素的“有定位属性(relative或absolute)的父元素”在渲染层次时起到了主要作用,前面 ...
    
			
    11.