AngularJS

From Code Self Study Wiki
Jump to: navigation, search

AngularJS framework. This page is for Angular version 1. See also Angular2.

Tutorials

Some newer ones:

And:

See also:

Thinkster.io

Resources

Concepts

Directives

Extending HTML with attribues, elements, and comments.

Anything like `ng-app`, `ng-model`, or `ng-repeat` is a built-in directive.

Controllers

`$scope` ties the controller to the view. It's the ViewModel -- the data for the view.

var myApp = angular.module('myApp', []);
myApp.controller('SimpleController', function ($scope) {
 
    $scope.customers = [
        { name: 'Bob', city: 'Boston' },
        { name: 'Cindy', city: 'San Jose' },
        { name: 'John', city: 'Johannesburg' },
        { name: 'Kristina', city: 'Kansas City' }
    ];
});

The `$scope` connects it with the view:

<div class="container" data-ng-controller="SimpleController">
    <h3>Adding Controller</h3>
    <input type="text" data-ng-model="name">
    <ul>
        <li data-ng-repeat="customer in customers">
            {{ customer.name }} from {{ customer.city }}
        </li>
    </ul>
</div>

So now the controller can access `$scope.name` and the view can access `$scope.customers`. `$scope` glues them together.

Modules

Module -> Config -> Routes -> (View + Controller)

Data is usually taken from Factories, Services, Providers, Resources, etc.

Views have Directives.

Your module name is called in `ng-app` like `ng-app="moduleName"`, and then:

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

Routes

You have to include the angular-route.js file and then reference it:

var myApp = angular.module('myApp', ['ngRoute']);
 
myApp.config(function ($routeProvider) {
    $routeProvider
        .when('/', {
            controller: 'SimpleController',
            templateUrl: 'app/views/view1.html'
        })
        .when('/partial2', {
            controller: 'SimpleController',
            templateUrl: 'app/views/view2.html;'
        })
        .otherwise({ redirectTo: '/' });
});

Views

A placeholder for the views:

<div data-ng-view=""></div>

Factories, Services, Providers, Values

The main difference for the first three are just the way in which they create the object that gets the data.

  • Factory -- create object inside of factory and return it
  • Service -- standard function uses `this` keyword
  • Provider -- $get function
  • Value -- a way to get a config value with name/value pair

Factory

Example:

var myApp = angular.module('myApp, []')
    .factory('simpleFactory', function () {
        var factory = {};
        var customers = [...];
        factory.getCustomers = function () {
            // if you passed in the $http object, you could do AJAX calls here
            return customers;
        };
        return factory;
    })
    .controller('SimpleController', function ($scope, simpleFactory) {
        $scope.customers = simpleFactory.getCustomers();
    });

Tips

// To prepare for code minification
angular.module('myApp', [])
    .controller("Example", ['scope', function(s) {
        s.name = "Jim";
    }]);