100%会用到的angularjs的知识点【新手可mark】

时间 2019-11-19

标签 100% 会用 angularjs 知识新手可mark 栏目 AngularJS 繁體版

原文原文链接

前言：下面我将整理出100%会到的angularjs的知识点，掌握这些知识点你基本上就能够独立完成一个angularjs的项目，前提是你有必定web开发的经验：1.了解基本的javascript的概念和使用。2.熟练掌握浏览器调试的技巧！若是你还对angularjs的基本配置还有点疑惑，请花十分钟的时间浏览上一篇文章：10分钟学会AngularJS的数据绑定 javascript

1、 ng-controller中自定义函数的使用

2、 ng-class【不一样的结果，绑定不一样的class】

3、 ng-show

当姓名为王小明的时候，这句html显示出来，不然angularjs会为他加上一个隐藏的classhtml

4、 ng-if

当姓名为王小明的时候，这句html存在，不然不存在java

5、 ng-click

6、三元表达式

7、 ng-repeat对象排序

当age对应true时，表明根据年龄的大小倒序排列至关于desc，正序则为false，至关于asc！是否是以为很方便！jquery

8、angularjs的http请求的方法->$http

9、源码

<!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一些更强大的特性。程序员