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="[Link]
</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 [Link] and click "Download"
• Choose the latest stable 1.8.x version (currently 1.8.2)
• Download the "Minified" version ([Link])
• Optionally download additional modules ([Link], etc.)
Step 2: Create Project Structure
my-angular-app/
├── lib/
│ └── [Link]
├── app/
│ ├── [Link]
│ ├── controllers/
│ ├── services/
│ └── directives/
├── views/
└── [Link]
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/[Link]"></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/[Link]
var app = [Link]('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 [Link] (Python 3) or python -m SimpleHTTPServer
(Python 2)
o [Link]: 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: {{ [Link] }}
• Two-way Data Binding Example:
<div ng-controller="UserController">
<input type="text" ng-model="[Link]">
<p>Hello, {{ [Link] }}!</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
[Link]('StudentController', function($scope) {
$[Link] = [
{name: 'Alice', grade: 90},
{name: 'Bob', grade: 85},
{name: 'Charlie', grade: 78}
];
$[Link] = function() {
$[Link]({
name: $[Link],
grade: $[Link]
});
$[Link] = '';
$[Link] = '';
};
});
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 = [Link]('myApp', ['ngRoute']);
// Configure the module
[Link](function($routeProvider) {
// Module configuration
});
// Use the module
[Link]('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
[Link]('StudentService', function($http) {
[Link] = function() {
return $[Link]('/api/students');
};
[Link] = function(student) {
return $[Link]('/api/students', student);
};
});
Slide 11: Using Services in Controllers
[Link]('StudentCtrl', function($scope, StudentService) {
// Load students
[Link]()
.then(function(response) {
$[Link] = [Link];
})
.catch(function(error) {
$[Link] = 'Failed to load students';
});
// Add a student
$[Link] = function() {
var newStudent = {
name: $[Link],
grade: $[Link]
};
[Link](newStudent)
.then(function(response) {
$[Link]([Link]);
$[Link] = '';
$[Link] = '';
});
};
});
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>{{ [Link] | currency }}</p>
<p>{{ [Link] | uppercase }}</p>
<p>{{ [Link] | date:'shortDate' }}</p>
<ul>
<li ng-repeat="item in items | orderBy:'name' | filter:searchText">
{{ [Link] }}
</li>
</ul>
</div>
Slide 13: Custom Filters
[Link]('capitalize', function() {
return function(input) {
if (!input) return '';
return [Link](0).toUpperCase() + [Link](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
[Link](function($routeProvider) {
$routeProvider
.when('/', {
templateUrl: 'views/[Link]',
controller: 'HomeCtrl'
})
.when('/students', {
templateUrl: 'views/[Link]',
controller: 'StudentCtrl'
})
.when('/courses', {
templateUrl: 'views/[Link]',
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="[Link]" required>
<span ng-show="[Link].$[Link] && [Link].$touched">
Name is required
</span>
</div>
<div>
<label>Email:</label>
<input type="email" name="email" ng-model="[Link]" required>
<span ng-show="[Link].$[Link] && [Link].$touched">
Email is required
</span>
<span ng-show="[Link].$[Link] && [Link].$touched">
Invalid email format
</span>
</div>
<button type="submit" ng-disabled="userForm.$invalid">Submit</button>
</form>
Slide 16: Custom Directives
[Link]('studentCard', function() {
return {
restrict: 'E', // Element directive
templateUrl: 'templates/[Link]',
scope: { // Isolated scope
student: '=', // Two-way binding
onDelete: '&' // Function binding
},
controller: function($scope) {
$[Link] = function() {
if ($[Link] < 100) {
$[Link] += 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
[Link]('Logger', function() {
[Link] = function(msg) {
[Link](msg);
};
});
// Injecting the service
[Link]('MainCtrl', function($scope, Logger) {
$[Link] = function() {
[Link]('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
• [Link]($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
