前言：下面我將整理出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一些更強大的特性。
如果覺得這一篇文章對你有用請點個推薦吧。