Angular



Basic Two Way Data Binding
download angular
$ mkdir -p prj1/lib/angular
$ mv angular.js prj1/lib/angular
$ cd prj1
$ vim index.html    # in sublime just type !<tab> it will generate html code for you
<!DOCTYPE html>
<html lang="en" ng-app>
<head>
    <meta charset="UTF-8">
    <title>Angualar Demo</title>
    <script type="text/javascript" src="lib/angular/angular.min.js"></script>
</head>
<body>
    <input type="text" ng-model="name">
    {{name}}
</body>
</html>


ng-app is a directive, if has ="" tells Angular the code for whatever is inside the HTML tag, which in this case is our entire page, is going to be controlled by this new myApp module.
We usually put javascipt file sat teh end to make sure the structure of website is loaded before any javascript but for angular we have to put it at front
{{}} is a template

Controller
Add controller
$ mkdir js
$ vim js/controllers.js
myApp = angular.module('myApp',[]);

myApp.controller('MyController', function MyController($scope){
    $scope.author={
        'name':'mort',
        'title':'my angular course',
        'company':'ufl'
    }
});


$ vim index.html
<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
    <meta charset="UTF-8">
    <title>Angualar Demo</title>
    <script type="text/javascript" src="lib/angular/angular.min.js"></script>
    <script type="text/javascript" src="js/controllers.js"></script>
</head>
<body>
    <div ng-controller="MyController">
        <h1>{{author.name}}</h1>
        <p>{{author.title + ', '+author.company}}</p>
    </div>
</body>
</html>
we're going to create a variable and that variable is going to be called myApp. It's going to hold our modules. ( an Angular module). This module is going to have a name of myApp. In brackets put the dependencies for this application. It's a way to protect our application code and make sure that no other script on your website is going to interfere with our application. So this variable, myApp, is unique to our Angular project. Since our module is going to have our application code, we'll need to update our ng app directive.

Anything that we've placed in the scope variable will be available inside this controller.


For loop 

<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
    <meta charset="UTF-8">
    <title>Angualar Demo</title>
    <script type="text/javascript" src="lib/angular/angular.min.js"></script>
    <script type="text/javascript" src="js/controllers.js"></script>
    <link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
    <div class="main" ng-controller="MyController">
        <ul class="artistlist">
            <li class="artist cf" ng-repeat="item in artists">
                <img ng-src="images/{{item.shortname}}_tn.jpg" alt="Photo of {{item.name}}"/>
                <div class="info">
                    <h2>{{item.name}}</h2>
                    <h3>{{item.reknown}}</h3>
                </div>
            </li>
        </ul>
    </div>
</body>
</html>

in the controller we just artists to a list of arists

ng-src. All it does is prevents any images from loading until after the Angular library has finished loading up.

Ajax
instesd of xhr or ajax angular uses services e.g. $http
http://stackoverflow.com/questions/3102819/disable-same-origin-policy-in-chrome on a mac         $ open -a Google\ Chrome --args --disable-web-security


var myApp = angular.module('myApp',[]);

myApp.controller('MyController', ['$scope', '$http', function($scope, $http){    // the order of scope then http is important
    $http.get('js/data.json').success(function(data){
        $scope.artists=data;
        $scope.artistOrder = 'name';     // initialize some form elements in controller
    });
}]
);

To avoid CORS:



Manipulate lists at client-side
filters |
      <h2>{{item.name | uppercase }}</h2>        // convert to upper case
            <li class="artist cf" ng-repeat="item in artists | limitTo: 5">

Search
        <input ng-model="query" placeholder="Search for artists">
        <ul>
            <li ng-repeat="item in artists | filter: query">                // client-side filtering of text
Sort

                <select ng-model="artistOrder">
                    <option value="Name">Name</option>
                    <option value="reknown">Reknown</option>
                </select>

        <ul>
            <li ng-repeat="item in artists | filter: query | orderBy: artistOrder">

subfilter
            <label> ascending
                <input type="radio" ng-model="direction" name="direction" checked>
            </label>
            <label> descending
                <input type="radio" ng-model="direction" name="direction" value="reverse">
            </label>

            <li class="artist cf" ng-repeat="item in artists | filter: query | orderBy: artistOrder:direction">

Single Page Application

$ mkdir single_page_app
$ mkdir libs
$ mkdir js
$ mkdir partials   // pretend our single page application is made of multiple pages as we navigate through it. $routeProvider handles this

$ curl https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js > libs/angular.min.js
$ curl https://code.angularjs.org/1.5.5/angular-route.min.js > libs/angular-route.min.js

$ vim index.html
<html ng-app>
<head>
    <script src="lib/angular.min.js"></script>
    <script src="lib/angular-route.min.js"></script>

    <script src="js/app.js"></script>
    <script src="js/controllers.js"></script>
</head>
<body>
   <div ng-view> </div>
</body>
</html>

$ vim app.js
var myApp = angular.module('myApp', ['ngRoute', 'artistControllers']);

myApp.config(['$routeProvider', function($routeProvider) {
  $routeProvider.
       when('/list', {
          templateUrl: 'partials/list.html',
          controller: 'ListController'
       }).
       when('/details/:itemId', {
          templateUrl: 'partials/details.html',
          controller: 'DetailsController'
       }).
       otherwise({
          redirectTo: '/list'
       });
}]);

$ vim controllers.js
var artistControllers = angular.module('artistControllers', []);    // just a wrapping module

artistControllers.controller('ListController', ['$scope', '$http', function($scope, $http) {
  $http.get('js/data.json').success(function(data) {
    $scope.artists = data;
    $scope.artistOrder = 'name';
  });
}]);

artistControllers.controller('DetailsController', ['$scope', '$http','$routeParams', function($scope, $http, $routeParams) {
  $http.get('js/data.json').success(function(data) {
    $scope.artists = data;
    $scope.whichItem = $routeParams.itemId;

    if ($routeParams.itemId > 0) {
      $scope.prevItem = Number($routeParams.itemId)-1;
    } else {
      $scope.prevItem = $scope.artists.length-1;
    }

    if ($routeParams.itemId < $scope.artists.length-1) {
      $scope.nextItem = Number($routeParams.itemId)+1;
    } else {
      $scope.nextItem = 0;
    }

  });
}]);

$ cd partials
$ vim list.html
<div>
    Search artist: <input ng-model="query">

    Order by
      <select ng-model="artistOrder">
        <option value="name">Name</option>
        <option value="reknown">Reknown</option>
      </select>

     Direction
      <input type="radio" ng-model="direction" name="direction" checked> ascending
      <input type="radio" ng-model="direction" name="direction" value="reverse"> descending

  <ul ng-show="query">
    <li ng-repeat="item in artists | filter: query | orderBy: artistOrder:direction">
      <a href="#/details/{{artists.indexOf(item)}}">
        <img ng-src="images/{{item.shortname}}.jpg">
        {{item.name}}
        {{item.reknown}}
      </a>
    </li>
  </ul>
</div>
$ vim details.html
 <div>
  <div ng-model="artists">
    <a href="#/details/{{prevItem}}">&lt;</a>
    <a href="#/details/{{nextItem}}">&gt;</a>
    {{artists[whichItem].name}}
    {{artists[whichItem].reknown}}
      <img ng-src="images/{{artists[whichItem].shortname}}.jpg">
      {{artists[whichItem].bio}}
  </div>
  <a href="index.html">&laquo; Back to search</a>
</div>










Comments