Skip to content

Instantly share code, notes, and snippets.

@R-SE
Created May 11, 2018 02:42
Show Gist options
  • Save R-SE/39255d29dd570cb3fb32d3761c747f7b to your computer and use it in GitHub Desktop.
Save R-SE/39255d29dd570cb3fb32d3761c747f7b to your computer and use it in GitHub Desktop.
Angular

View - the HTML. Model - the data available for the current view. Controller - the JavaScript function that makes/changes/removes/controls the data.

AngularJS extends HTML attributes with Directives, and binds data to HTML with Expressions.

<div ng-app="" ng-init="firstName='John'">
  <p>Name: <input type="text" ng-model="name"></p>
  <p ng-bind="name"></p>
</div>

Directives are HTML attributes with an ng prefix. ng-app directive defines an AngularJS app, and tells AngularJS that the

element is the "owner" of an AngularJS application. ng-model directive binds the value of HTML controls (input, select, textarea) to application data, and binds the value of the input field to the application variable name. ng-bind directive binds application data to the HTML view, and binds the innerHTML of the

element to the application variable name. ng-controller directive defines the controller. Expressions are written inside double braces: {{ expression }} or as ng-bind="expression"

ng-app (modules) defines the application, ng-controller defines the controller (which controls apps)

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.firstName= "John";
    $scope.lastName= "Doe";
});
</script>

AngularJS expressions are like JS expressions, but don't support conditionals, loops, and exceptions -- but do support filters.

Create a module

<div ng-app="myApp">...</div>
<script>
var app = angular.module("myApp", []); 
</script>

$scope is the application object (the owner of application variables and functions) onto which we can add props/methods

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment