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
Intro to Angular
- 1,343