AngularJs provides lots of functionality that we can integrate with our code. It has template, model, controller, services, directive, etc. By using which we can increase our code’s scalability, productivity, efficiency. Angular’s data binding and dependency injection eliminate much of the code you would otherwise have to write.
Today, we’ll learn how to start with angularJS, so to start, first of all we’ll install/add it to our web page.
Both the ways are there, using cdn (content delivery network) and by downloading local copy. On should prefer cdn over local copy because cdn gives update version and for local copy, developer has to manage it.
Basic binding in angularJS
There are some directive which we use to binding with any element of html as below screenshot.
ng-app – It is used to auto initialize the application whenever the page is loaded.
ng-model – It is used to bind the html element’s value to the application data.
If you write the above code then you’ll get a text box as below screenshot and and whatever you’ll write in text box will automatically take place below the text box.
Creating your own application with angular: To create an application, One has to create a module as below screenshot.
The next step is creating controllers, so to create controllers for this specific application/module, we’ll create controller within this module’s object as below.
So by this controller demoController could be used only within the application that is initialized by demoModule only else it will fire an error. Here “$scope” is the variable that defines the scope of this controller, in other language it is same as javascript’s “this”.
After creating module and controller, we’ll see how it will be used.
Here “ng-app” is used to initialize this particular html element by “demoModule” module.
There is a directive called “ng-controller”, it is used to the call the controller of module by which this html element is initialized as below html element “div” is initialized by demoModule module, then only controllers that demoModule contains, could be used.
If the whole code is combined and run, then it prints something like below screenshot.
2 comments