AngularJS basics for absolute beginners
0
/
2139
Intro:- Angularjs Basics for absoloute beginners
What is angularJS ?
Angularjs is a javascript framework designed for developing dynamic web apps. It follows MVC architecture and allows HTML to be used as a template language giving it more power. It also allows HTML to be used dynamically and in a much structured way rather than it’s stereotyped static usage which has been prevalent for ages. AngularJS’s data binding, directives (commands) and dependency injection eliminate much of the extra code that you would otherwise have to write. This results in rapid application development with less code. It’s designed and maintained by Google. AngularJS is primarily used for developing single page applications. This tutorial assumes that the reader has basic understanding of HTML/javascript and jquery. Features of angularjs: MVC architecture:– MVC stands for model view controller wherein view represents all the HTML markup/s of the web application, model holds all the data that view has to deal with and controller holds all the business logic of the various HTML views and also acts as a glue between model and view. Data binding:- Data binding refers to automatic synchronization of data between model and view components. AngularJS has 2 way data binding between model and views which means if there is any change in the model, the view will be notified about it and vice versa. It does so through it’s ng-model and ng-bind directives. Scope:- Scope can be called as an agent of the controller which acts as glue between model and view and holds all the data that refer to the HTML view model. RootScope:- RootScope is the parent of all the scopes and as the name suggests, sits on top of all the scopes of an angularjs app and it has access to all the scopes and thus all controllers of the app. Controller:- This holds all the business logic of an HTML view. Services:- Angularjs has a set of built in services which are singleton instances of the application. One such example of built-in service is $http which is used to make ajax calls/XMLHttpRequests. One can also write their custom service. Custom services are essentially used to share data between controllers. The same can also be achieved through factories. Predominantly services and factories both comprise of functions/APIs. Factories:- Factories are services with the only difference being how they return data. While declaring a service as an injectable argument to an angular module, you will be presented with an instance of the function that the service comprises of. On the other hand while declaring a factory, you will be presented with the data returned by the function of the factory. Factories are declared using module.factory and services by module.service. Following code snippet will explain the structural differences between the two. Filters:- These are used to manipulate an array of data based on certain criteria and return a new array with the specified criteria. Directives:- Directives are markers on the HTML DOM elements and are used in the same way as various attributes are used on the HTML tags. The DOM elements can be elements, attributes, css, HTML comments etc. They can be used to create custom HTML tags that may serve as new custom widgets. AngularJS has a set of standard built in directives like ngBind, ngModel,ngInit,ngController,ngApp and so on. One can create their own custom directives with the name they like. The directive will serve a specific purpose as per the need. Templates:- Templates can be single markup (HTML file) which correspond to a view/page of the application or can be hybrid (combination of multiple views within one view) also known as partials. Routing:- It’s a concept of switching between angularjs views/states on occurrence of an event on some DOM element. Deep linking:- This allows saving state of a particular URL so that it can be bookmarked and then restored to the same state at a later stage from the URL. It’s similar to object serialization. Dependency injection:- AngularJS has a built-in dependency injection subsystem which helps app development easier, less complex and robust.AngularJS Components
ng-app : This directive links the angularjs app to the HTML where its defined. ng-controller: This directive links controller to HTML where its defined. ng-model: This directive binds the values of AngularJS application data to HTML input controls. ng-bind: This directive binds the values of AngularJS application data to HTML tags. Below is a small angularjs app which showcases usage of directives ng-app, ng-controller,ng-init,ng-model,ng-bind and $scope. angularjs library (js) file is to be included in any angular app and this is done via a google CDN as seen in the app above.- myApp is the name given to this app and its tied to the div via the ng-app directive. Same applies for myController which holds the business logic and is tied to the div via the ng-controller directive.
- Model name is used to hold the value of the name in the input text field and it can be accessed in the controller through the $scope object as seen. ng-model creates a 2 way binding, thus if you change the name, it will show up in the html.
- Paragraph is added and its inner HTML is provided by the ng-init attribute and is tied to the <p> tag using ng-bind attribute.
Comments
