Thursday, April 16, 2015

AngularJS and Angular Directives

AngularJS, is an open-source web application framework maintained by Google and a community of individual developers. It address many of the challenges encountered in developing single-page applications. Angular [1] is built around the belief that declarative programming should be used for building user interfaces and connecting software components, while imperative programming is better suited to defining an application's business logic. AngularJS extends HTML with new attributes. Those extended tags are dynamically content through two-way data-binding that allows for the automatic synchronization of models and views. AngularJS is a MVC based framework.

 

  • ng-app : This directive defines and links an AngularJS application to HTML.
  • ng-model : This directive binds the values of AngularJS application data to HTML input controls.
  • ng-bind : Directive binds application data to the HTML view.

Here is sample page that you can try to see those

1 <!DOCTYPE html>
2 <html lang="en-US">
3
4 <head>
5 <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
6 </head>
7
8 <body>
9
10 <div ng-app="">
11 <p>Name : <input type="text" ng-model="name"></p>
12 <h1>Hello {{name}}</h1>
13 </div>
14
15 </body>
16 </html>

Here are some most commonly used directives.



  • ng-model-options: Allows tuning how model updates are done.

  • ng-class: Allows class attributes to be dynamically loaded.

  • ng-controller: Specifies a JavaScript controller class that evaluates HTML expressions.

  • ng-click: Directive allows to specify custom behavior when an element is clicked.

  • ng-repeat: Instantiate an element once per item from a collection.

  • ng-list: Text input that converts between a delimited string and an array of strings. (default delimiter is a comma)

  • ng-show & ng-hide: Conditionally show or hide an element, by setting the CSS display style.

  • ng-switch: Conditionally instantiate one template from a set of choices, depending on the value of a selection expression.

  • ng-change: Evaluate the given expression when the user changes the input.

  • ng-view: The base directive responsible for handling routes

  • ng-form: It is useful to nest forms (validiting of a sub-group of controls).

  • ng-if :Basic if statement directive.

  • ng-include: Fetches, compiles and includes an external HTML fragment.

  • ng-animate: A module provides support for JavaScript, CSS3 transition and CSS3 keyframe animation

  • ng-style:  It allows to set CSS style on an HTML element conditionally.

 


[1] https://angularjs.org/

19 comments:

  1. Nice reading, This very good information, thanks for sharing this blog. AngularJS Web Application Development Company provide the best services like AngularJS QA & Testing, Cross-platform development, custom website solution, data binding with localization and app design & development, etc .

    ReplyDelete
  2. It is better to engaged ourselves in activities we like. I liked the post. Thanks for sharing.AngularJS Training in Pune

    ReplyDelete
  3. What as up, I read your blogs like every week. Your writing style is awesome, keep up the good work!
    https://www.kitsonlinetrainings.com/course/salesforce-online-training salesforce online training
    Angular JS training
    Selenium training
    DevOps training
    Pega training
    Servicenow training

    ReplyDelete

  4. Hi
    I visited your blog you have shared amazing information, i really like the information provided by you, You have done a great work. I hope you will share some more information regarding full movies online. I appreciate your work.
    Thanks
    WEB DEVELOPMENT TRAINING IN BANGALORE

    ReplyDelete
  5. nice informative post. Thanks you for sharing.
    AngularJS is an auxiliary framework for Hybrid web applications. It gives you a chance to utilize HTML as your layout language and gives you a chance to stretch out HTML’s syntax to express your application’s components plainly and compactly.
    AngularJS Development
    Website Design

    ReplyDelete
  6. very nice blogs!!! i have to learning for lot of information for this sites...Sharing for wonderful information.Thanks for sharing this valuable information to our vision. You have posted a trust worthy blog keep sharing.
    Offshore Angular Development Company – Nintriva

    ReplyDelete
  7. This is one of the best article read in recent times. continue your good work.thanks for sharing with us.

    Inwizards LLC - Top Angularjs Developmant Company

    Hire Angularjs Developers

    Hire Angularjs Developer

    ReplyDelete
  8. Wonderful, you have shared really helpful information. Your post covers important points. Being a tech blogger, I know what modern businesses need. You can also look at my page where I discuss the untouched and trending topics in the industry.
    You can visit our Services here
    PHP development services
    PWA Development Company

    ReplyDelete
  9. You explained the topic very well. The content has provided meaningful information thanks for sharing. CodersNews are listed Top 10 AngularJS Development Companies. These companies have the experience and the expertise to build high-performing web solution for AngularJS.

    ReplyDelete
  10. You explained the topic very well. The content has provided meaningful information thanks for sharing.if you looking for a company which provide same services, Follow:- CoderNews that's Provide Top 10 AngularJS Development Companies

    ReplyDelete
  11. You have done a great job of explaining the concept of directives in Angular.JS and Angular. The article is well-structured, and Your clear, and concise writing style makes it easy to understand. I appreciate your efforts in providing real-world examples to illustrate the use of directives. Overall, this is a useful resource for anyone looking to improve their understanding of Angular.JS and Angular directives, excellent work.
    If you are looking to Hire Remote Developers, feel free to contact us, we will be happy to help you.

    ReplyDelete
  12. Nice Blog!
    I appreciate the effort and time you put into your blog explaining AngularJS and Angular directives. Thanks for sharing. Connect with us if you're looking to hire dedicated AngularJS developers for your next project!

    ReplyDelete
  13. You have done a great job of explaining the concept of directives in Angular.JS and Angular. The article is well-structured, and Your clear, and concise writing style makes it easy to understand. I appreciate your efforts in providing real-world examples to illustrate the use of directives. Overall, this is a useful resource for anyone looking to improve their understanding of Angular.JS and Angular directives, excellent work.
    If you're looking for a reliable Mobile App Development Company based in India, then we'd love to hear from you.

    ReplyDelete