This is the first post of the series of posts I am going to write on AngularJS. This series is the digital notes for my reference which I had created while learning AngularJS.
AngularJS is a javascript
framework for creating single page application, & line of business
application.
- AngularJS extends the HTML with new attributes which are called directives.
- It has inbuilt directives which provides functionalities to your application.
- It also lets you define your own directives. – Modules are used for creating the additional directives.
- It supports the two-way data binding.
- Data binding in AngularJS is the synchronization between the model and the view.
- Binds the AngularJS data to HTML with AngularJS expressions. (The ng-model directive provides a two-way binding between the model and the view.)
- AngularJS provides high level of abstraction to the developer, at the cost of flexibility. Meaning that not every application is for AngulrJS. AngularJS was built with the CRUD (Create, Read, Update, Delete) application in mind, which makes this, the good fit for majority of web applications. However this is not fit for application where intensive & tricky DOM manipulations are required example: Games & UI editors. For these application it's better to use low level abstraction libraries such as jQuery etc.
- AngularJS application has modules and controllers.
- Modules defines the AngularJS application.
- Controllers control the AngularJS application.
- Modules and controllers are placed inside the javascript files.
§ You can add module and controller inside the same javascript file.
§ Or you can use multiple javascript files to put the module and controller
Advantages:
- Two-way Binding – When data in the model changes, the view reflects the change, and when data in the view changes, the model is updated as well. This happens immediately and automatically, which makes sure that the model and the view is updated at all times.
- Extensively uses Dependency Injection.
- Makes Testing easy be it is unit testing or end to end testing.
- MVC - Its really easy to develop application in a clean MVC way. You just need to divide your application in MVC components. AngularJS framework takes care of binding these components together.
- It provides many features which controls the application example: Directive, Filters etc.
- It frees you from following overheads:
- Registering Callbacks
- Manipulating DOM programatically - Most applications written with Angular never have to programmatically manipulate the DOM, although you can if you want to.
- Marshaling data to and from the UI - Marshaling data from the server to the internal object to an HTML form, modifying the form, validating the form, displaying validation errors, returning to the internal object and back to the server, creates a lot of boilerplate code. AngularJS eliminates almost all of these boilerplate code, leaving the code which shows the overall flow of application rather than all of the implementation details.
- Writing tons of initializing code just to get started. - You don't need to write a lot of plumbing code. It eliminates this, by bootstrapping the application easily using services which are auto injected in the application.
Important parts of the AngularJS
- We need only AngularJS javascript file to use angularJS (download it from angularjs.org)
- In html file add a reference to the downloaded javascript file. (To add the reference drag and drop the script from script location in Visual Studio)
- AngularJS libraries should always be placed in the <head> tag or the start of the <body> tag, this is because the angular functions for creating modules can only be compiled when the library has been loaded.
- In html file we need to have ng-app directive to be present somewhere.
- ng-app is the starting point of the angularjs application.
- When application runs, Angular framework first check for ng-app directive, when it is found, it bootstrap itself and starts to manage the section of the page.
- Angular is going to manage only that section of the page which is inside the section where ng-app attribute is being used or child section of the that section (which has ng-app attribute in it)
- ng-app should have value same as one of the exiting module.
- While creating the agularJS application the
intelligence are not available, to get that drag and drop the angularJS script
file in visualstudio the custom script file. Which adds the reference to
angularjs ///
<reference path=angular.min.js” />·
No comments:
Post a Comment