前言：下面我将整理出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. Gridheh 垂直居中
			
    Gridheh 垂直居中 上下居中 each columns  set layout ColumnDefValues.Layout = tlCenter 有colResize,拖动调整列宽. 但是没有 ...
    
			
    2. 
						
  2. 行为识别(action recognition)相关资料
			
    转自:http://blog.csdn.net/kezunhai/article/details/50176209 ================华丽分割线=================这部分来 ...
    
			
    3. 
						
  3. POJ 3659 Cell Phone Network (树dp)
			
    题目链接:http://poj.org/problem?id=3659 给你一个树形图,一个点可以覆盖他周围连接的点,让你用最少的点覆盖所有的点. dp[i][0]表示用i点来覆盖,dp[i][1]表 ...
    
			
    4. 
						
  4. Elasticsearch template configuration
			
    Index templates allow defining templates thatwill automatically be applied to new indices created. T ...
    
			
    5. 
						
  5. java复制File文件操作
			
    ==========================复制File操作========================= /**  *   * @param newPath要赋值的路径  * @para ...
    
			
    6. 
						
  6. 利用HTML5开发Android(4)---HTML5本地存储之Web Storage
			
    Web Storage是HTML5引入的一个非常重要的功能,可以在客户端本地存储数据,类似HTML4的cookie,但可实现功能要比cookie强大的多,cookie大小被限制在4KB,Web Sto ...
    
			
    7. 
						
  7. 给Oracle锁住的行解锁
			
    1.找出数据库的serial#,以备杀死: select t2.username,t2.sid,t2.serial#,t2.logon_time from v$locked_object t1,v$s ...
    
			
    8. 
						
  8. 组件化CSS--管理你整站的CSS文件
			
    为什么要拆分样式文件? 更易于查找样式规则. 简化维护,方便管理. 还可以针对某一页面提供特定的样式. 为什么要添加桥接样式? 你可以随时添加或移除样式而不需要修改HTML 文档. 为什么要定义两种媒 ...
    
			
    9. 
						
  9. mongodb - 命令行增删改查
			
    # insert db.person.insert({ }) db.person.insert({ }) db.person.insert({ }) db.person.insert({ }) # s ...
    
			
    10. 
						
  10. Codeforces Round #180 (Div. 2) C. Parity Game 数学
			
    C. Parity Game 题目连接: http://www.codeforces.com/contest/298/problem/C Description You are fishing wit ...
    
			
    11.