AngularJS is an extremely powerful JavaScript library / framework used to build dynamic web applications. Angular utilizes HTML as its template language extended by “custom” angular syntax. Unlike other JavaScript frameworks, Angular uses a two way data binding system between the model and the view. The Model is considered the “Single Source of Truth” meaning changes to the view automatically update your model and changes to the model automatically update the view.
Angular is broken out into several main concepts. I won’t spend time breaking them all down as you can find a full list here: https://docs.angularjs.org/guide/concepts however here are what I consider the most important elements you need to know about to get started with Angular.
Model: Data shown to the user.
View: What the user sees.
Controller: Business logic behind views
Data Binding: Syncing data between the model and the view.
Module: A way to contain specific functionality within an application
A simple to-do list application may contain an html file and a JavaScript file. The HTML file would be considered your view. Your view would contain the basic HTML markup you would write for any other application including your document type, head, and body tags. You would then use the ng-app directive to specify the application name. You would wrap a container (div tag) around the functional part of your application. Your container should contain the ng-controller directive. This initiates the binding process between markup inside your view and your controller. We would then use the ng-repeat directive to loop the results of our model.
HTML
JavaScript
As you can see from the above screen shots we are simply looping over items in the todoList model. Because of the way Angular binds data manipulating the todos object will directly alter the view by appending more items. For instance, we could have a form field in our view and on submit append to the todos model.
HTML
JavaScript
As you can see in the above example we have added in the form element with the ng-submit directive that is calling the addTodo function in our TodoListController. On our controller, we have added the addTodo function that simply pushes the text into our todos model.
You can find a more detailed to-do list example at https://angularjs.org along with a bunch of other information. The one thing we should take away from this is that Angular allows us to build well-structured front end applications with a minimal amount of programing. No need to mess with appending to the DOM or dynamically rendering HTML with JavaScript as Angular takes care of all the heavy lifting for us.