Angular Logo

Getting into Angular

with Ray Villalobos

Use arrow keys to continue, esc for menu
Angular Logo

What are we doing?

  • Understanding the Basics of Angular.js
  • Building a very simple application
  • Demistifying Angular Vocabulary
  • This is a beginner class
  • Time/Network permitting advanced subject
Angular Logo

What you should know?

  • This is a beginner class
  • Understanding the Basics of Angular.js
  • Building a very simple application
  • Demistifying Angular Vocabulary
Angular Logo

Expectations

  • You are good at HTML/CSS
  • You've got some experience with JavaScript
  • Written Functions
Angular Logo

This will be easier if

  • You've used Git before
  • Understand JavaScript Objects/JSON
  • Have written your own functions

Installation

  • Download & Install Node.js
  • Download & Install Git (with GitBash option on PCs)
  • Download template from USB
  • Navigate to your directory
    
    cd /Desktop/gettingangular
          
  • Install Dependencies (from terminal or GitBash)
    
    npm install
          

Installation

  • Install Gulp (from terminal or GitBash)
    
    npm -g install gulp
          
  • Run the Gulp Automation
    
    gulp
          
  • Open up a browser on http://localhost:8080
  • Open folder contents in text editor
Angular Logo

What is Angular.js?

  • A JavaScript Framework
  • For Building single page applications
  • Kung-foo for JavaScript
  • Learn its MVW structure, get superpowers
  • It's supposed to be easy
Angular Logo

What's MVW?

  • Model, View, Whatever (usually a Controller)
  • Model = Data
  • View = Templates
  • Whatever (Controllers) = JavaScript that connects
  • Separating this makes apps easier
Angular Logo

Creating an Angular Project

  • https://angularjs.org/
  • Click on Download
  • Use CDNs or Download
  • Browse Additional Modules for Lots of options
  • Angular is Modular
Angular Logo

Working with Automation

  • Angular usually requires a server
  • Gulp can provide server/reloading
  • File Structure already in place
  • Learn all about complex workflows
Angular Logo

Angular Directives

  • A directive is an angular command
  • Usually starts with ng-SOMETHING
  • You can write your own (sample)
  • Create your own tags or attributes
  • Redefine existing apps
Angular Logo

Data Binding & Templates

  • Another directive we can use is the ng-model
  • Connects form elements to variables
  • This is called Data Binding
  • You output variables using curly braces
  • 
    <div class="main">
      <input ng-model="name">
      <h2>Welcome {{name}}</h2>    
    </div>
          
  • Stuff inside curly braces are expressions
Angular Logo

External JavaScript

  • JS Should be in separate files
  • Create a new app.js file in js folder
  • Add a script to connect
    
            <script src="js/app.js"></script>
          
Angular Logo

Defining a module

  • Modules make code self contained
  • Helps namespace your app
    
    var myNameSpace = angular.module('myApp', []);
          
  • Modify your ng-app directive
    
    <html lang="en" ng-app="myApp">
          
  • Allows you to add controllers
Angular Logo

Pro controllers

  • Use the controller method
  • Adds controllers to your application
    
    myNameSpace.controller('MyController', ['$scope', function($scope) {
    }]);
          
  • Bind controller to our view
    
    <div ng-controller="MyController"></div>
          
  • Now we're ready to control $scope
Angular Logo

Controlling $scope

  • Templates have access to controllers
  • Add something to scope
    
    $scope.name = 'Ray';
          
  • Becomes accessible to view
    
    <h1>{{name}}</h1>
          
Angular Logo

A bigger model

  • Add something to scope
    
      $scope.author = {
        'name' : 'Ray Villalobos',
        'title' : 'Staff Author',
        'company' : 'Lynda.com'
      }
          
  • Modify your template
    
      <h1>{{author.name}}</h1>
      <p>{{ author.title + ', ' + author.company }}</p>
          
  • Try different controllers/models
Angular Logo

A really big model

  • Copy contents of this file
  • Add it to your controller
  • rename your scope artists
    
      <h1>{{author.name}}</h1>
      <p>{{ author.title + ', ' + author.company }}</p>
          
  • Try different controllers/models
Angular Logo

Using ng-repeat

  • replace content
    
    <div class="main" ng-controller="MyController">
      <ul class="artistlist">
        <li class="artist cf" ng-repeat="item in artists">
          <img 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>
          
  • Fix issues with ng-src
Angular Logo

Using Services

  • You can add functionality to app
  • Services is a way to import modules
  • You can bring in an existing module
  • Create your own piece of code
  • $http service lets you bring in JSON data
Angular Logo

Adjusting code

  • cut JSON data out of $scope.artists
  • place in /js/data.json
  • modify app.js
    
    var myApp = angular.module('myApp', []);
    myApp.controller('MyController', ['$scope', '$http', function($scope, $http) {
      $http.get('js/data.json').success(function(data) {
        $scope.artists = data;
      });
    }]);
          
  • Watch out for Same Domain policies
Angular Logo

Using Filters

  • You can modify data through filters
  • Add an uppercase filter
    
    <h2>{{item.name | uppercase}}</h2>
          
  • Add an uppercase filter
    
    <li class="artist cf" ng-repeat="item in artists | limitTo: 5">
          
  • Try some of the other filters
Angular Logo

Binding data to filters

  • You can use form fields to modify scope
  • Add this code
    
      <div class="search">
        <h1>Artist Directory</h1>
        <input ng-model="query" type="text" placeholder="searchforartists" autofocus>
      </div>
          
Angular Logo

Binding data to filters

  • ng-model creates a variable in scope
  • we can filter through that variable
  • Add filter code
    
        <li class="artist cf" ng-repeat="item in artists | filter: query">
          
Angular Logo

Adding an orderBy filter

  • orderBy controls sort order
  • Add select popup
    
    <label class="formgroup">by
    <select ng-model="artistOrder">
      <option value="name">Name</option>
      <option value="reknown">Reknown</option>
    </select>
    </label>
          
  • modify filter command
    
    <li class="artist cf" ng-repeat="item in artists | filter: query | orderBy: artistOrder">
          
Angular Logo

Controlling orderBy Direction

  • Add radio buttons
    
        <label class="formgroup">
          <input type="radio" ng-model="direction" name="direction" checked>
          asc
        </label>
        <label class="formgroup">
          <input type="radio" ng-model="direction" name="direction" value="reverse">
          desc
        </label>
          
Angular Logo

Controlling orderBy Direction

  • Update OrderBy with direction
    
    <li class="artist cf" ng-repeat="item in artists | filter: query | orderBy: artistOrder:direction">
          
  • Set up default order in app.js
    
    $scope.artistOrder = 'name';
          
Angular Logo

Creating Routes

  • Angular apps don't have pages
  • You can load different content using routes
  • Deep Linking looks at location URL
  • Use the hashtag to provide pages
Angular Logo

Loading up routing

  • Routing is a separate module
  • Has to be loaded and added as dependencies
  • Set up default order in app.js
    
    <script src="js/lib/angular/angular-route.min.js"></script>
          
Angular Logo

Moving our view

  • Create a folder called partials
  • create a file called list.html
  • Create a new section in list.html
    
    <section class="artistpage">
    </section>
          
Angular Logo

Moving our view

  • Cut and paste from inside this tag
    
    <div class="main" ng-controller="MyController">
     </div>
          
  • Replace ng-controller with ng-view
    
    <div class="main" ng-view > </div>
          
Angular Logo

Rename Controllers

  • Change controller in app.js
    
    var artistControllers = angular.module('artistControllers', []);
    artistControllers.controller('ListController', ['$scope', '$http', function($scope, $http) {
      $http.get('js/data.json').success(function(data) {
        $scope.artists = data;
        $scope.artistOrder = 'name';
      });
    }]);
          
  • Also changed module name
Angular Logo

Create Controllers.js file

  • Move app.js code to controllers.js
  • Link the file in your HTML document
    
    <script src="js/controllers.js"></script>
          
Angular Logo

New App.js file

  • Link the file in your HTML document
    
    <script src="js/controllers.js"></script>
          
Angular Logo

Edit app.js file

  • 
    var myApp = angular.module('myApp', [
      'ngRoute',
      'artistControllers'
    ]);
    
    myApp.config(['$routeProvider', function($routeProvider) {
      $routeProvider.
        when('/list', {
          templateUrl: 'partials/list.html',
          controller: 'ListController'
        }).
        otherwise({
          redirectTo: '/list'
        });
    }]);
          
Angular Logo

Set up the Details Controller

  • Add to artistController
    
    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;
      });
    }]);
          
  • Add routeParams
  • Establish whichItem scope
Angular Logo

Set up the Details Controller

  • Add to artistController
    
    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;
      });
    }]);
          
  • Add routeParams
  • Establish whichItem scope
Angular Logo

Modify List Code

  • Add link to details page
    
    <li class="artist cf" ng-repeat="item in artists | filter: query | orderBy: artistOrder:direction">
      <a href="#/details/{{artists.indexOf(item)}}">
      <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>
      </a>
    </li>
          
  • Use indexOf to get array
  • Add routeParams
  • Establish whichItem scope
Angular Logo

Create Details Template

  • Update details template
    
    <section class="artistinfo">
    <div class="artist cf" ng-model="artists">
      <h1>{{artists[whichItem].name}}</h1>
      <div class="info">
        <h3>{{artists[whichItem].reknown}}</h3>
        <img ng-src="images/{{artists[whichItem].shortname}}_tn.jpg" alt="Photo of {{artists[whichItem].name}}">
        <div class="bio">{{artists[whichItem].bio}}</div>
      </div>
    </div>
    <a href="index.html">&laquo; Back to search</a>
    </section>
    

The End

Table of Contents