AngularJS: Introduction and Fundamentals
200-Level Course Material
Slide 1: What is AngularJS?
• JavaScript framework developed and maintained by Google
• Designed for building dynamic single-page applications (SPAs)
• Released in 2010, preceded Angular 2+ (different framework)
• Uses MVC (Model-View-Controller) or MVVM (Model-View-ViewModel) architecture
• Extends HTML with custom attributes called directives
Slide 2: Why Learn AngularJS?
• Still used in legacy applications
• Teaches important SPA concepts
• Two-way data binding simplifies development
• Dependency injection makes code modular and testable
• Strong community and documentation
• Foundation for understanding modern Angular (2+)
Slide 3: AngularJS Architecture
• Modules: Containers for application parts
• Controllers: JavaScript functions that maintain application data and behavior
• Services: Reusable business logic independent of views
• Directives: Extend HTML with custom attributes and elements
• Filters: Format data for display to the user
• Two-way data binding: Synchronizes data between model and view
Slide 4: Setting Up AngularJS (CDN)
<!DOCTYPE html>
<html ng-app>
<head>
<title>My First AngularJS App</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
</head>
<body>
<!-- Simple two-way data binding example -->
<input type="text" ng-model="name">
<h1>Hello, {{ name }}!</h1>
</body>
</html>
Slide 5: Setting Up AngularJS Locally
Step 1: Download AngularJS
• Visit https://angularjs.org/ and click "Download"
• Choose the latest stable 1.8.x version (currently 1.8.2)
• Download the "Minified" version (angular.min.js)
• Optionally download additional modules (angular-route.min.js, etc.)
Step 2: Create Project Structure
my-angular-app/
├── lib/
│ └── angular.min.js
├── app/
│ ├── app.js
│ ├── controllers/
│ ├── services/
│ └── directives/
├── views/
└── index.html
Step 3: Create HTML File with Local Reference
<!DOCTYPE html>
<html ng-app>
<head>
<title>My Local AngularJS App</title>
<!-- Reference local AngularJS file -->
<script src="lib/angular.min.js"></script>
</head>
<body>
<!-- Simple two-way data binding example -->
<input type="text" ng-model="name">
<h1>Hello, {{ name }}!</h1>
</body>
</html>
Step 4: For More Complex Apps (Optional)
// app/app.js
var app = angular.module('myApp', []);
// Add controllers, services, etc. as needed
Step 5: Run Locally
• Use a local web server (not just opening the file directly)
• Options:
o Python: python -m http.server (Python 3) or python -m SimpleHTTPServer
(Python 2)
o Node.js: npx http-server
o VS Code: Live Server extension
o Any other web server software
Slide 6: Directives
• ng-app: Initializes an AngularJS application
• ng-controller: Attaches a controller to the view
• ng-model: Binds input elements to application data
• ng-repeat: Repeats an HTML element for each item in a collection
• ng-click: Specifies custom behavior when an element is clicked
• ng-show/ng-hide: Conditionally shows or hides content
• ng-if: Conditionally includes/removes content from DOM
Slide 7: Expressions and Data Binding
• Expressions: JavaScript-like code snippets inside {{ }}
• Simple evaluation: {{ 5 + 5 }}
• Variable binding: {{ user.name }}
• Two-way Data Binding Example:
<div ng-controller="UserController">
<input type="text" ng-model="user.name">
<p>Hello, {{ user.name }}!</p>
</div>
Slide 8: Controllers
• JavaScript functions that control data for a view
• Attached to HTML using ng-controller directive
• $scope is the "glue" between controller and view
app.controller('StudentController', function($scope) {
$scope.students = [
{name: 'Alice', grade: 90},
{name: 'Bob', grade: 85},
{name: 'Charlie', grade: 78}
];
$scope.addStudent = function() {
$scope.students.push({
name: $scope.newName,
grade: $scope.newGrade
});
$scope.newName = '';
$scope.newGrade = '';
};
});
Slide 9: Modules
• Containers for different parts of your application
• Help maintain clean code organization
• Can be reused across applications
// Define a module
var app = angular.module('myApp', ['ngRoute']);
// Configure the module
app.config(function($routeProvider) {
// Module configuration
});
// Use the module
app.controller('MyController', function() {
// Controller logic
});
Slide 10: Services
• Singleton objects for application-wide functionality
• Used for sharing data and functions across controllers
• Built-in services start with $ (like $http, $timeout)
• Custom services create reusable code
app.service('StudentService', function($http) {
this.getAllStudents = function() {
return $http.get('/api/students');
};
this.addStudent = function(student) {
return $http.post('/api/students', student);
};
});
Slide 11: Using Services in Controllers
app.controller('StudentCtrl', function($scope, StudentService) {
// Load students
StudentService.getAllStudents()
.then(function(response) {
$scope.students = response.data;
})
.catch(function(error) {
$scope.error = 'Failed to load students';
});
// Add a student
$scope.addStudent = function() {
var newStudent = {
name: $scope.newName,
grade: $scope.newGrade
};
StudentService.addStudent(newStudent)
.then(function(response) {
$scope.students.push(response.data);
$scope.newName = '';
$scope.newGrade = '';
});
};
});
Slide 12: Filters
• Transform data for display without changing the original
• Can be used in expressions, directives, or controllers
• Built-in filters: currency, date, uppercase, lowercase, number, orderBy, filter
<div ng-controller="ProductCtrl">
<p>{{ product.price | currency }}</p>
<p>{{ product.name | uppercase }}</p>
<p>{{ product.created | date:'shortDate' }}</p>
<ul>
<li ng-repeat="item in items | orderBy:'name' | filter:searchText">
{{ item.name }}
</li>
</ul>
</div>
Slide 13: Custom Filters
app.filter('capitalize', function() {
return function(input) {
if (!input) return '';
return input.charAt(0).toUpperCase() + input.slice(1).toLowerCase();
};
});
<div ng-controller="NameCtrl">
<p>{{ username | capitalize }}</p>
</div>
Slide 14: Routing
• Navigate between views within a single page
• Requires the ngRoute module
app.config(function($routeProvider) {
$routeProvider
.when('/', {
templateUrl: 'views/home.html',
controller: 'HomeCtrl'
})
.when('/students', {
templateUrl: 'views/students.html',
controller: 'StudentCtrl'
})
.when('/courses', {
templateUrl: 'views/courses.html',
controller: 'CourseCtrl'
})
.otherwise({
redirectTo: '/'
});
});
Slide 15: Forms and Validation
<form name="userForm" ng-submit="submitForm()" novalidate>
<div>
<label>Name:</label>
<input type="text" name="name" ng-model="user.name" required>
<span ng-show="userForm.name.$error.required && userForm.name.$touched">
Name is required
</span>
</div>
<div>
<label>Email:</label>
<input type="email" name="email" ng-model="user.email" required>
<span ng-show="userForm.email.$error.required && userForm.email.$touched">
Email is required
</span>
<span ng-show="userForm.email.$error.email && userForm.email.$touched">
Invalid email format
</span>
</div>
<button type="submit" ng-disabled="userForm.$invalid">Submit</button>
</form>
Slide 16: Custom Directives
app.directive('studentCard', function() {
return {
restrict: 'E', // Element directive
templateUrl: 'templates/student-card.html',
scope: { // Isolated scope
student: '=', // Two-way binding
onDelete: '&' // Function binding
},
controller: function($scope) {
$scope.incrementGrade = function() {
if ($scope.student.grade < 100) {
$scope.student.grade += 1;
};
};
});
<student-card
student="currentStudent"
on-delete="removeStudent(currentStudent)">
</student-card>
Slide 17: Dependency Injection
• AngularJS's way of providing components with their dependencies
• Makes testing easier
• Types of components that can be injected:
o Value
o Factory
o Service
o Provider
o Constant
// Defining a service
app.service('Logger', function() {
this.log = function(msg) {
console.log(msg);
};
});
// Injecting the service
app.controller('MainCtrl', function($scope, Logger) {
$scope.doSomething = function() {
Logger.log('Something happened!');
};
});
Slide 18: AngularJS vs Modern Frameworks
• Similarities
o Component-based architecture
o Data binding
o Dependency injection
o Routing
• Differences
o Angular (2+): TypeScript-based, more opinionated, better performance
o React: Virtual DOM, JSX, component-focused
o Vue: Progressive framework, easier learning curve
o Modern frameworks generally have better performance
Slide 19: Best Practices
• Keep controllers simple and focused
• Use services for business logic and data access
• Use directives for DOM manipulation
• Organize code by feature, not by type
• Maintain clean scopes, avoid $scope pollution
• Use ngAnnotate for minification safety
• Follow style guide (John Papa's Angular Style Guide)
Slide 20: Debugging Tips
• Use ng-inspector browser extension
• Angular Batarang Chrome extension
• console.log($scope) to inspect scope
• Minification issues: Always use the array notation for DI
• Watch for common errors:
o Forgetting to include ng-app
o Scope inheritance issues
o Missing dependencies
Slide 21: Lab Assignment
Build a Student Management Application
• Create an AngularJS application with:
o Student listing page with search and sort
o Student detail page
o Add/edit student form with validation
o Delete functionality with confirmation
Requirements:
1. Use at least 5 different directives
2. Implement at least 2 custom services
3. Create at least 1 custom filter
4. Implement routing with at least 3 views
5. Deploy to GitHub Pages
Slide 22: Additional Resources
• AngularJS Official Documentation
• AngularJS on GitHub
• W3Schools AngularJS Tutorial
• Codeschool's AngularJS Course
• John Papa's Style Guide
• AngularJS Patterns: Clean Code
