Day 95 Angular Client Management Practice

Previous blog we installed and set up angular. In this blog I’ll do more practice with angular and code an app. With things properly in the html index file, we move onto the app.js code.

The first thing I did in the app.js is create a module for our TestApp we created in the markup.

This is similar to modules.exports It’s a named thing that contains code that doesn’t collude with other code. The empty array usually would a list of modules that are dependencies. It’s empty since it’s a simple app.

Then I made the TestApp find modules and do other things like .controller.

This new code adds a controller of this name, to this module, to this app, and executes this function. Then I called the controller function. It’ll be called by Angular itself.

Next I created a new message property to .this. Angular made a variable point to the same object that this variable here in app.js. In the previous blog in the HTML body ng-controller element. VM(view model) is a model or the data and properties methods that I want for this particular screen is going to be made available to the same object. So Angular will attach message inside HTML.

For the Angular message to reach inside of HTML message I created double set of curly braces with vm.message.

The process in which angular got access to the HTML element is possible because of Node processes the HTML string to the browser. Then once the browser has this HTML it processes all of the JavaScript and sees the attributes in the DOM. It’s going to find those same things in the JavaScript code where Angular is expecting them to be set up. Then it’ll see this property on the object and it’s going to see these curly braces in the DOM and it will know that’s means replace this with the value that is actually on the variable.

Leave a Reply

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

Up ↑

%d bloggers like this: