mahuntington
/
angularjsnotes
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
Branches Tags
${ item.name }
Create tag ${ searchTerm }
Create branch ${ searchTerm }
from 'master'
${ noResults }
angularjsnotes/Day 1/intermediate_angular/1. ANGULAR.md

7.2 KiB
Raw Permalink Blame History

AngularJS - basics

Lesson Objectives

  1. Describe Single Page Apps and Why They're Great
  2. Describe what Angular.js does for us
  3. Describe two way data binding
  4. Set up Angular
  5. Explain Directive
  6. Describe Applications
  7. Describe Controllers
  8. 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

<!DOCTYPE html>
<html>
	<head>
		<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.min.js"></script>
	</head>
	<body>
	</body>
</html>

Explain Directive

  1. HTML has pre-defined attributes on tags like href, src, class
  2. You can come up with your own attributes as well: <div matt="awesome"></div>
  3. 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 <html>
  2. const app = angular.module('MyApp', []);
    • creates our application, which can hold many Controllers

file: index.html

<!DOCTYPE html>
<html ng-app="MyApp">
	<head>
		<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.min.js"></script>
		<script src="app.js"></script><!-- add reference to controller js file -->
	</head>
	<body>
	</body>
</html>

file: app.js

const app = angular.module('MyApp', []);

Describe Controllers

  1. Controllers control a certain area of the page
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

<!DOCTYPE html>
<html ng-app="MyApp">
	<head>
		<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.min.js"></script>
		<script src="app.js" charset="utf-8"></script>
	</head>
	<body ng-controller="MyController as ctrl">
	</body>
</html>

file:app.js

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
  2. {{}}
    • same as ng-bind, but not an attribute
  3. 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
  4. ng-repeat
    • <li ng-repeat="item in ctrl.items">{{item}}</li>
    • 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"
  5. ng-if
    • ng-if="ctrl.divExists"
    • binds the existence of an element to the result of an expression
  6. ng-show/hide
    • like ng-if, but it hides it, not removes it from the DOM
  7. src
    • <img src="{{ctrl.imgsrc}}" />
    • sets the src of an img to the result of an expression

file:index.html

<!DOCTYPE html>
<html ng-app="MyApp">
	<head>
		<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.min.js"></script>
		<script src="app.js" charset="utf-8"></script>
	</head>
	<body ng-controller="MyController as ctrl">
		<div ng-bind="ctrl.hello"></div><br/>
		{{ctrl.hello}}
		<section ng-class="(ctrl.isActive)?'active':''"></section>
		<ul>
			<li ng-repeat="item in ctrl.items">{{$index}}: {{item}}</li>
		</ul>
		<div ng-if="ctrl.divExists">Remove Me</div>
		<div ng-hide="ctrl.hideDiv">Hide Me</div>
		<div ng-show="ctrl.showDiv">Show Me</div>
		<img src="{{ctrl.imgSrc}}" />
	</body>
</html>

file: app.js

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
    • <input ng-model="ctrl.tab"/>
    • binds ctrl.tab's value to whatever is the value of the input
  2. ng-click
    • <button ng-click="ctrl.tab = 4">Click Me</button>
    • executes code when an element is clicked
  3. ng-submit
    • executes code when form is submitted

file: index.html

<!DOCTYPE html>
<html ng-app="MyApp">
	<head>
		<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.min.js"></script>
		<script src="app.js" charset="utf-8"></script>
	</head>
	<body ng-controller="MyController as ctrl">
		{{ctrl.someProperty}}
		<form ng-submit="ctrl.handleSubmit()">
			Change the property's value: <input type="text" ng-model="ctrl.someProperty"/><br/>
			<input type="submit" value="Submit The Form"/>
		</form>
		<div ng-click="ctrl.handleClick()">Click me</div>
	</body>
</html>

file: app.js

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');
	}
}]);