Yesterday’s blog we learned how Angular framework manipulated the DOM, so let’s actually use it. First of all to install angular it is downloadable on their website Angularjs.org. In the course we downloaded it as a CDN, which is downloaded it from another server. This is beneficial so that applications work faster since it’ll be from another server and not on our app.

After installing angular from their website the next step is to add it into a file. Since Angular is a JavaScript framework it is goes inside of index.ejs file in a script tag.

Angular is not being processed by Node in anyway. The HTTP request to the page is processed by Node and the response Node provided a sting that the browser then interprets. When the browser loads the HTML string and sees the script tag it knows to download that Angular JavaScript file.

At this point after the JavaScript is processed, the Angular framework is going to deal with the things that the browser makes available to the JavaScript engine. Things to manipulate the DOM, the tree structure that the HTML is processed into.

Angular makes it easier to maintain and manipulate the DOM through directives. You create directives with ng-(name), in my case the directive name was ng-app. A directive is generally either an attribute or a value of an attribute sitting on an HTML element. When HTML is processed these directives(special attributes) cause Angular to do work. When the directive name is found in the Angular app that references this name(app) well know we are looking at that slice of HTML.

After creating ng-app directive we created an ng-controller. What this does is we can actually control different parts within the HTML of the app. So this controller means that the code inside this controller in the JavaScript will manage what goes on between the <body> HTML element. It was set as vm to deal with the data and the different methods that will be made available via this controller.

Now to add in our Angular code. To do it we need to reference our own file. The script source has to equal the folder used for static content and that we actually respond to HTTP requests. In our project the folder code was “/assets/js/app.js/“.

Leave a comment

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

%d bloggers like this: