Menu Search Sign up

AngularJS

Tutorial

https://docs.angularjs.org/tutorial/step_00 

Reference

https://docs.angularjs.org/api 

http://www.w3schools.com/angular/ 

https://docs.angularjs.org/misc/downloading (download)

ng-app and module

Defines an application

<div ng-app="myApp">...</div>
<script>
  var app = angular.module("myApp", []);
</script>

ng-bind and ng-model

ng-bind: model -> view (alternative {{...}})
ng-model: view -> model (input, select, textarea)

Example 1:

<div ng-app="">
<p>Name: <input type="text" ng-model="name"></p>
<p ng-bind="name"></p>
</div>

Example 2:

<div ng-app="" >

First Name: <input type="text" ng-model="firstName"><br>
Last Name: <input type="text" ng-model="lastName"><br>
<br><p>
Full Name: {{firstName}} {{lastName}}
</P>
</div>

Example 3:

<div ng-app="myApp" ng-controller="myCtrl">
    Name: <input ng-model="name">
</div>
<p ng-bind="name"></p>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.name = "John Doe";
});
</script>

ng-controller

ng-controller: defines application controller
1 page, 1 module (1 ng-app), multiple controllers (ng-controller)

Example 1:

<div ng-app="myApp" ng-controller="myCtrl">
    Name: <input ng-model="name">
</div>
<p ng-bind="name"></p>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.name = "John Doe";
});
</script>

Example 2:
var app = angular.module('app', []);

app.controller('TextController', function ($scope) {
//Controller Code Here
});

app.controller('ItemController', function ($scope) {
//Controller Code Here
});

Example 3:

If you want to avoid using ng-app, module, and controller, you need to specify ng-app="" in your page:

<div ng-app="" >

First Name: <input type="text" ng-model="firstName"><br>
Last Name: <input type="text" ng-model="lastName"><br>
<br><p>
Full Name: {{firstName}} {{lastName}}
</P>
</div>

$scope

Variables in the controller that you want the "view" (html page) to see should be prefixed with $scope. $scope is the "model" in the Angular MVC.

<div ng-app="myApp" ng-controller="myCtrl">
<input ng-model="name">
<h1>My name is {{name}}</h1>
</div>

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.name = "John Doe";
});
</script>

You can also call a function prefixed with $scope in Angular controller:

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

<div ng-app="myApp" ng-controller="myCtrl">

First Name: <input type="text" ng-model="firstName"><br>
Last Name: <input type="text" ng-model="lastName"><br>
<br>
Full Name: {{firstName}} has {{totalCart()}}

</div>

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.firstName = "John";
    $scope.lastName = "Doe";
    $scope.totalCart = function(){
    var total ='this is a test'; 
    return total;
};
});
</script>

</body>
</html>

Angular filters

use | to start, and separate parameters with :

Here is an example of using a custom-designed filter (cssStyleIfEqual, which takes 1+3 parameters) and a built-in filter (orderBy, which takes 1+1 parameter):

<div class="list-borderless">
<a class="item item-avatar w3-col port12 land6" ng-repeat="icon in icons | orderBy:orderProp" href="#/questions/{{icon.id}}" ng-click="makeActive(icon.id)" >
<img ng-src="{{icon.url}}" alt="{{icon.title}}" class="rounded-corner">
<h2 style="color: {{icon.id | cssStyleIfEqual :selectedId : 'red' : 'green'}};">{{icon.title}}</h2>
<p>{{icon.title}}</p>
</a>
</div>

Here is an example of how to build custom filters: http://www.w3schools.com/angular/angular_filters.asp 

Angular services and how to custom-build services

http://www.w3schools.com/angular/angular_services.asp 

Angular ngRoute module

Here is an example of how to use different controllers in different templates that are routed with Angular ngroute.

It also contains example code to show you how to define filters & services in a module other than your current app's module, so that the filters and services you developed can be used in a ddifferent app.

https://drive.google.com/drive/folders/0B1J4I3FXWq84c2VKTnU2NkZ2VzQ 

Angular animation

http://www.w3schools.com/angular/angular_animations.asp 

Angular validation and how to custom-build validation

http://www.w3schools.com/angular/angular_validation.asp 

Angular events

http://www.w3schools.com/angular/angular_events.asp 

Angular includes

http://www.w3schools.com/angular/angular_includes.asp