I started my career by developing Rich Internet Applications using Adobe Flex. Flex is an extremely amazing language in terms of bringing modularity to the code extending the object-oriented concepts but unfortunately, the popularity of flex got reduced due to a lot of reasons which I don’t want to talk about in this blog. So being a UI developer my next best thing was to learn HTML5, CSS, and JS which sounded really confusing to me as there was no defined approach for writing js variables, methods, accessing and manipulating DOM whenever and wherever sounded little too much for my background but somehow I mastered the HTML, CSS, and JS as those were the fundamentals of any JS Frameworks. When I heard about Angular, I was really happy that it brings a lot of features, which sounded like a more refined way of developing UI applications.
I deep-dived into Angular and realized that this framework is most suited for people who spent most of their programming live in languages like JAVA, .net, C++, AS3, etc., and who would like to develop more reusable components in a more modular way rather than writing continuous scripts and manipulating DOM. So in this series of tutorials, I am going to try my level best to explain what I have understood over a period of time in a simpler way.
To begin with, let’s start creating a project in a structure, which will help developers to isolate the code in different boxes. I generally use Brackets as my IDE and please feel free to use any IDE of your choice.
I generally prefer the above structure comfortable to group the files with index.html being the root HTML file, which will bootstrap angular. So before diving into bootstrapping angular I would like to talk a few things about inbuilt directives of angular. Directives are the reusable components, which will be added in the HTML markup just like the native HTML tags. There are two types of directives inbuilt and custom directives. Inbuilt directives in angular are generally prefixed with ng – <SOMETHING>, this something can be an app, click, repeat, model, etc. As I said there are a plethora of inbuilt directives in angular which will suffice most of our basic needs but still we can create custom directives too which will talk in detail in the later tutorials. The reason I talked about directives first is that to bootstrap angular we will be using one of the inbuilt directives called ng-app.
Keeping aside these directives, there are some basic concepts, which need to be understood before getting into code level. Here I am going to talk about some basics, which I think are required even to start a basic coding in angular. If you are familiar with the below concepts please feel free to skip this part and move on to bootstrapping angular.
Controllers: These were attached to DOM elements using an inbuilt directive called “ng-controller”. Controllers will have access to $scope is injected in the controller. Technically Controllers were used to changing the data in the $scope bounded to that controller which in turn affects the view (HTML) automatically. Each controller will be defined with a name and attached to the HTML element in the DOM. We will see about controllers in a more detailed way in later chapters.
Templates: Angular gives a clear separation of concerns by providing a way to have individual HTML templates. These HTML templates do not need to be a full HTML file with HTML, body tags because these are the partial templates that will be included in the main HTML file by angular js.
- Download Angular from here and place the minified file inside the lib folder.
- Open index.html and type the below
- Now if you run the application, the console will have an error called $injector:modulerr which is nothing but the inbuilt directive ng-app is not able to identify the angular module “appViewer”.
- To resolve this error, appViewer module needs to be initialized, and to do that the ideal way is to create a js file. Let’s have a meaningful name for the js file and call it as mainController for now and right now it is not doing any job of controller but soon it will.
- Create mainController.js under js/controller folder which we have created previously and write the below code inside it.
- Now link the maincontroller.js in the index.html like below
Now we have successfully bootstrapped Angular in our application.
You will still see the blank page when you run index.html but this time no error in console because we have created an angular module and provided the name “appViewer” and the same is linked to ng-app.
Good to know:
When the DOM gets loaded angular will look for ngApp directive in the html tags and the moment it finds the ngApp it will load its associated module in our case it loads “appViewer” module.