<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="https://cdn.staticfile.org/angular.js/1.4.6/angular.min.js"></script> </head> <body> <div ng-app="myapp"> <p>名字 : <input type="text" ng-model="name"></p> <h1>Hello {{name}}</h1> </div> </body> </html>
網頁加載完成,angularJS自動開啓css
ng-app指令告訴angularJS,<div>元素是angularJS應用程序的「全部者」。html
ng-model指令把輸入域的值綁定到應用程序變量name。前端
ng-bind指令把應用程序變臉name綁定到某個段落髮innerHTML。ajax
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="https://cdn.staticfile.org/angular.js/1.4.6/angular.min.js"></script> </head> <body> <div ng-app="myApp" ng-controller="myCtrl"> 名: <input type="text" ng-model="firstName"><br> 姓: <input type="text" ng-model="lastName"><br> <br> 姓名: {{firstName + " " + lastName}} <!-- angular表達式 字符串--> </div> <script> var app = angular.module('myApp', []); app.controller('myCtrl', function ($scope) { $scope.firstName = "John"; $scope.lastName = "Doe"; }); </script> </body> </html>
<div ng-app="" ng-init="person={firstName:'John',lastName:'Doe'}"> <p>姓爲 {{ person.lastName }}</p> <p>姓爲 <span ng-bind="person.lastName"></span></p> <!-- 兩者顯示結果相同。 --> </div>
<div ng-app="" ng-init="points=[1,15,19,2,40]"> <p>第三個值爲 {{ points[2] }}</p> </div>
AngularJS 指令是擴展的 HTML 屬性,帶有前綴 ng-。json
ng-app 指令初始化一個 AngularJS 應用程序。數組
ng-init 指令初始化應用程序數據。promise
ng-model 指令把元素值(好比輸入域的值)綁定到應用程序。瀏覽器
<div ng-app="" ng-init="names=[ {name:'Jani',country:'Norway'}, {name:'Hege',country:'Sweden'}, {name:'Kai',country:'Denmark'}]"> <p>循環對象:</p> <ul> <li ng-repeat="x in names"> {{ x.name + ', ' + x.country }} </li> </ul> </div>
除了angularJS內置的指令外,咱們還能夠建立自定義指令。app
你可使用.directive函數添加自定義指令。框架
要調用自定義指令,HTML元素上須要添加自定義指令名。
使用駝峯命名一個指令, runoobDirective, 但在使用它時須要以 - 分割, runoob-directive:
<body ng-app="myApp"> <runoob-directive></runoob-directive> <script> var app = angular.module("myApp", []); app.directive("runoobDirective", function () { return { template: "<h1>自定義指令!</h1>", //replace : true, //restrict : "EACM" }; }); </script> </body>
<runoob-directive></runoob-directive>
<div runoob-directive></div>
<div class="runoob-directive"></div>
<!-- directive: runoob-directive -->
* replace 是一個可選參數,若是設置了這個參數,值必須爲true,由於默認值爲false。默認值意味着模板會被看成子元素插入到調用此指令的元素內部:
如:
<my-directive></my-directive> .directive("myDirective",function(){ return { template:"<h3>世上無難事,只怕有心人</h3>" } })
調用指令以後的結果以下(這是默認replace爲false時的狀況):
<my-directive> <h3>世上無難事,只怕有心人</h3> </my-directive>
若是replace被設置爲了true:
.directive("myDirective",function(){ return { replace:true, template:"<h3>世上無難事,只怕有心人</h3>" } })
那麼指令調用後的結果將是:
<h3>世上無難事,只怕有心人</h3>
* restrict 能夠限制你的指令只能經過特定的方式來調用。
restrict 值能夠是如下幾種:
E
做爲元素名使用A
做爲屬性使用C
做爲類名使用M
做爲註釋使用restrict 默認值爲 EA
, 便可以經過元素名和屬性名來調用指令。
<!DOCTYPE html> <html ng-app="App"> <head> <meta charset="UTF-8"> <title>內置過濾器</title> </head> <body> <div ng-controller="controllerTest01"> <ul> <!-- currency處理函數,price是第一個參數,「¥」是第二個參數。顯示的值是currency這個函數執行完成之後的返回值 --> <li>{{price|currency:"¥"}}</li> <li>{{nowdate|date:'yyyy/MM/dd hh:mm:ss EEEE'}}</li> <li>{{arr1|filter:'j'}}</li> <li>{{arr2|filter:{age:16} }}</li> <li>{{arr2|json }}</li> <li>{{arr1|limitTo:2}}</li> <li>{{str|uppercase|lowercase|limitTo:7}}</li> <li>{{num|number:2}}</li> <li>{{num2|number:4}}</li> <li>{{arr2|orderBy:"age":true}}</li> </ul> </div> <script src="https://cdn.staticfile.org/angular.js/1.4.6/angular.min.js"></script> <script> var App = angular.module("App", []); App.controller("controllerTest01", ['$scope', function ($scope) { // 內置過濾器 9個 // 1. currency (貨幣處理),若是不傳遞參數,默認是美圓符 // 2. date (日期格式化) // 3. filter(匹配子串) // 4. json(格式化json對象) 跟stringify相同 沒有參數 // 5. limitTo(限制數組長度或字符串長度) // 6. lowercase(小寫) 沒有參數 // 7. uppercase(大寫) 沒有參數 // 8. number(格式化數字) [參數] // 9. orderBy(排序) [name,boolean] $scope.price = 99.99; $scope.nowdate = new Date(); $scope.arr1 = ['html', "css", 'js', "hhhh", "j", "c"]; $scope.arr2 = [ { name: "jack", age: 20 }, { name: "mack", age: 16 }, { name: "sunny", age: 18 } ] $scope.str = "Hello World"; $scope.num = "10.23456"; $scope.num2 = 123456789 }]) </script> </body> </html>
<!DOCTYPE html> <html ng-app="App"> <head> <meta charset="UTF-8"> <title>自定義過濾器</title> </head> <body> <div ng-controller="controllerTest01"> <h2>{{msg|demo:"abc":"bcd":"efg"}}</h2> <h3>{{val|firstUppercase:123}}</h3> </div> <script src="https://cdn.staticfile.org/angular.js/1.4.6/angular.min.js"></script> <script> var App = angular.module("App",[]); // 定義控制器 App.controller("controllerTest01",['$scope',function($scope){ $scope.msg = " world" $scope.val = "hello world" }]) //自定義指令 // App.directive('指令名',function(){ // return{} // }) // 自定義過濾器 App.filter('demo',function(){ return function(val,a,b,c){ //demo就是一個函數 console.log(val) //world console.log(a,b,c) //abc bcd efg // 顯示值又是一個返回值 return "hello" + val; } }) // 自定義過濾器,首字母大寫 App.filter('firstUppercase',function(){ return function(data,args){ console.log(args) //123 return data[0].toUpperCase() + data.slice(1) } }) </script> </body> </html>
<!DOCTYPE html> <html ng-app="App"> <head> <meta charset="UTF-8"> <title>內置服務-$location</title> </head> <body> <div ng-controller="controllerTest01"> <ul> <li>絕對路徑:{{absurl}}</li> <li>服務:{{host}}</li> <li>查詢字符串(參數):{{search}}</li> <li>端口號:{{port}}</li> <li>協議:{{protocol}}</li> <li>哈希(錨點):{{hash}}</li> </ul> </div> <script src="https://cdn.staticfile.org/angular.js/1.4.6/angular.min.js"></script> <script> var App = angular.module("App",[]); // $http -- > 對ajax的一種封裝 // $log --> 對congsole的封裝 // $timeout --> 定時器 // $location --> 對瀏覽器地址欄的封裝 App.controller("controllerTest01",['$scope','$location',function($scope,$location){ console.log($location) $scope.absurl = $location.absUrl(); $scope.host = $location.host(); $scope.port = $location.port(); $scope.search = $location.search(); //對http有要求 $scope.protocol = $location.protocol(); $scope.hash = $location.hash(); }]) </script> </body> </html>
App.controller("controllerTest01",['$scope','$timeout','$interval',function($scope,$timeout,$interval){ $timeout(function(){ $scope.msg = "timeout執行了" },3000) var timer = $interval(function(){ $scope.datenow = new Date(); },1000) $scope.stop = function(){ $interval.cancel(timer) } }])
<div ng-controller="controller01"> <ul> <li>{{price}}</li> <li>{{str}}</li> <li>{{str1}}</li> </ul> </div> <script src="https://cdn.staticfile.org/angular.js/1.4.6/angular.min.js"></script> <script> var App = angular.module("App", []); App.controller("controller01", ['$scope', '$filter', function ($scope, $filter) { // $filter 能夠引入九種內置的過濾器,這個是過濾器的第二種用法 $scope.price = 99.99; var currency = $filter('currency'); $scope.price = currency($scope.price); $scope.str = "hello angular"; var uppercase = $filter('uppercase'); $scope.str = uppercase($scope.str); $scope.str1 = $filter('limitTo')($scope.str, 5) }]) </script>
App.controller("controller01",['$scope','$filter','$http',function($scope,$filter,$http){ // $http 本質是對ajax的封裝,放到服務底下運行 // 1.5以上使用then方法,相似於promise中的then // 1.5如下就直接使用success方法和error方法 // $http({ // method: 'GET', // url: './02.json', // params : { //get請求的參數 // uname : 'aaaa', // age : 30 // } // }).then(function(data){ // console.log(data); //封裝過的,該對象底下的data屬性放的是數據 // console.log(data.data); // },function(err){ // console.log(err) // }); $http({ method : "POST", url : "/sendData", headers : { //post請求最好設置請求頭 "content-type" : "application/x-www-form-urlencoded" }, data : { //post請求的參數 uname : "aaa", age : 30 } }).then(function(data){ console.log(data) console.log(data.data.data); //想要的後臺的數據 },function(err){ console.log(err); }) }])
要使用自定義服務,須要在定義控制器的時候獨立添加,設置依賴關係。
var App = angular.module("App", []); // 定義一個服務,格式化對象 // { // name : "jack", // age : 30 // } // ?name=jack&age=30 App.factory('format', ["$filter", function ($filter) { function fm(data) { //val 是一個對象 var str = "?"; for (var key in data) { str += key + "=" + data[key] + '&'; } str = str.slice(0, -1); return str; } function aaa() { console.log('hello') } // 返回一個對象出去 return { format: fm, aaa: aaa } }]) App.controller("controller01", ['$scope', '$filter', '$http', 'format', '$log', function ($scope, $filter, $http, format, $log) { var data = { name: "jack", age: 30 } format.aaa(); $scope.str = format.format(data) $log.log(format.format(data)); }])