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?

Intro to Angular

By Tyler Bettilyon

Made with Slides.com

Intro to Angular

  • 1,340

More from Tyler Bettilyon