Skip to content

AngularJS: Get Started

Jump to bottom
Pritesh Patel edited this page Feb 6, 2019 · 12 revisions

https://app.pluralsight.com/player?course=angularjs-get-started&author=scott-allen&name=angularjs-get-started-m0&clip=0&mode=live

An Introduction

  • builtwith.angularjs.org - sample apps
  • plnkr.co - web-based IDE

An Angular Application

  • add <script> tag pointing to angular.js and an ng-app attribute in HTML

Developer Tools Tips

  • Browser developer tools
    • console tab
    • sources tab (Ctrl + O) and set breakpoints in script files for debugging

JavaScript Patterns

  • JavaScript as a functional language
  • Functions as abstractions (passing functions as parameters)
  • Functions to build modules
  • The IIFE (Immediatley-Invoked Function Expression) (avoids declaration of global variables)

Controllers

Controller Basics

  • A controller is responsible for building a model
  • 4 basic facts:
    • ng-controller directive
    • controller is a function that Angular invokes
    • controller takes a $scope parameter
    • attach model to $scope

The Capabilities

  • Controller focuses on scope, View focuses on HTML with directives (separation of concerns)
  • multiple controllers, complex objects, nested controllers

Calling HTTP

  • $http service to make http calls - GET, POST, PUT, DELETE...
  • ask for $http inside a controller
  • $http.get() always returns a promise. call then() method on the returned promise

Using $http

Controllers and Modules

  • Controllers usually live in modules (avoid global namespace)
  • var app = angular.module("moduleName", []);
  • register controllers in the module app.controller("MainController", MainController)
  • tell Angular to use your module with ng-app <body ng-app="moduleName">

Creating a Module

  • code example

Directives and Views

Introduction

  • Data binding directives - {{message}} - moves model data to view

ng-model

  • use attribute ng-model="username" to read data from view inputs into scope model

ng-click

  • add attribute ng-click="search()" to run function when button is clicked
  • alternatively use ng-submit="search()" on form element

ng-repeat

  • `

Filters

  • use filters to format view data
  • basic format: expression |filterName:parameter
  • e.g. currency, date, filter, json, limitTo, lowercase/uppercase, number, orderBy
  • bind sort option with view input

ng-show and ng-hide

  • ng-show="user" - if this expression is truthy, element is displayed
  • ng-hide directive works in a similar way

ng-include

  • bring in html from another source (to breakdown html into components and reuse markup components)
  • <div ng-include="'userdetails.html'" ng-show="user"></div>

Directives!

  • over 50 directives in the core library inc mouse-related and key-press directives
  • can also create custom directives

Services

The Venn of Services

  • View consumes the model, directives are an intermediary
  • Controllers, models and directives can use services

Gamification

  • $timeout / $interval Angular services

Service Roles

  • Controller - relates to setting up the model
  • Use services from controllers, directives and other services

Using $log

  • $log service can be used to add logging (to client console and server-side)

UI Services

  • UI services can be used to make changes to the View without touching the UI-related object directly from the Model
  • e.g $window, $browser, $location, $animate, $anchorScroll

Custom Services

  • motives for creating custom services: create reusable logic, create shared data (a service exists as a single instance), manage complexity

A GitHub Service

  • include service's new js file in index.html (after the script that defines the app module that the custom service will be used in)
  • multiple methods to register a service with Angular e.g.
var module = angular.module("githubViewer");
module.factory("github", github);

Routing

What is Routing?

  • Routing based on URL, routing engine captures request, routing rules render a response

Routing With Angular

  • Depends on module: angular-route.js, configure rules into $routeProvider e.g.
$routeProvider.when("/main", {
  templateUrl : "mainhtml",
  controller: "MainController"
})
  • default.html becomes a layout view
  • ng-view directive specifies where within the layout view to insert the template for the route

The Setup

  • add angular-route.js
  • add app.js - define the app module and configure routes:
app.config(function($routeProvider){
  $routeProvider
    .when("/main"), {
      templateUrl: "main.html,
      controller: "MainController"
    })
    .otherwise({redirectTo:"/main"});
});

The Fixup

  • create route, create template, create controller, have search navigate to new route
  • .when("/user/:username") where username is a querystring parameter
  • $routeParams.username - service provides access to querystring parameters
  • $location.path("/user/" + username); changes the client fragment to #/user/<someuser>
  • `Back to main - another way to route

Your Challenge

  • add a page to display details, open issues and collaborators (with their gravitars) of a given user's repository
  • route: /repo/:username/:reponame, template: repo.html, controller: RepoController, update github service with new functionality

Clone this wiki locally