# AngularJS - basics ## Lesson Objectives 1. Describe Single Page Apps and Why They're Great 1. Describe what Angular.js does for us 1. Describe two way data binding 1. Set up Angular 1. Explain Directive 1. Describe Applications 1. Describe Controllers 1. List common directives ## Describe Single Page Apps and Why They're Great - load one larger file for html/css/js which will run entire site - is faster than loading many smaller html/css/js files for each page - if application is rendered on client side, it cuts down on the work needed by the server - server can run faster because there is less traffic to it - most people's computers can handle running the JS required for a single page application ## Describe what Angular.js does for us - Allows us to structure our files in an MVC structure, so we'll have data, controllers, and html - this enforces a structure to our application that makes it easy to figure out where to make updates and keeps the code clean - Simplifies process of updating the HTML based on data - remember in the games for Unit 1, when the JS data changed, we had to manually tell the HTML to update as well - with Angular, HTML updates whenever the data updates (two way data binding) ## Describe two way data binding - Javascript Models are synchronized with HTML elements - When properties in the model get updated, so does the UI. - When UI elements get updated, the changes get propagated back to the model. - Ex: in connect four, could have an array of arrays (matrix). - When a value is changed in the matrix, the HTML automatically shows a token on the board with no further coding ## Set up Angular Add a script tag referencing the Angular library, just like when we used jQuery file:index.html ```html ``` ## Explain Directive 1. HTML has pre-defined attributes on tags like `href`, `src`, `class` 1. You can come up with your own attributes as well: `
` 1. Angular uses its own custom directives to tell the HTML which data it is bound to - they all start with `ng-` ## Describe Applications 1. `ng-app="MyApp"` - our first directive, placed probably in `` 1. `const app = angular.module('MyApp', []);` - creates our application, which can hold many Controllers file: index.html ```html ``` file: app.js ```javascript const app = angular.module('MyApp', []); ``` ## Describe Controllers 1. Controllers control a certain area of the page ```javascript app.controller('MyController', [function(){ //constructor function called MyController this.hello = 'oh hai!'; }]); ``` 1. `ng-controller = "MyController as ctrl"` - instantiates MyController as an object with name `ctrl` - similar to `const ctrl = new MyController();` - can be placed on any element that is inside the element that has `ng-app` set - anything inside that element has access to anything on `ctrl` object file:index.html ```html ``` file:app.js ```javascript const app = angular.module('MyApp', []); app.controller('MyController', [function(){ //constructor function called MyController this.hello = 'oh hai!'; }]); ``` ## Common Directives ### reading values 1. ng-bind - binds the contents of the element to whatever is specified 1. {{}} - same as ng-bind, but not an attribute 1. ng-class - binds the class of an element to the result of an "expression" - an expression is just some code that gets evaluated - `(ctrl.isActive)?'active':''"` - if ctrl.isActive evaluates to true, the class of the element will be 'active' - `ng-class="{ active:ctrl.isActive }"` - a different way to write the same thing 1. ng-repeat - `
  • {{item}}
    • ` - loops through an array, creating duplicates of the element for each value in the array - can reference the current item, based on whatever value is given before `in` - use `{{$index}}` to get the index of the element in the array - ng-repeat doesn't like duplicate items in the array (`ng-repeat="element in [1,1,1]"`) - use `track by $index` to get around this - `ng-repeat="element in [1,1,1] track by $index"` 1. ng-if - `ng-if="ctrl.divExists"` - binds the existence of an element to the result of an expression 1. ng-show/hide - like ng-if, but it hides it, not removes it from the DOM 1. src - `` - sets the src of an img to the result of an expression file:index.html ```html

    {{ctrl.hello}}
    Remove Me
    Hide Me
    Show Me
    ``` file: app.js ```javascript const app = angular.module('MyApp', []); app.controller('MyController', [function(){ //constructor function called MyController this.hello = 'oh hai!'; this.isActive = true; this.items = ['apple', 'banana', 'pear']; this.divExists = false; this.hideDiv = true; this.showDiv = false; this.imgSrc = 'http://1.bp.blogspot.com/-CzqzzBV2tMk/TxBM3ar18MI/AAAAAAAAPm0/6faLPO9BM8w/s1600/i-can-has-cheezburger.jpg'; }]); ``` ### writing values 1. ng-model - `` - binds ctrl.tab's value to whatever is the value of the input 1. ng-click - `` - executes code when an element is clicked 1. ng-submit - executes code when form is submitted file: index.html ```html {{ctrl.someProperty}}
    Change the property's value:
    Click me
    ``` file: app.js ```javascript const app = angular.module('MyApp', []); app.controller('MyController', [function(){ //constructor function called MyController this.someProperty = 'foo'; this.handleSubmit = function(){ console.log('form submitted'); } this.handleClick = function(){ console.log('div clicked'); } }]); ```