Intro to Angular

What's Angular?

  • A Front End Framework developed by Google
  • Using the Model View Controller pattern
  • Focus on "Single Page Application"

Why Use Angular?

  • Improve developer efficiency
  • Highly dynamic browser interactions
  • You want a "Single Page App"

First Angular App

<html ng-app="myapp">
  <head>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.4/angular.min.js"></script>
    <script type="text/javascript" src="app.js"></script>
  </head>

  <body ng-controller="HelloController">
    <h2>Hello, {{hello.title}}!</h2>
  </body>
</html>

We have to use special Angular "directives" in our HTML to indicate Angular behavior. Notice ng-app, ng-controller, as well as the expression syntax: {{ hello.title }}

First Angular App

// Create an angular module, often called an angular application
// The first parameter is the name, the second is a 'dependency list'
var application = angular.module("myapp", []);

// Bind a controller to a module
// The first parameter is a name, the second is a constructor
application.controller("HelloController", function($scope) {
    $scope.hello = {};
    $scope.hello.title = "World";
});

ng-app binds to the name we give to an angular.module()

ng-controller binds to a name in a "controller binding"

 

First Angular App

var application = angular.module("myapp", []);

application.controller("HelloController", 
  function($scope) {
    $scope.hello = {};
    $scope.hello.title = "World";
});

ng-app binds to a module name: "myapp"

ng-controller binds to a controller name: "HelloController"

Anything in expression syntax is a property of "$scope"

 

<html ng-app="myapp">
  <body ng-controller="HelloController">
    <h2>Hello, {{hello.title}}!</h2>
  </body>
</html>

A Mental Model

View

HTML

Controller

JS, specifically constructed in a

.controller function

$scope

User input flows from

the view to the ctrl

Data from the program flows from the ctrl to the view

Questions?

Made with Slides.com