Cổng Khoa học Máy tính dành cho những người yêu thích máy tính. Nó bao gồm các bài báo về khoa học máy tính và lập trình được viết tốt, tư duy tốt và được giải thích tốt, các câu đố và thực hành / lập trình cạnh tranh / các câu hỏi phỏng vấn công ty.

Bạn đang xem : các chỉ thị trong anglejs là gì

Các chỉ thị là các điểm đánh dấu trong Mô hình Đối tượng Tài liệu (DOM). Các hướng có thể được sử dụng với bất kỳ bộ điều khiển hoặc thẻ HTML nào sẽ cho trình biên dịch biết hoạt động hoặc hành vi chính xác nào được mong đợi. Có một số lệnh hiển thị được xác định trước nhưng nếu nhà phát triển muốn, họ có thể tạo các lệnh mới (custom-directive).

Bảng sau liệt kê các chỉ thị AngularJS quan trọng được tích hợp sẵn.

DirectivesDescriptionng-appStart of AngularJS application.ng-init Được sử dụng để khởi tạo một biếnng-modelng-model được sử dụng để liên kết với HTML controlng-controller Liên kết một bộ điều khiển với viewng-bind Liên kết giá trị với HTML elementng-repeat ng-showHiển thị hoặc ẩn phần tử HTML được liên kếtng-readonly Làm cho phần tử HTML read-onlyng-disable Sử dụng để tắt hoặc bật một nút tự độngng-ifRemoves hoặc tạo lại phần tử HTMLng-clickTùy chỉnh khi nhấp vào

  1. ng- ứng dụng:
    Chỉ thị ng-app trong AngularJS được sử dụng để xác định phần tử gốc của ứng dụng AngularJS. Chỉ thị này tự động khởi tạo ứng dụng AngularJS khi tải trang. Nó có thể được sử dụng để tải các mô-đun khác nhau trong Ứng dụng AngularJS.
    Ví dụ: Ví dụ này sử dụng Chỉ thị ng-app để xác định ứng dụng AngularJS mặc định.


    & lt; html & gt;

    & lt; đầu & gt;

    & lt; title & gt; AngularJS ng-app Chỉ thị & lt; / title & gt;

    & lt; script src =

    " https: //ajax.googleapis .com / ajax / libs / anglejs / 1.6.9 / angle.min.js " & gt;

    & lt; / script & gt;

    & lt; / head & gt;

    & lt; body style = "text-align: center" & gt;

    & lt; h2 style = "color: green" & gt; ng-app chỉ thị & lt; / h2 & gt;

    & lt; div ng-app = "" ng-init = "name = 'GeeksforGeeks'" & gt;

    & lt; p & gt; {{name}} là cổng thông tin dành cho geeks. & lt; / p & gt;

    & lt; / div & gt;

    & lt; / body & gt;

    & lt; / html & gt;

     
      

    Đầu ra:

  2. ng-init:
    Chỉ thị ng-init được sử dụng để khởi tạo dữ liệu Ứng dụng AngularJS. Nó xác định giá trị ban đầu cho ứng dụng AngularJS và gán giá trị cho các biến.
    Lệnh ng-init xác định các giá trị và biến ban đầu cho ứng dụng AngularJS.
    Ví dụ: Trong này ví dụ, chúng tôi khởi tạo một mảng chuỗi.




    & lt; html & gt;

    & lt; script src = " https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/

    angle.min.js " & gt; & lt; / script & gt;

    & lt; head & gt;

    & lt; title & gt; AngularJS ng-init Chỉ thị & lt; / title & gt;

    & lt; / head & gt;

    & lt; body & gt;

    & lt; h1 style = < code class = "string"> "color: green" & gt; GeeksforGeeks

    & lt; h2 & gt; ng-init chỉ thị & lt; / h2 & gt;

    & lt; div ng-app = "" ng-init = "sort = ['quick sort', 'merge sort ',

    ' bubble sort '] "< / code> & gt;

    Kỹ thuật sắp xếp:

    & lt; ul & gt;

    & lt; li & gt; {{sort [0] }} & lt; / li & gt;

    & lt; li & gt; {{sort [1] }} & lt; / li & gt;

    & lt; li & gt; {{sort [2] }} & lt; / li & gt;

    & lt; / ul & gt;

    & lt; / div & gt;

    & lt; / body & gt;

    & lt; / html & gt;

     
      

    Đầu ra:

  3. ng-model:
    ngModel là một chỉ thị liên kết đầu vào, select và textarea, đồng thời lưu trữ giá trị người dùng bắt buộc trong một biến và chúng tôi có thể sử dụng biến đó bất cứ khi nào chúng tôi yêu cầu giá trị đó.
    Nó cũng được sử dụng trong quá trình xác thực trong một biểu mẫu.
    Ví dụ:




    & lt;! DOCTYPE html & gt;

    & lt; html & gt;

    & lt; script src =

    "< span> https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js " & gt;

    & lt; / script & gt;

    & lt; style & gt;

    . column {

    float: left;

    text-align: left;

    width: 49%;

    }

    < p class = "line number12 index11 alt1">

    . row {

    nội dung: " " ;

    display: table;

    }

    < p class = "line number17 index16 alt2"> & lt; / style & gt;

    & lt; body ng-app = "myApp"

    ng-controller = "myController" & gt;

    & lt; h4 & gt; Hộp nhập- & lt; / h4 & gt;

    & lt; div class = < code class = "string"> "row" & gt;

    & lt; div class = < code class = "string"> "column" & gt;

    Tên-

    & lt; input type = " text "

    ng-model = "name" & gt;

    & lt; pre & gt; {{name}} & lt; / pre & gt; Hộp kiểm-

    & lt; input type = "checkbox"

    ng-model = " kiểm tra " & gt;

    & lt; pre & gt; {{check}} & lt; / pre & gt; Hộp đài-

    & lt; input type = "radio"

    ng-model = " choice " & gt;

    & lt; pre & gt; {{choice}} & lt; / pre & gt; Số-

    & lt; input type = "number"

    ng-model = " num " & gt;

    & lt; pre & gt; {{num}} & lt; / pre & gt; Email-

    & lt; input type = "email"

    ng-model = " mail " & gt;

    & lt; pre & gt; {{mail}} & lt; / pre & gt; Url-

    & lt; input type = "url"

    ng-model = "url" & gt ;

    & lt; pre & gt; {{url}} & lt; / pre & gt;

    & lt; / div & gt;

    & lt; div class = < code class = "string"> "column" & gt;

    Ngày:

    & lt; input type = " ngày " ng-model = " date1 " (thay đổi) = < / code> "log (date1)" & gt;

    & lt; pre & gt; Ngày diễn ra: {{date1 + 1}} & lt; / pre & gt; Datetime-local-

    & lt; input type = < / code> "datetime-local" ng-model = "date2" & gt;

    & lt; pre & gt; {{date2 + 1}} & lt; / pre & gt; Thời gian-

    & lt; input type = "time" ng-model = "time1" & gt;

    & lt; pre & gt; {{time1 + 1}} & lt; / pre & gt; Tháng-

    & lt; input type = "month" ng-model = "mon" & gt;

    & lt; pre & gt; {{mon + 1}} & lt; / pre & gt; Tuần-

    & lt; input type = "week" ng-model = "chúng tôi" & gt;

    & lt; pre & gt; {{we + 1}} & lt; / pre & gt;

    & lt; / div & gt;

    & lt; / div & gt;

    & lt; / body & gt;

    & lt; script & gt;

    var app = angle.module ( 'myApp' , []);

    app.controller ( 'myController' , function ($ scope ) {

    $ scope.name = "Xin chào các Geeks!" ;

    $ scope.check = "" ; < / code>

    $ scope.rad = "" ;

    < / code> $ scope.num = " " ;

    $ scope.mail = < code class = "string"> "" ;

    $ scope.url = < code class = "string"> "" ;

    $ scope.date1 = < code class = "string"> "" ;

    $ scope.date2 = < code class = "string"> "" ;

    $ scope.time1 = < code class = "string"> "" ;

    $ scope.mon = < code class = "string"> "" ;

    $ scope.we = < code class = "string"> "" ;

    $ scope.choice = < code class = "string"> "" ;

    $ scope.c = < code class = "keyword"> function () {

    $ scope.choice = true ;

    };

    });

    & lt; / script & gt;

    & lt; / html & gt;

     
      

    Đầu ra:

  4. ng-controller:
    Ng- Chỉ thị bộ điều khiển trong AngularJS được sử dụng để thêm bộ điều khiển vào ứng dụng. Nó có thể được sử dụng để thêm các phương thức, hàm và biến có thể được gọi trong một số sự kiện như nhấp chuột, v.v. để thực hiện hành động nhất định.
    Ví dụ:


    < p>



    & lt;! DOCTYPE html & gt;

    & lt; html & gt;

    & lt; đầu & gt;

    & lt; title & gt; ng-controller Chỉ thị & lt; / tiêu đề & gt;

    & lt; script src =

    " https: //ajax.googleapis .com / ajax / libs / anglejs / 1.4.2 / angle.min.js " & gt;

    & lt; / script & gt;

    & lt; / head & gt;

    & lt; body ng-app = "app" style = " text-align: center " & gt;

    & lt; h1 style = "color: green" & gt; GeeksforGeeks & lt; / h1 & gt;

    & lt; h2 & gt; ng-controller Chỉ thị & lt; / h2 & gt; & lt; br & gt;

    & lt; div ng-controller = "geek" & gt;

    Tên: & lt; input class = "form-control" type = "text"

    ng-model = " tên " & gt;

    & lt; br & gt; & lt; br & gt;

    Bạn đã nhập: & lt; b & gt; & lt; span & gt; {{name}} & lt; / span & gt; & lt; / b & gt;

    & lt; / div & gt;

    & lt; script & gt;

    var app = angle.module ( 'app' , []);

    app.controller ( 'geek' , function ($ scope ) {

    $ scope.name = "geeksforgeeks" ;

    });

    & lt; / script & gt;

    & lt; / body & gt;

    & lt; / html & gt;

     
      

    Đầu ra:

  5. ng-bind:
    Chỉ thị ng-bind trong AngularJS được sử dụng để ràng buộc / thay thế nội dung văn bản của bất kỳ phần tử HTML cụ thể nào bằng giá trị được nhập trong biểu thức đã cho. Giá trị của nội dung HTML được chỉ định cập nhật bất cứ khi nào giá trị của biểu thức thay đổi trong chỉ thị ng-bind .




    & lt;! DOCTYPE html & gt;

    & lt; html & gt;

    & lt; đầu & gt;

    & lt; title & gt; ng-check Chỉ thị & lt; / tiêu đề & gt;

    & lt; script src =

    " https: //ajax.googleapis .com / ajax / libs / anglejs / 1.6.9 / angle.min.js " & gt;

    & lt; / script & gt;

    & lt; / head & gt;

    & lt; body ng-app = "gfg" style = " text-align: center " & gt;

    & lt; h1 style = "color: green" & gt; GeeksforGeeks & lt; / h1 & gt;

    & lt; h2 & gt; ng-bind Chỉ thị & lt; / h2 & gt;

    & lt; div ng-controller = "app" & gt;

    num1: & lt; input type = "number" ng-model = "num1"

    ng-change = " product () " / & gt;

    & lt; br & gt; & lt; br & gt;

    num2: & lt; input type = "number" ng-model = " num2 "

    < / code> ng-change = "product ()" / & gt;

    & lt; br & gt; & lt; br & gt;

    & lt; b & gt; Sản phẩm: & lt; / b & gt; & lt; span ng-bind = "result" & gt; & lt; / span & gt;

    & lt; / div & gt;

    & lt; script & gt;

    var app = angle.module ( " gfg " , []);

    app.controller ( 'app' , [ '$ scope' , function ($ app) {

    $ app.num1 = 1;

    $ app.num2 = 1;

    $ app.product = function () {< / code>

    $ app.result = ($ app.num1 * $ app.num2);

    }

    }]);

    & lt; / script & gt;

    & lt; / body & gt;

    & lt; / html & gt;

     
      

  6. ng-repeat:
    Angular-JS ng-repeat chỉ thị là một công cụ hữu ích để lặp lại một tập hợp mã HTML cho một số lần hoặc một lần cho mỗi mục trong một bộ sưu tập các mục. ng-repeat chủ yếu được sử dụng trên mảng và đối tượng.
    ng-repeat tương tự như một vòng lặp mà chúng ta có trong C, C ++ hoặc các ngôn ngữ khác nhưng về mặt kỹ thuật, nó khởi tạo một mẫu (thường là một tập hợp các cấu trúc HTML) cho mỗi phần tử trong một tập hợp mà chúng ta đang truy cập. Angular duy trì một biến $ index làm khóa cho phần tử hiện đang được truy cập và người dùng cũng có thể truy cập vào biến này.

    Ví dụ:

    1. Tạo một tệp app.js cho ứng dụng.




      var app = angle.module ( 'myApp' , []);

      app.controller ( 'MainCtrl' , chức năng ($ scope) {

      < code class = "trơn"> $ scope.names = [ 'Adam' , 'Steve' , 'George' , 'James' , 'Armin' ];

      console.log ($ scope .names);

      });

       
        

      Dòng 1- Đã tạo một mô-đun ứng dụng có tên “myApp” không có phụ thuộc.
      Dòng 3- Bộ điều khiển chính cho ứng dụng của chúng tôi.
      Dòng 4- Mảng chuỗi “tên”.

    2. Tạo trang index.html




      < code class = "trơn"> & lt;! DOCTYPE html & gt;

      & lt; html ng-app = "myApp" < / code> & gt;

      & lt; head & gt;

      & lt; title & gt; Angular ng-repeat & lt; / tiêu đề & gt;

      & lt; script & gt; type = "text / javascript" src = "jquery-3.2. 1.min.js " & gt;

      & lt; / script & gt;

      & lt; script & gt; type = "text / javascript" src = "angle.js" & gt; & lt; / script & gt;

      & lt; script & gt; type = "text / javascript" src = "app.js" & gt; & lt; / script & gt;

      & lt; / head & gt;

      & lt; body ng-controller = "MainCtrl" < / code> & gt;

      & lt; h2 & gt; Đây là danh sách tên & lt; / h2 & gt;

      & lt; ul & gt;

      & lt; li ng-repeat = "tên trong tên" & gt;

      {{name}} < / p>

      & lt; / li & gt;

      & lt; / ul & gt;

      & lt; / body & gt;

      & lt; / html & gt;

       
       

      Dòng 5- Bao gồm tất cả các phần phụ thuộc như jquery, angle-js và tệp app.js
      Dòng 12- Sử dụng lệnh ng-repeat để lấy một tên từ các tên mảng tại a thời gian và hiển thị nó.
      Đầu ra:

            <
                    • ờ >
                      Chỉ thị ng-show trong AngluarJS được sử dụng để hiển thị hoặc ẩn phần tử HTML được chỉ định. Nếu biểu thức đã cho trong thuộc tính ng-show là true thì phần tử HTML sẽ hiển thị, nếu không nó sẽ ẩn phần tử HTML. Nó được hỗ trợ bởi tất cả các phần tử HTML.
                      Ví dụ 1: Ví dụ này sử dụng Chỉ thị ng-show để hiển thị phần tử HTML sau khi đã chọn hộp kiểm.

                      & lt;! DOCTYPE html & gt;

                      & lt; html & gt;

                      & lt; đầu & gt;

                      & lt; title & gt; ng-show Chỉ thị & lt; / tiêu đề & gt;

                      & lt; script src =

                      " https: //ajax.googleapis .com / ajax / libs / anglejs / 1.6.9 / angle.min.js " & gt;

                      & lt; / script & gt;

                      & lt; / head & gt;

                      & lt; body & gt;

                      & lt; div ng-app = "app" ng-controller = "geek" & gt;

                      & lt; h1 style = "color: green" & gt; GeeksforGeeks & lt; / h1 & gt;

                      & lt; h2 & gt; ng-show Chỉ thị & lt; / h2 & gt;

                      & lt; input id = "chshow" "checkbox" ng-model = "show" / & gt;

                      & lt; label cho = "chshow" & gt;

                      Hiển thị đoạn văn

                      & lt; / label & gt;

                      & lt; p ng-show = "show" style = " background: green; color: white;

                      font-size: 14px; width: 35%; padding: 10px;" & gt;

                      Hiển thị this đoạn sử dụng ng-show

                      < / code> & lt; / p & gt;

                      & lt; / div & gt;

                      & lt; script & gt;

                      var myapp = angle.module ( " app " , []);

                      myapp.controller ( "geek" , function ($ scope ) {

                      $ scope.show = false ;

                      });

                      & lt; / script & gt;

                      & lt; / body & gt;

                      & lt; / html & gt;

                       
                        

                      Đầu ra:
                      Trước khi chọn hộp kiểm:

                      Sau khi chọn hộp kiểm:

                    • ng-readonly:
                      Chỉ thị ng-readonly trong AngularJS được sử dụng để chỉ định thuộc tính readonly của một phần tử HTML. Phần tử HTML sẽ chỉ được đọc nếu biểu thức bên trong chỉ thị ng-readonly trả về true.
                      Ví dụ: Ví dụ này sử dụng Chỉ thị ng-readonly để bật thuộc tính readonly.




                      & lt;! DOCTYPE html & gt;

                      & lt; html & gt;

                      & lt; head & gt;

                      & lt; title & gt; ng-readonly Chỉ thị & lt; / tiêu đề & gt;

                      & lt; script src =

                      " https: //ajax.googleapis .com / ajax / libs / anglejs / 1.4.2 / angle.min.js " & gt;

                      & lt; / script & gt;

                      & lt; / head & gt;

                      & lt; body ng-app style = "text-align: center" < mã lớp = "trơn"> & gt;

                      & lt; h1 style = < code class = "string"> "color: green" & gt; GeeksforGeeks & lt; / h1 & gt;

                      & lt; h2 & gt; ng-readonly Chỉ thị & lt; / h2 & gt;

                      & lt; div & gt;

                      & lt; label & gt; Kiểm tra để đặt tháng chỉ đọc: & lt; input type = "hộp kiểm"

                      ng-model = "open" & gt; & lt; / label & gt;

                      & lt ; br & gt; & lt; br & gt;

                      Tháng nhập: & lt; input ng-readonly = "open" type = "month"

                      ng-model = "tháng" & gt;

                      & lt; / div & gt;

                      & lt; / body & gt;

                      & lt; / html & gt;

                       
                        

                      Đầu ra:
                      Trước khi chọn hộp kiểm:

                      Sau khi chọn hộp kiểm:

                    • ng-disable:
                      Chỉ thị về ng-disable trong AngularJS được sử dụng để bật hoặc tắt các phần tử HTML. Nếu biểu thức bên trong thuộc tính ng-disable trả về true thì trường biểu mẫu sẽ bị vô hiệu hóa hoặc ngược lại. Nó thường được áp dụng trên trường biểu mẫu (đầu vào, chọn, nút, v.v.).
                      Ví dụ 1: Ví dụ này sử dụng Chỉ thị ng-disable để tắt nút.




                      & lt;! DOCTYPE html & gt;

                      & lt; html & gt;

                      & lt; đầu & gt;

                      & lt; title & gt; ng-disable Chỉ thị & lt; / tiêu đề & gt;

                      & lt; script src =

                      " https: //ajax.googleapis .com / ajax / libs / anglejs / 1.6.9 / angle.min.js " & gt;

                      & lt; / script & gt;

                      & lt; / head & gt;

                      & lt; body ng-app = "app" style = " text-align: center " & gt;

                      & lt; h1 style = "color: green" & gt; GeeksforGeeks & lt; / h1 & gt;

                      & lt; h2 & gt; ng-disable Chỉ thị & lt; / h2 & gt;

                      & lt; div ng-controller = "app" ng-init = " disable = false " & gt;

                      & lt; nút ng-click = "geek (vô hiệu hóa)" ng-disable = "vô hiệu hóa" & gt;

                      Nhấp để Tắt

                      & lt; / button & gt;

                      & lt; button ng-click = "geek (vô hiệu hóa)" ng-show = "vô hiệu hóa" & gt;

                      Nhấp để Bật

                      & lt; / button & gt;

                      & lt; / div & gt;

                      & lt; script & gt;

                      var app = angle.module ( " app " , []);

                      app.controller ( 'app' , [ '$ scope' , function ($ app) {

                      $ app.geek = chức năng (vô hiệu hóa) {

                      $ app.disable =! disable;

                      } < / p>

                      }]);

                      & lt; / script & gt;

                      & lt; / body & gt;

                      & lt; / html & gt;

                       
                        

                      Đầu ra:
                      Trước khi nhấp vào nút:

                      Sau khi nhấp vào nút:

                    • ng-if:
                      Chỉ thị ng-if trong AngularJS được sử dụng để xóa hoặc tạo lại một phần của phần tử HTML dựa trên biểu hiện. Ng-if khác với ng-hide vì nó loại bỏ hoàn toàn phần tử trong DOM thay vì chỉ ẩn phần hiển thị của phần tử. Nếu biểu thức bên trong nó là false thì phần tử sẽ bị xóa và nếu nó là true thì phần tử sẽ được thêm vào DOM.
                      Ví dụ: Ví dụ này thay đổi nội dung sau khi nhấp vào nút. < p class = "ring-load" id = "run-and-edit-loader">




                      < / p>

                      & lt;! DOCTYPE html & gt;

                      & lt; html & gt;

                      & lt; đầu & gt;

                      & lt; title & gt; ng-hide Chỉ thị & lt; / tiêu đề & gt;

                      & lt; script src =

                      " https: //ajax.googleapis .com / ajax / libs / anglejs / 1.6.9 / angle.min.js " & gt;

                      & lt; / script & gt;

                      & lt; / head & gt;

                      & lt; body ng-app = "geek" style = "text-align: center" & gt;

                      & lt; h1 style = "color: green" & gt;

                      GeeksforGeeks

                      < p class = "line number16 index15 alt1"> & lt; / h1 & gt;

                      & lt; h2 & gt; ng- if Chỉ thị & lt ; / h2 & gt;

                      & lt; div ng-controller = "app as vm" & gt;

                      & lt; div ng- < code class = "keyword"> if = "! vm.IsShow" & gt;

                      & lt; input type = < code class = "string"> "button" class = "btn btn-primary"

                      ng-click = "vm .IsShow =! Vm.IsShow "

                      value = "Đăng nhập" & gt;

                      & lt; / p & gt;

                      & lt; / div & gt;

                      & lt; div ng- nếu = < / code> "vm.IsShow" & gt;

                      & lt; button class = < code class = "string"> "btn btn-primary"

                      ng-click = " vm.IsShow =! vm.IsShow " & gt;

                      Đăng xuất

                      & lt; / button & gt;

                      & lt; p & gt;

                      GeeksforGeeks là máy tính

                      cổng thông tin khoa học cho < / code> geeks.

                      & lt; / p & gt;

                      & lt; / div & gt;

                      & lt; / div & gt;

                      & lt; script & gt;

                      var app = angle.module ( " geek ", []);

                      app.controller ( 'app' , [ '$ scope' , function ($ scope) {

                      var vm = this ;

                      }]);

                      & lt; / script & gt;

                      & lt; / body & gt;

                      & lt; / html & gt;

                       
                        

                      Đầu ra:
                      Trước khi nhấp vào nút:


                      Sau khi nhấp vào nút:

                    • ng-click:
                      Chỉ thị về ng-click trong AngluarJS được sử dụng để áp dụng hành vi tùy chỉnh khi một phần tử được nhấp. Nó có thể được sử dụng để hiển thị / ẩn một số phần tử hoặc nó có thể bật lên cảnh báo khi nhấp vào nút.
                      Ví dụ: Ví dụ này sử dụng ng-click Chỉ thị để hiển thị thông báo cảnh báo sau khi nhấp vào phần tử.




                      & lt;! DOCTYPE html & gt;

                      & lt; html & gt;

                      & lt; đầu & gt;

                      & lt; title & gt; ng-click Chỉ thị & lt; / tiêu đề & gt;

                      & lt; script src =

                      " https: //ajax.googleapis .com / ajax / libs / anglejs / 1.6.9 / angle.min.js " & gt;

                      & lt; / script & gt;

                      & lt; / head & gt;

                      & lt; body ng-app = "geek" style = " text-align: center " & gt;

                      & lt; h1 style = "color: green" & gt; GeeksforGeeks & lt; / h1 & gt;

                      & lt; h2 & gt; ng-click Chỉ thị & lt; / h2 & gt;

                      & lt; div ng-controller = "app" & gt;

                      & lt; nút & gt;

                      & lt; a href = < code class = "string"> "" ng-click = "alert ()" & gt;

                      Nhấp vào đây

                      & lt; / a & gt;

                      & lt; / button & gt;

                      & lt; / div & gt;

                      & lt; script & gt;

                      var app = angle.module ( " geek " , []);

                      app.controller ( 'app' , [ '$ scope' , function ($ app) {

                      $ app.alert = chức năng () {

                      alert ( "Đây là ví dụ về ng-click" );

                      }

                      }]);

                      & lt; / script & gt;

                      & lt; / body & gt;

                      & lt; / html & gt;

                       
                        

                      Đầu ra:
                      Trước khi nhấp vào nút:

                      Sau khi nhấp vào nút:

    Ghi chú cá nhân của tôi


