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.
238 lines
7.2 KiB
238 lines
7.2 KiB
# 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
|
|
<!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`
|
|
1. You can come up with your own attributes as well: `<div matt="awesome"></div>`
|
|
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 `<html>`
|
|
1. `const app = angular.module('MyApp', []);`
|
|
- creates our application, which can hold many Controllers
|
|
|
|
file: index.html
|
|
```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
|
|
```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
|
|
<!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
|
|
|
|
```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
|
|
- `<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"`
|
|
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
|
|
- `<img src="{{ctrl.imgsrc}}" />`
|
|
- sets the src of an img to the result of an expression
|
|
|
|
file:index.html
|
|
|
|
```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
|
|
```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
|
|
- `<input ng-model="ctrl.tab"/>`
|
|
- binds ctrl.tab's value to whatever is the value of the input
|
|
1. ng-click
|
|
- `<button ng-click="ctrl.tab = 4">Click Me</button>`
|
|
- executes code when an element is clicked
|
|
1. ng-submit
|
|
- executes code when form is submitted
|
|
|
|
file: index.html
|
|
|
|
```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
|
|
|
|
```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');
|
|
}
|
|
}]);
|
|
```
|