We want the user to be able to take an action, and cause something to happen on the page. Users will enter text into input boxes, pick items from lists and click buttons. These types of user actions result in a flow of data from an element to a component. Listening for certain events such as keystrokes, mouse movements, and clicks are done with Angular event binding.…

Data-binding in AngularJS is quite similar to other popular libraries like React and Vue. It is the automatic synchronization of data between the model and view components. With this approach, the developer treats the model as the single-source-of-truth in the application. The view will always act as a projection of the model. This way, if the model changes, the view updates automatically, and vice versa. In this tutorial, we’ll see a few examples of how data binding in Angular works.…

Angular performs it’s magic by the interaction of a component class instance and its user-facing template. The template is an important part of an Angular component, and in fact is absolutely necessary in order for the component to work. You can not omit the template file or definition. In Angular, the component acts as the controller or viewmodel, while the template represents the view itself. Additionally, Angular applications are styled with standard CSS.…

It turns out that when building your own new components in Angular, you can complete the process entirely by hand like we did in the Angular Component Tutorial. That was good for learning the details of what goes in to an Angular Component. Well we all like automation, and you can actually build a new Angular command automatically using the Angular CLI! That sounds awesome as less typing out code is a bonus in my book.…

In the prior tutorial, we got a nice introduction to Angular JS and even used the Angular command line interface to get a project up and running. In this tutorial, we’ll look a little more closely at the code execution of an Angular application and the files that make up components in Angular. First we’ll add Bootstrap as a dependency to our project so that we can get some quick and easy styling right away.…