AngularFundamentalsControllersMarkup

Controllers & Markup

Download any Angular version from here. Current stable release of April 2017 is 1.6.4. Small applications should use a single module.

install from root app node where package.json resides

npm install

individual install, creates a node_modules directory

npm install express@4.13.0 body-parser@1.13.1

/scripts/web-server.js

var express = require('express');
var path = require('path');
var app = express();
var rootPath = path.normalize(__dirname+'/../');
app.use (express.static(rootPath+'/app'));
app.listen(8080);

from the bash shell, run node, serve a static file

server.sh

iis, physical path: $PathToDemo/app, site name: DemoApp, port: 8080. When started, uris http://localhost:8080/img/profile.jpg and http://localhost:8080/img/angularjs-logo.png should display images.

Scope

We can't talk about controllers without talking about scope. So let's look at the relationship between controllers and scope. A controller's primary responsibility is to create a scope object. A scope object is how we communicate with the view, and the scope is able to communicate with a few through a two-way communication. The view can bind the properties and results of functions on the scope, and events on the view can call methods on a scope. Data passes in this way from the controller to the scope, and from the scope back and forth to the view. The scope is used to expose the model to the view, but the scope is not the model. The model is the data that is put into the scope. If we want to modify the model, we can either use methods that are on the scope to modify the model, perhaps in response to events fired by the view, or using two-way bindings we can modify the model. In this way users through the view can make modifications to the model, or in other words can make modifications to the data. Let's review with a quiz. What is the primary responsibility of the controller? Controllers primary responsibility is to create the scope. Is the scope the model? No, the scope is not the model. The scope merely contains the model. Can the view bind to functions on the scope? Yes, you can bind your view to both functions and properties on your scope object.

Controllers

EventDetails.html

1. Add inside head css for bootstrap and app

<link rel="stylesheet" href="/css/bootstrap.min.css" />
<link rel="stylesheet" href="/css/app.css" />

2. Add a <div class="container"> directly to body
3. Add the event controller as <div ng-controller="EventController">
4. Add all necessary scripts to the end of body including <script src="/js/controllers/EventController.js"></script>
5. Angular ref <script src="/lib/angular/angular.js"></script>
6. img ng-src, li ng-repeat="s in main.sessions", ng-click

EventController.js

1. inside {{ }} evaluation. double curly brace
2. $scope.upVoteSession = function(session) { session.upVoteCount++; };

Built-in Directives

According to the Angular documentation, directives are a way to teach HTML new tricks. Essentially directives get HTML a new functionality. As Angular parses through your HTML, it will look for directives and then take action based on what it finds. So in the case of NG click, whenever it encounters an NG click, it will register a click handler event on that DOM object. If you remember, that was an attribute of a tag. There are actually four ways to specify directives with Angular. The first one is actually is the tag itself. For example, the NG form directive is a tag, <ng-form />. The other way is the way that we've seen before with NG click where the directive is an attribute of a tag, <div ng-form />. And the third way that we can write directives is as a class, <div class="ng-form" />. Now not all directives can be written out as tags, attributes and as classes. Often times a particular directive could only be written out in one or two of these forms. The fourth way to write a directive is inside of an HTML comment.

Instead of using double curly braces, bind to property name(attribute value) using ng-bind attribute, or <h2 ng-bind-template="{{event.name}} {{event.date}}"></h2>

Event directives

ng-model required if ng-change present <input type="checkbox" ng-change="handleChange()" ng-model="property">

In the controller, add $scope.buttonDisabled = true; and in the view <button class="btn" ng-disabled="buttonDisabled">Disabled</button>

Filters

{{ expression | filter }} built-in: uppercase, lowercase, for instance <h3>{{event.name | uppercase}}</h3> number & currency <div>{{3.14132453 | number:2}}</div> date: <div>{{jsdate | date:'mediumDate'}}</div>

<li ng-repeat "session in event.sessions | orderBy:sortorder | limitTo:2 | filter:query">

two-way binding ng-model works with input, select and textarea. <input type="text" ng-model="object.container.property" />. A property that does not exist will be created automatically on the scope.

Validation

The required attribute on a html element bound with ng-model. You can validate against a regular expression with ng-pattern.

<<