Angular js getting started
Download as DOCX, PDF0 likes562 views
This document provides an introduction and overview of AngularJS, including: 1. AngularJS is an open source JavaScript framework maintained by Google to build single-page applications using MVC architecture. It features two-way data binding, routing, templates, and dependency injection. 2. The key components of AngularJS applications are controllers, views, services, and directives. Controllers handle view interaction, views present data using templates, services manage non-view logic, and directives create custom HTML elements. 3. Getting started with AngularJS only requires adding a script tag to load AngularJS and adding ng-app and ng-model directives to bind an input to a model. This provides
Angular js getting started
- 1. AngularJS-Getting Started AngularJS is an open source web application framework maintained by Google and the community to assist the single page application. Angular team calls it as the “Structural Framework for dynamic web application”. It is a client-side technology completely written in JavaScript. Its goal is to expand the web applications with Model-View-Controller (MVC) capability and make development and testing easier. AngularJS Features: 1. Two way data binding 2. Routing 3. MVC 4. Templates 5. Directives 6. History 7. Dependency injection 8. Testing Because of these features AngularJS makes client side development easier. AngularJS architecture Now, Let’s have look at some of the architectural considerations of AngularJS 1. Two way data binding: AngularJS supports two way data binding. This means user inputs in form field is automatically updated into angular models. So, that you don’t need to watch specific events and respond to those events also don’t need to update the HTML manually instead angular will handle it.
- 2. 2. Dirty checking: AngularJS implies the concept of dirty checking. You don’t need to put the data into specialstructures and callthe getter and setter methods. Just put your data into simple plane old JavaScript objects and angular will respond whenever data changes and update the view automatically. 3. Dependencyinjection:AngularJScomes with inbuilt dependency injection. You can divide your application into different components which AngularJS can inject into each other. Simply, it encapsulates the different pieces of application and improves the testability. AngularJS components Let’s have look at some of the important components of AngularJS. 1. Controllers: a. Are the central component of any angular application b. Controllers coordinate view and model c. Handle the view interaction 2. Views: a. Used for presenting data. b. Composed of HTML templates, data binding expressions, directives and filters 3. Services: a. Handles the non-view logic(business logic) b. Communicate with the server c. Hold data and state 4. Directives: a. Way to teach HTML new tricks b. Used to create custom HTML elements c. Used for DOM manipulation Getting started To get started with the angular application just add the reference to AngularJS library. To add the reference goto https://angularjs.org. Once you have added the AngularJS script into page you are ready to start using it.
- 3. Now, just add a text box which allow you to type your name. When you run above code nothing much will happen. You will just see a text box and as you type nothing will happen. Let’s say you want to see the value what you type in text box. First thing add ng-app directive into html tag also ng-model. ng-app: once you add the ng-app directive and run the application, first the angular script loads and ng-app will initialize the application. ng-model: what ng-model will do is ,it will add property up in the memory called “name” into what is called as “scope”. Behind the scenes it will make an empty ViewModel and then filling it with a “name” property. Now, if you want to write out the value you type into the text box created earlier, then just add a data binding expression. In angularjs “{{ }}” are used to bind the data.
- 4. Now, let’s go ahead and run, this how output looks Find the below plunker link to test the code. http://plnkr.co/edit/KESbO7xT4F7zZOPxFOJR?p=preview This is a very simple example of angularjs just to get started and get feel of angular. In the next part we will see some core concepts like controllers, modules, factories etc. Stay tuned for more on AngularJS.