AngularJs Notes - newgeekorder/TechWiki GitHub Wiki

Overview

AngularJs is a modern html5 ready client (javascript) web framework for MVC and MVVC web development.

Notes

Angualarjs typically work with single page applications starting with a single Index.html includes all scripts and styles we're using, just as a regular .html-file would. It will also initialize our AngularJS-app and acts as a container for other templates.

Angular Basics

Hello world basic html page that

  • starts an angular app ng-app
  • does client side bindings ng-model 
<!DOCTYPE html>
<html ng-app>
<head>
    <title>Hello World, AngularJS - ViralPatel.net</title>
    <script type="text/javascript"
        src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
 
</head>
<body>
     
    Write some text in textbox:
    <input type="text" ng-model="sometext" />
 
    <h1>Hello {{ sometext }}</h1>
    <h4>Uppercase: {{ sometext | uppercase }}</h4>
    <h4>Lowercase: {{ sometext | lowercase }}</h4>
  
</body>
</html>

The html elements have angular filters applied with functions like lowercase number and date formatting etc.

Directives

Using angular directives we can control on our single page app what we ng-show or ng-hide There are a range of angular directives including:

Action Directives

  • ngSubmit - Enables binding angular expressions to onsubmit events.
  • ngKeypress - Specify custom behavior on keypress event. *Data Directives *
  • <li ng-repeat="contact in contacts">{{ contact }}</li>

Angular and Mvc

The pretty standard MVC pattern applied to AngularJs looks like:

Model: the data structure behind a specific piece of the application, usually JSON. For instance a group of User IDs could have the following model:

{{{
{
  "users" : [{
    "name": "Joe Bloggs",
    "id": "82047392"
  },{
    "name": "John Doe",
    "id": "65198013"
  }]
}
}}}

The data is retrieved from the server typically in ajax calls. People familiar with jQuery use {{{$.ajax}}} method, but Angular wraps this in {{{$http}}}

View: The view in angular is your HTML and/or rendered output. Using an MVC framework, you'll pull down Model data which updates your View and displays the relevant data in your HTML. This can include Angular's own templates used in custom directives (more on these later)

Controller: Angular's javascript controller class(es) manage the interaction in the page and the backend data

Overview

Simple AngularJs pages provide Dynamic Binding with Javacript data, meaning html elements with braces {{value}} will be substituted.

Getting Started with [Dynamic Binding)

Directives are a means to provide a custom tag that appears in the application to provide html, css and/or dom manipulation e.g {{{}}}, there are whole series of core directives used for creating typical web and html forms http://docs.angularjs.org/api/ng#directive

Custom directives can also be created see, [Getting Started with Directives)

The directives are used in plain html and in templates to create content

Templates are snippets of HTML, which contain parts of the UI of our application.

Controllers handle most of the complex logic related to data and templates. The core of a controller is the {{{$scope}}} object, which injects data into a template. It binds data in both ways, meaning that changes are propagated from controllers to views and vice versa. It's really handy, and we'll get into that a bit later.

Router maps URLs to certain templates and controllers. Routers make deep links possible.

Services are wrappers for functionality in AngularJS. We will implement a resource-service

Scopes and the Angular Controller

Scope is nothing but an object that Glues the View with Controller. They hold the Model data that we need to pass to view. Scope uses Angular’s two-way data binding to bind model data to view.

Imaging $scope as an object that links Controller to the View. It is controllers responsibility to initialize the data that the view needs to display. This is done by making changes to $scope.

Let us see a small Hello World application to understand $scope.

<!DOCTYPE html>
<html ng-app>
<head>
<title>Hello World, AngularJS - ViralPatel.net</title>
<script type="text/javascript"
    src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
</head>
<body>
<div ng-controller="ContactController">
     Email:<input type="text" ng-model="newcontact"/>
    <button ng-click="add()">Add</button>
    <h2>Contacts</h2>
 
    <ul>
        <li ng-repeat="contact in contacts"> {{ contact }} </li>
    </ul>
 
</div>
<script type="text/javascript">
    function ContactController($scope) {
        $scope.contacts = ["[email protected]", "[email protected]"];
 
        $scope.add = function() {
        $scope.contacts.push($scope.newcontact);
        $scope.newcontact = "";
        }
    }
</script>
</body>
</html>

Angular Routes

If we are not using a single page application, Angular Routes can be used to route to the appropriate template

config(function ($routeProvider) {
    $routeProvider
      .when('/takenlijst', {
        templateUrl: 'views/takenlijst.html',
        controller: 'TakenlijstCtrl'
      })
      .when('/login', {
        templateUrl: 'views/login.html',
        controller: 'LoginCtrl'
      })
      .otherwise({
        redirectTo: '/takenlijst'
      });
  }).

Chaining Requests

Yes, this is handled very elegantly by AngularJS since its $http service is build around the PromiseAPI. Basically a call to any of $http methods return a promise and you can promises very easily by using the then method. Here is an example:

{{{
$http.get('http://host.com/first')
   .then(function(result){
    //post-process results and return
    return myPostProcess1(result.data); 
   })
   .then(function(resultOfPostProcessing){
    return $http.get('http://host.com/second'); 
   })
   .then(function(result){
    //post-process results of the second call and return
    return myPostProcess2(result.data); 
   })
   .then(function(result){
      //do something where the last call finished
   });
}}}

Angular Events

Angular Modules

Angular has it’s own module system and dependency resolution system largly replacing requirejs

Extensions

Backend Integration

Helper Tools

  • Yo scaffolds out a new application, writing your Grunt configuration and pulling in relevant Grunt tasks that you might need for your build.
  • Grunt is used to build, preview and test your project, thanks to help from tasks curated by the Yeoman team and grunt-contrib.
  • Bower is used for dependency management, so that you no longer have to manually download and manage your scripts.
  • Karma Angular team's own test runner

Misc

⚠️ **GitHub.com Fallback** ⚠️