Xem thêm những thông tin liên quan đến chủ đề các chỉ thị trong anglejs là gì

AngularJS tutorial - What is AngularJS

alt

  • Tác giả: kudvenkat
  • Ngày đăng: 2015-10-28
  • Đánh giá: 4 ⭐ ( 5903 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: AngularJS tutorial - What is AngularJS

    If you are a foodie like me, I am sure you will enjoy the recipes on my friend's YouTube channel. If you find them useful, please subscribe and share to support her. She's really good at what she does.
    https://www.youtube.com/channel/UC7sEwIXM_YfAMyonQCrGfWA

    In this video we will discuss
    What is AngularJS
    Benefits of AngularJS
    A simple AngularJS example

    What is AngularJS
    AngularJS is a JavaScript framework that helps build applications that run in a web browser.

    Who developed AngularJS
    Google is the company that developed AngularJS. AngularJS is an open source project, which means it can be be freely used, changed, and shared by anyone.

    AngularJS is an excellent framework for building both Single Page Applications (SPA) and Line of Business Applications. Many companies are using Angular today, and there are many public facing web sites that are built with angular.

    There is a website, https://www.madewithangular.com, that has the list of web sites that are built using AngularJS. Within this list you can find many popular websites.

    What are the benefits of using AngularJS
    1. Dependency Injection : Dependency Injection is something AngularJS does quite well. If you are new to Dependency Injection, don't worry, we will discuss it in detail with examples in a later video.

    2. Two Way Data-Binding : One of the most useful feature in AngularJS is the Two Way Data-Binding. The Two Way Data-Binding, keeps the model and the view in sync at all times, that is a change in the model updates the view and a change in the view updates the model.

    3. Testing : Testing is an area where Angular really shines. Angular is designed with testing in mind right from the start. Angular makes it very easy to test any of it's components through both unit testing and end to end testing. So there's really no excuse for not testing any of your angular application code.

    4. Model View Controller : With angular it is very easy to develop applications in a clean MVC way. All you have to do is split your application code into MVC components. The rest, that is managing those components and connecting them together is done by angular.

    5. Many more benefits like controlling the behaviour of DOM elements using directives and the flexibility that angular filters provide.

    We will discuss directives, filters, Modules, Routes etc with examples in our upcoming videos in this series.

    To build angular applications you only need one script file and that is angular.js.

    To get the script file visit https://angularjs.org. From here
    1. You can download the angular script file
    2. CDN link - We discussed the benefits of using CDN in Part 3 of jQuery tutorial.
    3. Various resources to learn angular - Here you will find videos, Free courses, Tutorials and Case Studies. You will also find API reference which is extremeley useful.

    To get started with angular
    1. Add a reference to the angular script
    2. Include ng-app attribute

    What is ng-app
    In angular, ng-app is called a directive. There are many directives in angular. You can find the complete list of directives on https://angularjs.org. The ng prefix in the directive stands for angular. The ng-app directive is a starting point of AngularJS Application. Angular framework will first check for ng-app directive in an HTML page after the entire page is loaded. If ng-app directive is found, angular bootstraps itself and starts to manage the section of the page that has the ng-app directive.

    So the obvious next question is, where to place the ng-app directive on the page
    It should be placed at the root of the HTML document, that is at the [html] tag level or at the [body] tag level, so that angular can control the entire page.

    However, there is nothing stopping you from placing it on any other HTML element with in the page. When you do this only that element and it's children are managed by angular.

    Double curly braces are called binding expressions in angular. These

    All the following are valid expressions in angular
    {{ 1 == 1 }} - Evaluates to true
    {{ { name: 'David', age : '30' }.name }} - Returns the name property value
    {{ ['Mark', 'David', 'Sara'][2] }} - Returns the 2nd element from the array

    Link for all dot net and sql server video tutorial playlists
    https://www.youtube.com/user/kudvenkat/playlists?sort=dd&view=1

    Link for slides, code samples and text version of the video
    http://csharp-video-tutorials.blogspot.com/2015/10/what-is-angularjs.html

: Sự khác biệt chính giữa các thành phần và chỉ thị trong AngularJS 1.5 là gì?

  • Tác giả: vi.chathamabc.org
  • Đánh giá: 4 ⭐ ( 1807 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Tôi cảm thấy khó hiểu sự khác biệt thực sự giữa các thành phần và chỉ thị. Bây giờ tôi hiểu rằng các thành phần là một khái niệm dễ dàng hơn nhiều. Vì vậy, có điều này trong tâm trí, có lý do nào ...

$scope và chỉ thị trong angularjs

  • Tác giả: longnv.name.vn
  • Đánh giá: 4 ⭐ ( 2149 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: $scope và chỉ thị là kiến thức angularjs quan trọng . $scope gắn với 1 controller để điều khiển các vùng của trang. Chỉ thị là các lệnh trong angularjs.

Chỉ thị AngularJS là gì?

  • Tác giả: qastack.vn
  • Đánh giá: 3 ⭐ ( 7119 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: [Tìm thấy giải pháp!] Nó là gì (xem định nghĩa rõ ràng của jQuery làm ví dụ)? Một chỉ thị…

AngularJS: Chỉ thị trong AngularJS

  • Tác giả: v1study.com
  • Đánh giá: 3 ⭐ ( 6696 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: AngularJS cho phép bạn mở rộng HTML với các thuộc tính mới gọi là Chỉ thị (Directive). AngularJS có một bộ các chỉ thị được xây dựng sẵn có chức năng cho

One moment, please...

  • Tác giả: www.dammio.com
  • Đánh giá: 4 ⭐ ( 5586 lượt đánh giá )
  • Khớp với kết quả tìm kiếm:

Tổng quan về AngularJS

  • Tác giả: freetuts.net
  • Đánh giá: 3 ⭐ ( 5288 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Tìm hiểu Tổng quan về AngularJS - AngularJS là gì?, các thành phần quan trọng ưu điểm và được điểm trong angularJS, các tính chất quan trọng của angularjs

Xem thêm các bài viết khác thuộc chuyên mục: Kiến thức lập trình

Xem Thêm  Cách tạo nền gradient màu bằng CSS và HTML - làm thế nào để tạo một gradient màu

By ads_php