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) {
    //
    //});


});