 Welcome to AngularJS. In this learning activity, you'll explore the AngularJS framework and learn how it's used to architect and organize code when building web applications. Back in the day, programmers used many different approaches to build rich client-side web applications. These approaches ranged from writing all of the code from scratch to relying on popular libraries like jQuery. More often than not, this resulted in messy and unorganized code. AngularJS brings order to the old-school chaos by using specific building blocks, each designed for a particular aspect of creating an application. Overall, AngularJS is a much more elegant and civilized way of building JavaScript applications. Regardless of the size and the number of pages in your application, your browser is only going to load a single page. And the content on that page can change. AngularJS handles content changes quickly and efficiently. AngularJS is a client-side technology written entirely in JavaScript. It works with long-established web technologies including HTML, CSS, and JavaScript. The framework architecture is the model-view controller, MVC. Developing applications using MVC enables you to take advantage of Angular's features and avoid having to code all the details of everything you want to accomplish on your page. In addition, MVC separates the application logic from the data modules and the views. In this framework, model is the data. This is the information from internal data structures, external JSON documents, or even databases. Views are how the data is displayed to the user, which is usually done with a template. And finally, controllers are the glue that ties the model, or data, to the view, or template. Controllers are also written in JavaScript. Some core features of AngularJS include directives, which are constructs that teach the browser the new HTML syntax created by AngularJS. This allows you to add functionality to a page by creating custom HTML elements and attributes. Additionally, it declares directives by placing a function within the HTML as an element, attribute, class, or comment. AngularJS also uses two-way data binding, which is an automatic synchronization of data between model and view components. Changes made to the model are immediately reflected in the view without manipulating the DOM. In addition, changes made to the view are reflected in the model. Filters format the view of an expression to display it correctly for the user. Finally, AngularJS uses modules or containers for different parts of an app, including controllers, services, filters, and directives, which configure the injector. Advanced features include using templates to change the page data. These are integrated into the HTML and bind the data directly to the template. So pulling in the data or interacting with the elements lets you populate your HTML. AngularJS also expands functionality by updating the HTML, whereas jQuery and JS just manipulate the DOM. Finally, AngularJS provides for easier external data manipulation by including Ajax functionality. With an understanding of what AngularJS is and how it works, let's take a closer look at two of its main features, directives and templates. AngularJS uses directives within HTML to run a piece of JavaScript code by adding a directive to an opening tag. For example, the directive ngController uses ng for Angular. Let's look at an example of writing the directive and what the JavaScript code looks like when you run that directive. The Angular directive ngController is added to the HTML body tag as an attribute that runs the function named messageController in the JavaScript file. The ngController in the HTML body tag activates this messageController and the code within the messageController function executes. Notice that when a directive is written in a document, we type it as ngController as opposed to writing it in code, where we use ng-controller. To go any further, we need to take a brief look at how templates and directives work together within the HTML to display data to the user. Templates are a combination of HTML, CSS, and Angular directives. The Angular directives within the HTML and possibly within CSS render a dynamic view of the information from the model and controller. Templates can be a portion of code within an entire HTML file, such as an index.html file, or they can also be a partial, which is a portion of HTML code in an external file that will be dynamically inserted into the whole HTML file. Let's look at an example of a template. In this example, the ngApp directive has been added to the HTML tag to initialize the Angular app, letting the JavaScript code know to use the main app module. ngApp signifies the root of the Angular app. The Angular template in this example is within the rectangle area. The ngController messageController has been given an alias of mc. The scope of the messageController is the div element it's associated with and all its nested elements. mc.message is an example of an Angular expression. This is where the information from the model and controller renders. In addition to templates, AngularJS provides built-in directives that allows you to create your own directives. Let's look at a few built-in directives to see how they work. Returning to the expression mc.message from our last example, we see a minor problem with writing this expression using the curly brackets. When the page renders in the browser, we'll get a flash of the expression code mc.message in the browser window. To get around this, we'll use the built-in ngBind directive. Our template code is written as this. Now let's check out the ngModel directive. This binds the view to the model, which allows the user to enter content into a text box and dynamically update the model and display the input in the view. This is referred to as a two-way data binding. In this example, ngModel has been added to the input tag and binds with the this.name in the message controller function. As data is updated in the model, it displays in the expression mc.name. The last built-in directive we'll look at is the ngRepeat. This extends iterating functionality to the HTML element. Let's say you have a list of data you want to dynamically display on the web page. In the opening HTML item list tag, li, you can add the ngRepeat, such as ngRepeat equals character in characters. You then add the content and expressions to set up the template between the opening and closing li tags. When ngRepeat executes, it runs through the collection of data and instantiates the template for each item in the collection. In this example, ngRepeat equals character in mc.characters is similar to JavaScript for in loop that is for character in characters loop. This.characters is the collection of data coded in JSON that ngRepeat accesses. Please note that only a sample of the data in the collection is displaying in this image. ngRepeat loops through all of the items in the character's data source. Now that we have some understanding of built-in directives and how they're coded within the template, let's look at a little program to tie this all together. This program accepts search words based on the name from the user and returns the search results. In addition to the AngularJS we have already discussed, it also uses an Angular filter. Let's take a look at this small program. ngApp is the root of the Angular app. Since it's in the opening HTML tag, it applies to all elements. ngController has been applied to the first opening div tag. The scope of the message controller spans all elements contained within this div. MessageController has been given in alias using the as keyword. This allows us to use mc as a shortcut when referring to the message controller. ngRepeat has been added to the opening li tag, indicating what data source it will target and loop through. An Angular filter has been added to ngRepeat to allow search on the name field. The li element has been coded as a template containing content and Angular expressions. An input was added with ng-model to allow input and link to name in the data for the query. This small program demonstrated the use of a few Angular built-in directives and templates. In this learning activity you were introduced to AngularJS. You explored its framework and learn how it's used to architect and organize code when building web applications. You could also see in the real world code examples how AngularJS is a muchman's. You could also see its way of building JavaScript applications. You've completed AngularJS.