It took me sometime to make me comfortable in AngularJS. There are a lot of tutorials, discussions and videos out there about AngularJS. I would suggest, go through them and go through as many as you can, before jumping into code with this framework. We will be looking at the very basics of the framework here and for version 1.3 and above, of the framework.
You must heard about MVC or Model-View-Controller architecture and AngularJS. While thats true, lets keep that for a little late.
First of all, just remember that $scope is model object and sometimes referred to as ViewModel. Then there are Views, which are either HTML tags or full html files. And then Controllers, which are javascript files. At this point always remember that AngularJS revolves arround these View and Controller. The data this View displays is the same as the data the Controller modifies and is available through $scope. No matter what, $scope remains in the middle as thisView <---$scope---> Controller
Now, since AngularJS already uses 2-way data binding any changes to data or $scope in View or Controller is reflected by each other.
An AngularJS application begins with a module named ng-app and this ng-app is generally only one. So what is a module ? Module is kind of self contained small applications inside a big application. The special module ng-app is the only exception as its the big application and everything else in AngularJS world happens inside it. All other modules generally go inside ng-view, have a look at this html page for the reference.In terms of AngularJS, a module is a combination of a View-$scope-Controller. Everytime you need to load this module, the View gets loaded in the ng-view and its Controller gets initialised along with the $scope. All these mapping are written in a Route, which maps View with Controller, take a look at this. Route is a separate module as of AngularJS version 1.3. So, one need to include the JS file and the dependency. A quick reference of an AngularJS application looks as below
- HTML page
- ng-app (root module)
- ng-view (sub modules load here)
- first JS file for Route and other things
- Route maps URL paths with sub-views and their controllers
- sub-views(HTML partials or pages) are loaded inside the ng-view and initialied with their controllers
So far we are good. The next thing is, we can still make it more modularised. AngularJS allows, something called as Directives, you may think of it as components. Inside a Module, we can write our custom directives, which are custom HTML tags along with its controller. But always remember, Directives are part of View. So the $scope is also available to them. Now, there are different pre-built modules with AngularJS for different job in hand, like $http is for interacting with web services.
Refer to the project here, which I have created to better understand the basic of an AngularJS application. Always remember, anything in AngularJS that we write falls upon either View or Controller and there is always $scope available to both of these.
I would love to listen your inputs on this, please leave a comment for discussion.
Happy Coding.