Chú ý : file php không có .blade
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.32/angular.min.js"></script>
<script type="text/javascript" src="app/app.js"></script>
2:Data Binding<script type="text/javascript" src="app/app.js"></script>
Muốn file php chạy được Angular phải Khai báo ng-app trong thẻ <html> <body> <div>..
<html lang="en" ng-app=""> # khai báo ng-app với giá trị rỗng
<body ng-app="myapp"> # Khai báo với tên (xem phần 2.2
<div ng-app="">
2.1: ng-model<body ng-app="myapp"> # Khai báo với tên (xem phần 2.2
<div ng-app="">
Ng-model là một directive dùng để liên kết dữ liệu với client, Người ta thường dùng nó trong các form html để cho user nhập liệu.
vd: tạo input để nhập dữ liệu vào.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Example</title> <meta charset="utf-8"> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.32/angular.min.js"></script> </head> <body> <div ng-app=""> <input ng-model="usename"/> {{usename}} </div> </body> </html> |
Hãy nhập vào 1 số
{{usename}}1/ tạo 1 file test.js trong thư mục public/app/test.js
Nhúng đoạn script vào file .php
<script type="text/javascript" src="app/test.js"></script>
1/Trong file test.js tiến hành khai báo như sau:
var test = angular.module('mytest',[]);
2/trong file php khai báo ng-app với tên vừa khởi tạo:
<body ng-app="mytest">
var test = angular.module('mytest',[]);
2/trong file php khai báo ng-app với tên vừa khởi tạo:
<body ng-app="mytest">
Note: Biến angular chính là instance của AngularJS nên ta sử dụng nó để tạo tất cả các đối tượng. Như đoạn code trên ta sử dụng hàm module với 2 tham số như sau:
test: biến
mytest: Là tên của test, nó phải giống với giá trị của thuộc tính
ng-app bên HTML,php
[] là danh sách các phần ở rộng ta sử dụng cho ng-app myApp này, các phần mở rộng này có thể do ta tự viết hoặc của AngularJS nó cung cấp (xem tại đây). Ví dụ tôi sử dụng thư viện angular-animate.js thì tôi sẽ download nó về, sau đó import vào file index.html và khai báo trong javascript như sau.
var test = angular.module('mytest',['ngMessages']);
