Looking for a Tutor Near You?

Post Learning Requirement »
x

Choose Country Code

x

Direction

x

Ask a Question

x

x
x
For better view click here
x
Hire a Tutor
DISCOVER

Note On AngularJS In A Nutshell

Loading...

Published in: Computer Science | Java Script | Web Development
745 Views

AngularJS is a JavaScript framework that embraces extending HTML into a more expressive and readable format. It allows you to decorate your HTML with special markup that synchronizes with your JavaScript allowing you to write your application logic instead of manually updating views.

Prantik S / Kolkata

11 years of teaching experience

Qualification: MCA (Jaipur National University - [JNU], Jaipur - 2017)

Teaches: Basic Computer, Computer for official job, MS Office, School Level Computer, ICT Training, Computer Science, Information Practice, IT & Computer Subjects, BCA Tuition, IT, Computer, C / C++, C# (C Sharp), Java And J2EE, Python Programming, Visual Basic, BCA Subjects, Hardware Training, Networking, Java Script

Contact this Tutor
  1. What is AnaularJS? iavascript(is) AngularJS is a JavaScript framework that embraces extending HTML into a more expressive and readable format. It allows you to decorate your HTML with special markup that synchronizes with your JavaScript allowing you to write your application logic instead of manually updating views. In order to start using AngularJS, we need to add the framework to our HTML: HTML> As you can see, we use the script tag to add the JavaScript file using the official CDN. Note: AngularJS is open source. It is the frontend part of the MEAN stack, consisting of MongoDB database, Express.js web application server framework, AngularJS itself, and
  2. Node.js server runtime environment. AngularJS: Expressions js An expression is usually wrapped inside double curly braces, such as {{ expression }}. AngularJS evaluates the expression and produces a result. Expressions can contain literals, operators, and properties. Let's create an AngularJS app with an expression: HTML> {{ 2+2 }}
  3. The code above produces the output 4, because AngularJS evaluates the expression and returns the result. Notice the ng-app attribute in the tag. This is called a directive, and it defines that this is an AngularJS application. If we remove that directive, the expression will not be evaluated. There are a number of other directives, which allow AngularJS to attach specified behavior to HTML elements. We will learn about them in the coming lessons. Note: AngularJS expressions do not support conditionals, loops, and exceptions, while JavaScript expressions do. AngularJS: Data Binding js One of the main concepts of AngularJS is data binding. Let's look at the following AngularJS app to understand how data binding works:
  4. HTML>
  5. The view is basically the DOM that the user sees. The model is the data shown to the user in the view and with which the user interacts. Note: Data binding makes the view a projection of the model at all times. When the model changes, the view reflects the change, and vice versa. AngularJS: Directives js Directives are similar to HTML attributes and allow a specified behavior to be attached to the DOM elements. The ng-app directive initializes an AngularJS application. The ng-model directive binds an HTML element to a property. The ng-init directive initializes application data. For example: HTML>
  6. CeIsius: Fahrenheit: {{ celsius*l .8+diff
  7. N/A
  8. The ng-controller directive is used to define a controller. Let's see an example of a controller: HTML> {{message}} var ngApp = angular.moduIe(ImyApp', [l); ngApp.controIIer(ImyControIIer', function ($scope) { $scope.message = "Hello World!";
  9. After creating a module, we add a controller function using the controller() method where the first parameter is the name of the controller and second parameter is a function for the controller. $scope is a built-in object that contains application data and methods. We have initialized the message property using $scope, and used it in our view. AngularJS creates and injects a different $scope object to each controller in an application. The data and methods attached to $scope inside one controller cannot be accessed in another controller. Controllers are used to: - Set up the initial state of the $scope object. - Add behavior to the $scope object. Note: An AngularJS application consists of: View: Essentially the DOM that the user sees.
  10. Model: The data shown to the user in the view. Controller: The business logic behind views. The model is stored in the $scope, so that controllers, directives, and expressions can access it. An AngularJS application consists of: View: Essentially the DOM that the user sees. Model: The data shown to the user in the view. Controller: The business logic behind views. The model is stored in the $scope, so that controllers, directives, and expressions can access it. HTML>
  11. CIick me! count var app = angular.moduIe(ImyAppI, [l); app.controIIer(IcIickCounterI, function($scope) { $scope.count = 0;
  12. ltems: {{todos.length}} {{todo.text}}
  13. N/A
  14. {{todo.text}} var app = angular.moduIe(ItodoAppI, L]); app.controIIer(ItodoListI, function($scope) { $scope.todos = [ {text:ILearn AngularJS, done:true}, {text:build an AngularJS app', done:false}]; $scope.addTodo = function() { if($scope.todoText I = $scope.todos.push({text:$scope.todoText, done:false}); $scope.todoText = 11.
  15. We initialize our todos list with some default values and create the addTodo function that will be called when the add button is clicked. Tap Try It Yourself to see the whole code in action.

Need a Tutor or Coaching Class?

Post an enquiry and get instant responses from qualified and experienced tutors.

Post Requirement

Related Study Notes

Upload Study Notes

If you have your own Study Notes which you think can benefit others, please upload on LearnPick. For each approved Study Note you will get 100 Credit Points and 100 Activity Score which will increase your profile visibility.

Upload Now
Home > Study Notes > Note On AngularJS In A Nutshell